Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Tło wychodzące poza rodzica
Forum PHP.pl > Forum > Przedszkole
boro11
17.01.2012, 18:28:05
Witam!
Próbuje od jakiegoś czas narzucić tło białe do stopki tak aby wychodziła wypełniała ona cała szerokośc strony tak jak to jest w projekcie:




Niestety efekt jaki udaje mi sie uzyskać nie jest zadowalający bo ogranicza sie jedynie do szerokości jaka jest narzucona dla całej strony tj. 1000px


Link do strony: http://pr150.com/index.php


Stopka znajduje sie z kolumnie "left", próbowałem ją stamtąd wyrzucić i dac poza div, ale wtedy ustawia się nie pod divem left, a lata po całej stronie - najszczęsciej zajmuje miejsce w bloku "right", który przewija się razem ze stroną - jest to miejsce na banner reklamowy.
zdemotywowany
17.01.2012, 19:34:28
Wyciągnij ją z left i ustaw absolute
by_ikar
17.01.2012, 20:52:50
Bo stronę można zrobić nie tylko w jednym "kontenerze", ale można ją sobie podzielić. Ostatnio ciąłem taki layout, który miał tych poziomych pasków 4 + ich obramowania co wyglądało na ciut więcej pasków, z czego każdy ograniczał się do jakiejś części i mógł się rozciągać. Robisz sobie tak. Jedną klasę dla kontenera (stała szerokość, w twoim przypadku 1000px) z auto marginesem, co by strona na środku była. Robisz również divy o szerokości 100% i określonej wysokości. Tutaj masz mniej więcej przykład jakbyś mógł to podzielić: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         html * { margin: 0px; padding: 0px; }
  6.         body { background: #457AA1; text-align: center; }
  7.  
  8.         #head, #content, #footer { width: 100%; height: auto; clear: both; }
  9.         #head { background: #fff url("http://img209.imageshack.us/img209/5378/headbackgroundb.png") repeat-x; height: 164px; }
  10.         #content {  }
  11.         #footer { background: #fff; margin-bottom: 100px; height: 125px; }
  12.  
  13.         .wrapper { width: 1000px; height: auto; margin: 0 auto; border: 1px solid black; border-bottom: none; border-top: none; }
  14.  
  15.         /* ta część jest zbędna, ale dałem wysokość, żeby strona miała jakąś wysokość */
  16.         #head .wrapper { height: 164px; }
  17.         #content .wrapper { height: 646px; }
  18.         #footer .wrapper { height: 125px; }
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="head">
  23.     <div class="wrapper">
  24.  
  25.     </div>
  26. </div>
  27. <div id="content">
  28.     <div class="wrapper">
  29.  
  30.     </div>
  31. </div>
  32. <div id="footer">
  33.     <div class="wrapper">
  34.  
  35.     </div>
  36. </div>
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


Border dla wrappera, dałem żebyś widział że strona jest na "środku" a pozostałe rzeczy są jak trzeba. Możesz zastosować to o czym kolega wyżej napisał, ale w przypadku mniejszych rozdzielczości, będzie powstawał scroll (pasek przewijania) w przeglądarce, na dole strony, do przewijania zawartości okna w bok. Taki sposób moim zdaniem jest najlepszy i najmniej pracochłonny wink.gif zapisz sobie to jako plik i odpal w przeglądarce.
Condictor
17.01.2012, 21:39:56
Polecam rozwiązanie by_ikar'a. Sam stosuję podobne.
boro11
17.01.2012, 22:56:00
Dziękuje by_ikar chciałem uniknąc tworzenia nowego kontenera, ale tak ładnie to rozpisałes że to zrobię smile.gif
by_ikar
18.01.2012, 08:33:20
Nie zapomnij klasie wrapper dodać text-align: left; W body wyśrodkowałem tekst, jest to taki fix dla IE 6/7 bo tamte wersje IE nie rozumieją auto marginesu. A ten sposób efekt będzie podobny. W twoim przypadku IMO tylko 3 różne sekcje inaczej tak jak pisałem, w przypadku position: absolute z left i right na jakimś procentowym minusie, w przypadku różnych rozdzielczości, i przeglądarek, powstanie ci na dole strony suwak, do przesunięcia strony w lewo lub prawo.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.