Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Tło wychodzące poza rodzica
boro11
post 17.01.2012, 18:28:05
Post #1





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 9.07.2010
Skąd: Warszawa

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

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.
Go to the top of the page
+Quote Post
zdemotywowany
post 17.01.2012, 19:34:28
Post #2





Grupa: Zarejestrowani
Postów: 74
Pomógł: 3
Dołączył: 15.01.2012

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

Wyciągnij ją z left i ustaw absolute
Go to the top of the page
+Quote Post
by_ikar
post 17.01.2012, 20:52:50
Post #3





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

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

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.

Ten post edytował by_ikar 17.01.2012, 20:56:05
Go to the top of the page
+Quote Post
Condictor
post 17.01.2012, 21:39:56
Post #4





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 21.02.2010

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

Polecam rozwiązanie by_ikar'a. Sam stosuję podobne.
Go to the top of the page
+Quote Post
boro11
post 17.01.2012, 22:56:00
Post #5





Grupa: Zarejestrowani
Postów: 283
Pomógł: 11
Dołączył: 9.07.2010
Skąd: Warszawa

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

Dziękuje by_ikar chciałem uniknąc tworzenia nowego kontenera, ale tak ładnie to rozpisałes że to zrobię smile.gif
Go to the top of the page
+Quote Post
by_ikar
post 18.01.2012, 08:33:20
Post #6





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

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

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 07:56
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn