[CSS] Pomocy :( zamiana krótkiego html na css

lifegoeson · Post autor: **lifegoeson** » pt paź 05, 2007 11:46 pm

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, aby byl w jednym pliku a nie w kilku plikach html, gdyz przewiduje zmiane layoutu za kilka miesiecy, a podstron bedzie duzo.

Kod: Zaznacz cały

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

Fingon · Post autor: **Fingon** » sob paź 06, 2007 4:23 pm

lifegoeson pisze:Witam,

Zrobiłam stornę w html, ale chcę ją przerobić na CSS.

Nie przerabia się HTML na CSS. Co do reszty, to użyj divów, a nie tabelki.
http://osiolki.net/tabelki/

lifegoeson · Post autor: **lifegoeson** » sob paź 06, 2007 10:51 pm

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.

Co zrobiłam źle?

Kod z CSS:

Kod: Zaznacz cały

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: Zaznacz cały

<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<br><br>

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


</td>
</table><br><br>

[CSS] Pomocy :( zamiana krótkiego html na css

[CSS] Pomocy :( zamiana krótkiego html na css

Re: [CSS] Pomocy :( zamiana krótkiego html na css

Re: [CSS] Pomocy :( zamiana krótkiego html na css