Mam stronkę zakodowaną w DTD HTML 4.01 Transitional. Chcę to zamienić na XHTML 1.0 Strict. Proszę o wskazówkę, bo nie wiem, jak mam to zrobić w divach. Efekt, jaki chcę uzyskać powinien być taki: schemat www. Tu, gdzie są kolory będą odpowiednie gify jako tło. Nie wiem tylko, jak ten schemat rozpisać na divy. Z tabelkami nie miałem kłopotu… Mógłby mi to ktoś rozpisać?
Więc tak. Każdy prostokącik (u siebie masz ich chyba 9 sztuk) musi być oddzielnym divem:
…
[/code]
Div#calosc, to div obejmujący wszystkie inne boksy. Trzeba nadać mu odpowiednią szerokość.
Każdemu wewnętrznemu kontenerowi musisz teraz nadać odpowiednie style - odpowiednie szerokości i wysokości (muszą się odpowiednio sumować). Wszystkie divy znajdujące się po lewej i na środku powinny mieć w stylach atrybut float: left;. Te po prawej float: right; oraz clear: both;.
Ja przynajmniej robię podobnie. Ponadto przyjąłem tu sporo założeń. Każda strona jest inna, i każdą powinno się robić inaczej w zależności od graficznego projektu 
.
Poza tym polecam http://www.kurshtml.boo.pl/css/szablon.html
W kursie, który Ci poleciłem jest to opisane .
Musisz ustawić szerokość głównego diva w procentach. Jeśli strona ma być pokazywana na całej szerokości ekranu, niezależnie od rozdzielczości, będzie to 100%. Divy po lewej i prawej zostawiasz tak jak były, natomiast dla środkowych ustawiasz marginesy (po lewej i prawej) na szerokość, jaką mają boczne divy, szerokość zaś zmieniasz na ‘auto’. Może trochę zagmatwałem, ale przystępniej jest opisane w http://www.kurshtml.boo.pl/css/plynny_s … ablon.html
Kombinowałem wg Twoich zaleceń, ale nie wyszło mi tak, jak chciałem. Pokusiłem się o inne rozwiązanie, podobno też zgodne z XHTML 1.0 Strict.
Teraz wygląda to tak:
index.html (fragment)
wnętrze strony
[/code] styles2009.css
[code]* { margin: 0px; padding: 0px; } html, body { width: 100%; margin: 0 auto; padding-top: 15px; color: #004C75; background-color: #EAEAEA; font-size: 11px; font-family: tahoma, verdana, arial, helvetica, sans-serif; font-weight: normal; vertical-align: top; text-align: center; scrollbar-arrow-color: #FFFFFF; scrollbar-base-color: #004c75} #border-table { display: table; border-width: 0px; width: 1240px } #border-body { display: table-row } #border-up-left { background-image: url(…/images/web/angle_hg.gif); width: 20px; height: 20px; display: table-cell } #border-up-center { background-image: url(…/images/web/tube_horiz.gif); margin: 20px; height: 20px; display: table-cell } #border-up-right { background-image: url(…/images/web/angle_hd.gif); width: 20px; height: 20px; display: table-cell } #border-medium-left { background-image: url(…/images/web/tube_vertic.gif); width: 20px; height: 1800px; display: table-cell } #border-medium-center { margin: 20px; height: 100%; display: table-cell } #border-medium-right { background-image: url(…/images/web/tube_vertic.gif); width: 20px; height: 1800px; display: table-cell } #border-down-left { background-image: url(…/images/web/angle_bg.gif); width: 20px; height: 20px; display: table-cell } #border-down-center { background-image: url(…/images/web/tube_horiz.gif); margin: 20px; height: 20px; display: table-cell } #border-down-right { background-image: url(…/images/web/angle_bd.gif); width: 20px; height: 20px; display: table-cell }
Problemy na chwilę obecną:
-
jak wyśrodkować to wszystko na ekranie?
-
jak sprawić, aby wnętrze strony się rozciągało w zależności od rozdzielczości ekranu?
-
jak sprawdzić, czy to wszystko działa poprawnie pod innymi przeglądarkami niż ta, na której pracuję?
Czytałem już kilka kursów, poradników, ciągle coś próbuję, sprawdzam, uczę się, ale są sytuacje, których nie potrafię sam rozwikłać.
Wrzuć to gdzieś na serwer. A po drugie, na wszystkie pytania są już odpowiedzi, wystarczy poszukać!
No cóż, chyba trzeba te przeglądarki zainstalować… Alternatywnie można korzystać ze strony browsershots.org.