Forum PHP.pl > [CSS]Problem z rozmiarem tła

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Problem z rozmiarem tła

kosa351

29.10.2008, 23:31:04

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.

Pilsener

30.10.2008, 08:28:34

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.

kosa351

30.10.2008, 11:17:58

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;
   }

Pilsener

30.10.2008, 14:38:01

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.

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.