Witam,

do tej pory bawiłam się wyłącznie HTML, ale postanowiłam zagłębić się również w CSS, XHTML i PHP. Zrobiłam stornę w html, ale chcę ją przerobić na CSS. Trochę poczytałam i już go rozumiem, aczkolwiek utkwiłam w pewnym martwym punkcie. Wiem, że można wypozycjonować obrazek jak tylko się chce. Więc moja strona wygląda tak: są trzy obrazki: header.jpg, bg.jpg, tlo.jpg

TLO - powtarzające się tło całej strony strony, jakis tam gradient
HEADER - menu, jest na samej górze na środku strony
BG - tło do tekstu pod headerem

I teraz tak, TLO.jpg jest w BODY jako background

I mam problem z obrazkami: header i bg. Header to obrazek o szerokosci 734 i wysokosci 422, natomiast bg to pasek o szerokosci 734 (czyli jak header) i wysokosci 10. Teraz o co mi chodzi. Ano o to, zeby BG było zaraz bezposrednio pod headerem bez zadnego odstepu, gdyz jest to pocieta na dwie czesci grafika. Z tym ze BG ma byc jako powtarzajace sie pionowo tło pod tekst. Po prostu pod headerem bedzie tresc strony ale na innym tle niz cala strona - i to BG wlasnie ma stanowic tlo. Tylko jak ustawic aby HEADER I BG scisnac razem pionowo i aby BG stanowilo powtarzajace sie tlo pionowo i zeby jeszcze na tym mozna bylo umiescic tekst. Mam nadzieje ze nie namieszałam.

A tutaj kod html, chce go przerobic na css i umiescic w jednym pliku gdyz planuje przerobienie layoutu za kilka miesiecy a podstron bedzie duzo. Szkoda sie wiec bawic potem w kazda podstrone tylko pojechac po jednym pliku i z glowy.

Kod
<body background=tlo.jpg>

<table width="734" height="432" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
<img src="head.jpg" width="734" height="422" ></td>
    </tr>
    <tr>
        <td background="bg.jpg">
bla bla bla</td></tr></table>




Próbuję, próbuję i nie wychodzi mi. Układ strony wygląda inaczej w IE i Firefoxie. Na moim komputerze w IE wygląda super, wszystko wyśrodkowane tak jak ma być. Na Firefoxie tekst wyjeżdża za bardzo w lewo. W IE na innym komputerze w ogóle cały układ się psuje.

Chodzi o to, aby logo (header) i treść strony (dwie kolumny na tle bg.jpg) były wyśrodkowane oraz aby tło (bg.jpg) powtarzając się, zakrywało całą wolną przestrzeń do samego dołu okna przeglądarki. Co zrobiłam źle? No i jak tabelkę przerobić całkowicie na divy ?

Kod z CSS:

Kod
body {
         background-color: #000000;
         background-image: url("images/tlo.jpg");
         background-repeat: repeat-x;
         topmargin=0px;
     margin: 0 auto;
         text-align: justify;
         color:#FFFFFF;
         font-family: verdana, trebuchet, arial;
         font-size:8pt;
         font-weight: normal;
         display: table;
     }


div.block { text-align:justify;
             topmargin=0px;
             width=734;
             margin-left:auto
             margin-right:auto
             }

#tekst {
         background-image: url("images/bg.jpg");
         background-repeat: repeat-y;
         margin-top=0px;
         margin-bottom=0px;
         margin-left:auto
         margin-right:auto;
          }
    
A:link {background: #FF8000; text-decoration: none}

A:visited {background: #FF8000; text-decoration: none}

A:active {text-decoration: none}

A:hover {text-decoration: underline; color: FF8000;}


I kod html:

Kod
<div id="tekst">
<table width="734" height="432" border="0" cellpadding="0" cellspacing="0">
     <tr>
         <td>
<img src="images/head.jpg" USEMAP="#head" BORDER=0>
<map name="head">
   <area shape="poly" coords="528,7,528,46,604,45,603,101,717,101,713,6,528,9,528,9,526,9,529,9" href=" target=_blank alt="">

   <area shape="rect" coords="222,375,723,418" href=""  alt="">
   <area shape="rect" coords="359,346,465,373" href=""  alt="">
   <area shape="rect" coords="479,344,607,372" href=""  alt="">
   <area shape="rect" coords="626,343,706,372" href=""  alt="">
</map></td>
     </tr>
     <tr>
         <td>

<table width=650>
<tr>
<td width=315 valign=top><div class="block">treść lewej kolumny



</td>
<td width=20 valign=top>
</td>
<td width=315 valign=top><div class="block">treść prawej kolumny


</td>
</table>