 [CSS]Problem z rozmiarem tła |
  |
| [CSS]Problem z rozmiarem tła |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 20 Pomógł: 0 Dołączył: 21.12.2007 Ostrzeżenie: (0%) 
 |
Witam,
mam sobie taki układ strony: klik. Mam pewien problem z tłem, a mianowicie chciałbym aby background kończył się wraz z końcem strony, a nie jak jest obecnie czyli ostatnią linijką tekstu. Mój kod wygląda tak: html Kod <div id="pole_tekstowe"> <div id="tekst"> <p>Lorem ipsum....</p> </div> <div id="stopka"> stopka strony </div> </div> css Kod /* Pole tekstowe */ #pole_tekstowe { width:100%; background-image:url(images/background.gif); } /* Tresc */ #tekst { width:50%; margin-left:25%; background-color:#FFFFFF; height:auto; text-align:justify; padding:1% 1% 1% 1%; color:#000000; } /* Stopka */ #stopka { width:50%; margin-left:25%; height:auto; color:#FFCC00; } Proszę o pomoc jak napisać poprawny kod. |
 |
 
|
|
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 1 590 Pomógł: 185 Dołączył: 19.04.2006 Skąd: Gdańsk Ostrzeżenie: (0%)
|
To nadaj background-image dla body (cała strona) lub html (całe okno). Wykorzystując body i html możesz uzyskać dobre rezultaty bez mnożenia niepotrzebnych divów. Stronę o tak prostej budowie można zrobić bez ani jednego diva, wystarczy h1 (header), ul (menu), kilka p (treść) + jedno p (na stopkę). I zamiast nadawać każdemu elementowi szerokość i margines wystarczy, jak dasz odpowiedni padding dla body i html.
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 20 Pomógł: 0 Dołączył: 21.12.2007 Ostrzeżenie: (0%)
|
Poszedłem za Twoją radą i zmodyfikowałem nieco kod, jednak nadal nie wiem jak nadać dla background odpowiedniej pozycji tak aby zaczynał się wraz z końcem dolnego menu (screen).
html Kod <div id="header"> <div id="navigation_hd"> <ul> <li><a class="aktywny" href="index.html" >O FIRMIE</a></li> <li><a href="oferta.html" >OFERTA</a></li> <li><a href="zabiegi.html" >KONTAKT</a></li> </ul> </div> </div> <div class="chromestyle" id="chromemenu"> <ul> <li><a href="#" rel="dropmenu1">Ogrodzenia</a></li> <li><a href="#" rel="dropmenu2">Bramy</a></li> <li><a href="#" rel="dropmenu3">Automatyka</a></li> <li><a href="#" rel="dropmenu4">Siatki</a></li> <li><a href="#" rel="dropmenu5">Zabezpieczenia</a></li> </ul> </div> <div id="tekst"> <p>Lorem.....</p> </div> <div id="stopka"> stopka strony </div> css Kod body {
font-family:"Arial", Times, serif; width:50%; height:auto; margin:auto; padding:1% 0% 0% 0%; background-image:url(images/background.gif); } /* Naglówek */ #header { background-color:#FFFFFF; height:50px; text-align:left; } /* Nawigacja nagłówek*/ #navigation_hd { background-color:#FFFFFF; font-size:11px; font-weight:bold; } #navigation_hd li { float:left; list-style-type:none; } #navigation_hd li a { padding:0 12px; text-decoration:none; color:#000000; } #navigation_hd li a:hover { color:#E21015; } #navigation_hd li .aktywny { background:#FFFFFF url(images/arrow.png) no-repeat; color:#E21015; } /* Tresc */ #tekst { background-color:#FFFFFF; padding:3% 1% 1% 1%; text-align:justify; } /* Stopka */ #stopka { background-color:#FFFFFF; padding:3% 1% 1% 1%; color:#FFCC00; } |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 1 590 Pomógł: 185 Dołączył: 19.04.2006 Skąd: Gdańsk Ostrzeżenie: (0%)
|
Masz kilka możliwości do wyboru:
1. Skorzystać z background-position - jednak to wyklucza powtarzanie tła w pionie, możesz odsunąć tło od górnej krawędzi strony i powtarzać je w poziomie 2. Możesz "przykryć" górne tło - właściwe tło daj dla HTML, natomiast dla body białe i wypozycjonuj tło dla body (korzystając z background-position) tak, aby przykrywało tło dla html 3. Możesz dodać dodatkowy pojemnik, który będzie umieszczony pod headerem i menu i dla niego dać tło, lub taki (w którym będzie header i menu) który zasłoni to tło. |
|
|
|
|
|
Aktualny czas: 19.08.2025 - 20:05 |
