Podstrony
- telcocafe
- [HTML] Logowanie do ftp poprzez pole tekstowe Jak zrobić logowanie do ftp poprzez pole
- [HTML] Zła pozycja obrazka tła w tabeli Zła pozycja obrazka tła w komórce tabeli
- Darmowe statystyki odslon banera dla strony .html Czy istnieja statystyki odslona banera n
- [html] Newsy i suwak - jak to zrobić? Jak zrobić suwak?
- [HTML] Miejsce pod formularzem Jak usunąć miejsce pod formularzem?
- [HTML] '*' == ?
- Usuwanie zbednych linijek kodu Program do usuwania linijek html
- [HTML] Formularz liczący punkty Coś w rodzaju testu liczącego punkty ;)
- [html] Polskie znaki Po wsadzeniu banera, zniknęły polskie znaki
- [html]W jakiej technice zrobić stronkę? Jestem grafikiem a chce zrobić stronkę....
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- truskawka.pev.pl
telcocafe
Witam, mam taki fragment kodu:<div style="position: absolute; width: 906px; height: 100%; z-index: 1; top: 0;" id="layout"> <div style="position: absolute; width: 163px; height: 100%; z-index: 2; left: 0px; top: 0px; background-color:#0D0F49" id="belka1"></div> <div style="position: absolute; width: 16px; height: 100%; z-index: 2; left: 163px; top: 0px; background-color:#FBD810" id="belka2"></div> <div style="position: absolute; width: 19px; height: 100%; z-index: 2; top: 0; background-color: #0D0F49; right:0" id="belka3"></div> <div style="overflow:hidden; position: absolute; width: 380px; height: 14px; z-index: 2; top: 217px; background-color:#0D0F49; right:19px" id="lineb"></div> <div style="overflow:hidden; position: absolute; width: 380px; height: 7px; z-index: 2; top: 212px; background-color:#FBD810; right:19px" id="liney"></div> <div style="position: absolute; width: 328px; height: 190px; z-index: 3; left: 13px; top: 9px" id="logo"> <img src="logo.png" alt="II LO" /> </div> <div style="position: absolute; width: 485px; height: 55px; z-index: 3; left: 342px; top: 103px" id="napis"> <img src="napis.png" alt="" /> </div> <div style="position: absolute; width: 327px; height: 14px; z-index: 5; left: 507px; top: 194px" id="header"> <img src="uczen.png" style="position: absolute; width: 54px; height: 14px; left: 0px; bottom: 0px" alt="uczen" /> <div id="linia1"></div> <img src="rodzic.png" style="position: absolute; width: 62px; height: 11px; left: 71px; bottom: 0px" alt="rodzic" /> <div id="linia2"></div> <img src="nauczyciel.png" style="position: absolute; width: 100px; height: 11px; left: 150px; bottom: 0px" alt="nauczyciel" /> <div id="linia3"></div> <img src="szkola.png" style="position: absolute; width: 60px; height: 11px; left: 267px; bottom: 0px" alt="szkola" /> </div> </div>
Nie wiem jak wyśrodkować całość aby znajdowała się dokładnie po środku. Próbowałem w divie-pojemniku (id=layout) dać w style="left:50%; margin-left: -453px;" ale efekt jest dobry wylacznie dla rozdzielczosci ekranu wiekszej niz 800x600 gdyż wówczas ucina fragment strony po lewej. Czy istnieje jakieś inne rozwiązanie?
Użytkownik Isaac from Vale edytował ten post 21 marzec 2009, 12:46
"margin: 0 auto;" dla pojemnika.
Próbowałem, nie działa, bo jest zdefiniowane position: absolute;, a jesli ustawie na position: relative; to wtedy strona się rozwala, tzn. divy o id belka1, belka2, belka3 nie są widoczne, ponieważ nie działa zdefiniowany element: height: 100%, ponieważ div-pojemnik przy position: relative; nie ustawia się w 100% wysokosci, a nie moge ustawic stałej wysokości, bo to psuje całą koncepcję laya. Jakieś inne pomysły?
<html> <body style="margin: 0;"> <div style="position: relative; width: 906px; height: 100%; z-index: 1; margin: 0 auto;" id="layout"> <div style="position: absolute; width: 163px; height: 100%; z-index: 2; left: 0px; top: 0px; background-color:#0D0F49" id="belka1"></div> <div style="position: absolute; width: 16px; height: 100%; z-index: 2; left: 163px; top: 0px; background-color:#FBD810" id="belka2"></div> <div style="position: absolute; width: 19px; height: 100%; z-index: 2; top: 0; background-color: #0D0F49; right:0" id="belka3"></div> <div style="overflow:hidden; position: absolute; width: 380px; height: 14px; z-index: 2; top: 217px; background-color:#0D0F49; right:19px" id="lineb"></div> <div style="overflow:hidden; position: absolute; width: 380px; height: 7px; z-index: 2; top: 212px; background-color:#FBD810; right:19px" id="liney"></div> <div style="position: absolute; width: 328px; height: 190px; z-index: 3; left: 13px; top: 9px" id="logo"> <img src="logo.png" alt="II LO" /> </div> <div style="position: absolute; width: 485px; height: 55px; z-index: 3; left: 342px; top: 103px" id="napis"> <img src="napis.png" alt="" /> </div> <div style="position: absolute; width: 327px; height: 14px; z-index: 5; left: 507px; top: 194px" id="header"> <img src="uczen.png" style="position: absolute; width: 54px; height: 14px; left: 0px; bottom: 0px" alt="uczen" /> <div id="linia1"></div> <img src="rodzic.png" style="position: absolute; width: 62px; height: 11px; left: 71px; bottom: 0px" alt="rodzic" /> <div id="linia2"></div> <img src="nauczyciel.png" style="position: absolute; width: 100px; height: 11px; left: 150px; bottom: 0px" alt="nauczyciel" /> <div id="linia3"></div> <img src="szkola.png" style="position: absolute; width: 60px; height: 11px; left: 267px; bottom: 0px" alt="szkola" /> </div> </div> </body> </html>
Użytkownik andrzej_aa edytował ten post 21 marzec 2009, 21:53
andrzej_aa przeczytaj co napisałem:
jesli ustawie na position: relative; to wtedy strona się rozwala, tzn. divy o id belka1, belka2, belka3 nie są widoczne, ponieważ nie działa zdefiniowany element: height: 100%, ponieważ div-pojemnik przy position: relative; nie ustawia się w 100% wysokosci, a nie moge ustawic stałej wysokości, bo to psuje całą koncepcję laya.
A to musi być na divach z zabawami typu position: absolute;? Menu i podobne elementy można rozwiązać za pomocą listy. Jeżeli fragment strony składa się z dużej ilości pociętych grafik o różnych rozmiarach, które trzeba poukładać obok siebie to najprościej będzie zastosować tabelkę ;)
Ten layout nie składa się z wielu grafik pociętych. Jedyne grafiki tam to tylko linki w górnym menu w niestandardowej czcionce, i logo. I to menu górne bedzie wlasnei lista, ale w belka1 były przewidziane właśnie inne elementy.
Użytkownik Isaac from Vale edytował ten post 22 marzec 2009, 09:53
pokombinuj lepiej czemu Ci się rozwala layout przy position relative.. byćmoże przez brak ustawionego padding na 0 ..
po co ustawiasz height na 100%? co chcesz przez to uzyskać?
o tabelkach zapomnij
O tabelkach nawet nie myslałem. Co chce uzyskac poprzez height 100% i czemu sie layout rozwala przy relative? Pisałem już posty wyżej, jesli chcesz to zobaczyc sam, to prosze Cie zapisz ten kod jako plik html i zobaczysz :)
Chcę żeby belka1,belka2,belka3 były na wysokości całego obszaru przeglądarki i żeby nie było odstępu między górą a dołem, tutja zastosowanie marginesów odpada, bo IE i FF różnie interpretują te wielkosci.
EDIT:
Sprawa rozwiązana. Dla html i body margin-top: auto; oraz height: 100%;, dla div#layout (kontener) margin: auto;. Dziękuję za dobre intencje mimo wszystko :)
Użytkownik Isaac from Vale edytował ten post 22 marzec 2009, 16:48