Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> XHTML 1.1 Strict layout: top + 3 kolumny + stopka, Czy to w ogóle możliwe?
MistrzHTML
post
Post #1





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 20.10.2006

Ostrzeżenie: (0%)
-----

Witam. Od razu zaznaczam, że moje pytanie kieruję do osób naprawdę b. dobrze znających CSS i XHTML. Usiłuję stworzyć layout z nagłówkiem, kolumnami po lewej i po prawej oraz zawartością strony na środku i ze stopką na dole. Rozwiązań tego typu problemu jest wiele w internecie, jednak jest małe "ale".

Chcę, żeby layout rozciągał się zawsze od lewej do prawej strony ekranu - dajmy na to: top wysokość 140px, kolumny po lewej i po prawej po 200px szerokości, stopka wysokość 40px. Osobiście nie lubię layoutów o stałych szerokościach, gdzie na wyższych rozdzielczościach (sam uzywam 1280x1024) stronka wyglada jak kreska na środku, a po bokach są kilometry pustki. Próbowałem już kilku sposobów, jednak nie udaje mi się osiągnąć zamierzonego celu: chcę mianowicie, by stopka znajdowała się ZAWSZE na dole strony (obojętnie czy zawartość strony to jedna, czy tysiąc linii tekstu). Żadne position: absolute nie wchodzą w grę, ponieważ na pozycję stopki muszą wpływać również wysokości dwóch bocznych kolumn. Najlepszy efekt, jaki udało mi się uzyskać to taki, że stopka jest dla stron niewymagających scrollowania zaraz pod widzialną krawędzią ekranu (stosowanie min-height: 100% kolumn). Próbowałem dawać stopce w takim razie position: relative; top: -40px, ale wtedy pobierane jest jej pierwotne położenie i pod nią i tak jest wolne miejsce.

Czy to jest w ogóle wykonalne? Wydaje mi się, że twórcy CSS zbłądzili trochę, bo cały ten standard jest tak mało intuicyjny, że szkoda gadać (chodzi mi o pozycjonowanie elementów). Po części winne są oczywiście widzimisię przeglądarek. Proszę o rady - dla stron niewymagających przesuwania stopka powinna znajdować się na dole, a pasek przewijania powinien być nieaktywny.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
MistrzHTML
post
Post #2





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 20.10.2006

Ostrzeżenie: (0%)
-----

To nie możesz powiedzieć tego grzeczniej? Sorry, ale naprawdę denerwują mnie ludzie wywyższający się, a tak odbieram takie zachowanie. Każdy powinien się cieszyć, gdy może pomóc, a nie traktować pytającego jak pomiotka.

Wracając do tematu, by ustawić stopkę skorzystałem z pierwszego linka w drugim poście, który napisałeś, ale wywaliłem z niego DIVa o klasie push. Domyślam się tylko po co był, ale bez niego i tak działa świetnie.

Mój kod to:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Stronka</title>
  6. <style type="text/css">
  7. * {margin: 0px}
  8. html, body {height: 100%}
  9. body {font-family: Verdana, sans-serif; font-size: 12px}
  10. div.zawartosc {min-height: 100%; height: auto; height: 100%; margin: 0 auto -40px}
  11. div.srodek {float: left}
  12. div.lewa {float: left; width: 200px}
  13. div.prawa {float: right; width: 200px}
  14. div.stopka {clear: both; height: 40px; text-align: center; color: #ffffff; background-color: #000000}
  15. </style>
  16. </head>
  17. <body>
  18.  
  19. <div class="zawartosc">
  20.  
  21. <img src="./grafika/logo.gif" alt="" style="display: block" />
  22. <div class="lewa">
  23. LEWA KOLUMNA
  24. </div>
  25.  
  26. <div class="srodek">
  27. GŁÓWNA CZĘŚĆ
  28. </div>
  29.  
  30. <div class="prawa">
  31. PRAWA KOLUMNA
  32. </div>
  33.  
  34. </div>
  35.  
  36. <div class="stopka">
  37. STOPKA
  38. </div>
  39.  
  40. </body>
  41. </html>
[HTML] pobierz, plaintext


W części głównej chcę wstawić DIVa z display: table, ale kiedy dam mu width: 100% przesuwa się pod lewą kolumnę (nie mieści i float go wyrzuca (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) ). Jak to ugryźć?
Go to the top of the page
+Quote Post

Posty w temacie
- MistrzHTML   XHTML 1.1 Strict layout: top + 3 kolumny + stopka   15.07.2007, 15:29:10
- - gekon   1. Temat: Layout a kochany ie 2. http://pornel.net...   15.07.2007, 20:54:14
- - MistrzHTML   "Uważaj chłopcze podaję odpowiedź:" Tego...   15.07.2007, 21:39:40
- - gekon   A jaka to magiczna właściwość odróżnia XHTML do HT...   15.07.2007, 21:50:16
- - MistrzHTML   Dzięki, jeden z linków pomógł. Co do magicznej wła...   15.07.2007, 22:40:33
- - gekon   Do mistrzostwa jeszcze Ci trochę brakuje, lepiej T...   15.07.2007, 22:43:42
- - MistrzHTML   Zrobiłem już te trzy kolumny ze stopką - wszystko ...   15.07.2007, 22:56:37
- - gekon   Wróżenie z fusów piętro wyżej.   15.07.2007, 23:49:26
- - MistrzHTML   Takich ludzi jak ty, gekon, jest niestety na każdy...   16.07.2007, 00:30:06
- - gekon   A Ty zrozum, że nie wiem co masz w kodzie i n...   16.07.2007, 00:36:01
- - MistrzHTML   To nie możesz powiedzieć tego grzeczniej? Sorry, a...   16.07.2007, 00:48:34
- - gekon   Uwaga będę się czepiał: 1. każdy atrybut w CSS pow...   16.07.2007, 01:08:06
- - MistrzHTML   Hehe nie wiem dlaczego myślisz, ze miałbym uważać,...   16.07.2007, 01:23:09
- - gekon   1. Po co wrapper? Czytaj http://kurs.browsehappy.p...   16.07.2007, 01:29:17
- - MistrzHTML   Ale czy mój div o klasie zawartosc to nie jest juz...   16.07.2007, 01:34:07
- - gekon   Ty z uporem maniaka bronisz się przed przeczytanie...   16.07.2007, 01:39:12
- - MistrzHTML   No już dobrze, przeczytam cały. Ech, ten dzisiejsz...   16.07.2007, 01:41:40
- - kwiateusz   MistrzHTML opanuj sie na forum wymagane jest aby d...   16.07.2007, 11:52:57
- - MistrzHTML   Pozostawię wypowiedź pana o niezwykle męskim nicku...   16.07.2007, 21:08:02
- - strife   Cytat(MistrzHTML @ 16.07.2007, 22:08...   18.07.2007, 01:34:33

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Closed TopicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 14.10.2025 - 11:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn