Forum PHP.pl > [html][css] Layout DIV na 100% width oraz height !POMOCY!

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html][css] Layout DIV na 100% width oraz height !POMOCY!

ciepolml

12.04.2008, 18:46:18

Witam serdecznie.
Od paru dni nie moge sie uporać z moim nowym szablonem na strone www, który chce oprzeć na diva'ch i dostosować do FF oraz IE6 oraz IE7.
Przedstawiam rysunek graficzny podziału stronu oraz layout pod jaki to będzie.
Po wielu próbach stworzyłem lay na tabelce, (czego nienawidze) ale mam w nim problem z poziomym scrollem.

Prosze o pomoc w ułożeniu tego na div opisanych CSS, lub podpowiedź czemi w IE jest poziomy suwak, gdy strona jest długa? Czy chodzi o to ze jak pojawia sie pionowy scroola, to strona juz jest weższa, i width: 100% musi juz pokazc sie suwak? Dodatkowo przy przetwarzaniu png pod IE za pomocą pngFIX obrazek który wstawiony jest w

CODE

<div id="logo"><img src="img/logo.png" alt="Logo NeatGroup.pl" />div>

pod IE zaczyna przesuwać sie ze stroną, a ma byc statycznie jak pod FF. Gdy ustawiłem go jako tło DIV, to było OK, ale w IE suwaki na stronie byly
jakby ustawione na 90%, i jakies dziwne marginesy sie robiły.

Pokazuje szkic:
http://www.neatgroup.pl/screen/screen1_ng.jpg

#left1,2,3,4 chce aby zawsze były na 100% wysokości przeglądarki, i by sie rozszerzały (rozciagały) w nieskonczoność względem tresci umieszczonej w #tresc, a na stronie pojawi sie po prawej pionowy suwak. #left1 - 200px width ; left2,3,4 powiedzmy po 15px; Czyli tak jakby prawa jest zawsze widoczna na cała wysokośc. Chce jednak by było to płynne bo będzie tam logo, które bedzie na sztywno ustawione w jednej pozycji i po zjechaniu na dół na zostać na swoim miejscu.

#top oraz #bottom maja height: 130px; oraz width:100% lub jak w kodzie by musiało byc "auto" zawsze dopełniając poziomo do końca stronę na sztywno z tym ze #bottom zjeżdza na dół wraz z rozciąganiem #treśc.

Sama #tresc, ma width:780xp; i jest w div#center który wypełnia stronę na 100% width.

Pokazuje layout:
http://www.neatgroup.pl/screen/layout3.jpg

Tabelką zrobiony szkic dostepny:
http://www.neatgroup.pl/ngnew/

GENERALNIE CHCE TO ZROBIć NA div, WIEC TE PROBLEMY Z LAYOUTEM POD ie SA DLA MNIE MNIEJ WAZNE.
Czy ktoś mógłby zaprezentować kod do tego? Ja juz tu dostaje do głowy z pozycjonowaniem DIV na 100% height i width. Zawsze ukochanemu IE cos nie pasuje, a w tym układzie nawet najcięzej pod FF niektóre rzeczy mi było poustawiać.

Blajo

12.04.2008, 21:18:06

Nie sądzę, żeby komuś tutaj chciało się pisać gotowy kod.

Pokaż swój, jaki napisałeś, to wspólnie postaramy się poprawić błędy.

ciepolml

17.04.2008, 13:48:46

Ok naczytalem sie sporo spor o obejściach na IE co do ułożenie kolumn na divach. Bardzo gorąco polecam artykuł o równych kolumnach z działającym przykładem
http://perfectionorvanity.com/2007/03/07/r...ny-layoutu-css/.

A ja swoją stronę jednach chcę prosto rozwiązać i w zasadzie mi sie to udało, poza małym mankamentem. W FF jest wszystko idelanie tak jak chce, w IE w zasadzie też, tylko nie wiem czemu pojawia mi sie suwak poziomy i to jeszcze jakby stronka była ciut ciut za szeroka. Wynika to chyba z tego ze jak sie pojawia dłuższa tresc i pojawia sie suwak pionowy (czego che na tej stronie i tak ma byc), to IE nie dodaje szerk. tego suwaka do tej 100% width i przez to stronka na szerokośc sie nie miesci. Jest jakby za długa o szerokość pionowego suwaka. Chyba wiecie o co chodzi.

http://www.neatgroup.pl/test2/

Zerknijcie na budowę. [boje sie generalnie ze zlinczujecie mnie za ten kod, bo nie wiem czemu ale wydaje mi sie mala profesjonalnym rozwiązaniem, wiec prosze o wyrozumiałość]

CODE

<body>

<div id="contener">
<div id="content">
<div id="tresc">
<div id="top">dsfsdfdsf</div>
<div id="center">
<p class="text">
tutaj jak na stronie znajduje sie bardzo długi tekst
</p>
</div>
<div id="bottom">dsfsdfdsf</div>
</div>
<div id="nakladka"></div>
<div id="nakladka2"></div>
<div id="nakladka3"></div>

</div>
</div>

</body>

oraz CSS

CODE

/* CSS Document */
html, body {
margin:0;
padding:0;
overflow: hidden;
width:100%;
height:100%;}

div#contener{
background:#FFF;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:1;}

div#content{
position:absolute;
background:none;
overflow:auto;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:5;}


div#tresc{
position:absolute;
overflow:auto;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:6;
background-color:#000099;}

div#top{
width:100%;
height:130px;
position:relative;
background-color: #669933;}

div#center{
width:100%;
height:auto;
position:relative;
background-color: #9966CC;}

div#bottom{
width:100%;
height:130px;
position:relative;
background-color:#FF9933;}


div#nakladka{
float:left;
position:absolute;
background:url(img/gray_pattern.gif);
z-index:10;
top:0;
left:0;
right:auto;
width:200px;
height:100%;}

div#nakladka2{
float:left;
position:absolute;
background-color: #009933;
z-index:15;
top:0;
left:200px;
right:auto;
width:50px;
height:100%;}

div#nakladka3{
float:left;
position:absolute;
background-color: #0099CC;
z-index:20;
top:0;
left:250px;
right:auto;
width:50px;
height:100%;}

p.text{
width:750px;
margin:0 0 0 300px;
background-color: #FF99CC;
padding:10px;}

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.