 [CSS] Header + obrazek pod nim jako tło pod tekst |
  |
| [CSS] Header + obrazek pod nim jako tło pod tekst |
 6.10.2007, 22:56:12
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 2 Pomógł: 0 Dołączył: 6.10.2007 Ostrzeżenie: (0%) 
 |
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> Ten post edytował lifegoeson@o2.pl 6.10.2007, 22:55:53 |
 |
 
|
|
|
Wersja Lo-Fi | Aktualny czas: 24.07.2025 - 23:36 |
