 [html][css] Layout DIV na 100% width oraz height !POMOCY!, Konkretna pomoc! |
  |
| [html][css] Layout DIV na 100% width oraz height !POMOCY!, Konkretna pomoc! |
 12.04.2008, 18:46:18
Post
#1
|
|
 Grupa: Zarejestrowani Postów: 18 Pomógł: 2 Dołączył: 12.04.2008 Skąd: Poznań Ostrzeżenie: (0%) 
 |
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ć. Ten post edytował ciepolml 12.04.2008, 18:47:26 -------------------- --- www.NeatGroup.pl ---
|
 |
 
|
|
12.04.2008, 21:18:06
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 98 Pomógł: 1 Dołączył: 7.08.2005 Skąd: Górny Śląsk Ostrzeżenie: (0%)
|
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. -------------------- tutoriale
|
|
|
|
|
17.04.2008, 13:48:46
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 18 Pomógł: 2 Dołączył: 12.04.2008 Skąd: Poznań Ostrzeżenie: (0%)
|
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;} -------------------- --- www.NeatGroup.pl ---
|
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 13.06.2025 - 22:37 |
