ďťż

[xhtml,css] tła Tworzenie poziomego tła

Podstrony

telcocafe

Od niedawna zacząłem uczyć się xhtml-a, testuje swoje umiejętności przy tworzeniu przykładowej strony. Napotkałem na pierwsze preszkody. Chciałem stworzyć stronę z logiem, kolumną lewą, miejscem na treśc oraz stopką - standard. Dodatkowo chciałbym porobić tła w poziomie do loga, kolumny z treścią i stopki lecz nie wiem jak zrobić to żeby były one rozciągnięte na całości a nie wpływały na takie elementy jak przykładowo logo. Przykładem może być strona dva.pl tam jest taki efekt jaki ja chciałbym uzyskać. Np. pierwsze mamy tło rozciągnięte na tyle ile się da dalej mamy logo i za logiem znowu tło rozciągnięte na całości szerokości. Jakie zmiany musiałbym wprowadzić do swojego kodu ? :) Oto on:

html:
<?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-2" /> <title>Nazwa strony</title> <meta name="description" content="opis w wyszukiwarce" /> <meta name="keywords" content="slowa kluczowe" /> <meta name="revisit-after" content="7 days" /> <meta name="robots" content="all" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" /> <link rel="Shortcut Icon" type="image/ico" href="ico.ico" /> </head> <body> <div id="tla"> <div id="tlo1">tlo1</div> <div id="tlo2">tlo2</div> <div id="tlo3">tlo3</div> </div> <div id="calosc"> <div id="logo">1</div> <div id="kolumna">2</div> <div id="tresc">3</div> <div id="stopka">4</div> </div> </body> </html>

css:
body { margin: 0px; background-color: black; } #tla { float: left; width: 50px; height: 140px; background-color: red; } #tlo1 { float: left; width: 50px; height: 140px; background-color: red; } #tlo2 { float: right; width: 50px; height: 400px; background-color: red; } #tlo3 { float: right; width: 50px; height: 40px; background-color: red; } #calosc { width: 760px; border: 0px; margin: 0px; margin-left: auto; margin-right: auto; padding: 0px; } #logo { width: 100%; height: 140px; background-color: rgb(213, 219, 225); } #tresc { height: 400px; background-color: gray; } #kolumna { float: left; width: 220px; height: 400px; margin: 0; background-color: rgb(235, 235, 235); } #stopka { clear: both; height: 40px; background-color: rgb(213, 219, 225); }

Hmm... Trochę niejasno tłumaczysz :>
Ale mowisz ze chcesz takie cóź jak na dva.pl :) Do tego nie jest oczywiście wymagany xhtml (choć można)... A więc:
Firefox: Widok > Źródło strony
Opera: Widok > Żródło strony
IE: Widok > Źródło
;)

// na przyszłość długie kody wklejaj do codebox, a nie code :)

też nie wiem o co chodzi ale try w deklaracji background daj 100%

No też nie wiem, dva.pl jest zbyt skomplikowaną stroną i nie wiem który efekt chcesz uzyskać. Chodzi ci o to może, że logo serwisu jest jakby preźroczyste i nie przesłania tła?
W twoim przykładzie niby wszystko jakoś działa, napisz dokładnie co chcesz zmienić (albo zrób screena i dorysuj w paincie co ma gdzie być).

Jeśli za tło chcesz wstawić obrazek, który na przykład ma być powtarzany tylko w jednym wymiarze (na przykład tylko w dół), możesz wykorzystać background-repeat w css. Co do szerokości i wysokości sekcji twojej strony to w <div> chyba można ustawić szerokość i wysokość.

Już staram się wszystko wytłumaczyć jeszcze raz wszystko od początku jak najlepiej tylko potrafię. Rozpatrzmy sprawę dla samego loga. Chciałbym stworzyć tło które będzie wysokości takiej jak moje logo i będzie na całej szerokości przeglądarki. Na to tło teraz nałóżcie sobie po środku logo i macie to co chcę uzyskać :) . Teraz postaram się przedstawić graficznie

Ma to wyglądać tak:

TŁO

Tak jak w obrazie ma być rozciągnięte to tło - to jaśniejsze logo jest ciemnego koloru.

P.S. Bardzo cieszę się że zgłosiłem swój problem tu bo widze że sa ludzie którzy chcą pomóc, na innych forach nic bym nie uzyskał.

ja tam nadal nic nie czaje :D ale ok :D

# "Chciałbym stworzyć tło które będzie wysokości takiej jak moje logo" to odpal Painta i zrób taki sam rozmiar :) a jeśli chodzi o rozmiar elementu w którym jest logo to wstaw obrazek do div`a któremu nadaj width i height takie jak ma obrazek

# "Na to tło teraz nałóżcie sobie po środku logo" div wewnątrz poprzedniego div`a

ciężko mi napisać coś konkretniej bo ni hu hu wiem o co chodzi :D

Jeśli jeszcze nie rozumiecie to w takim razie zobaczcie TO . Teraz chyba nie powinno być wątpliwości. Tak samo z następnymi elementami niżejz kolumnąwraz z polem na treść i stopką. Co muszę zmieniac w swoim kodzie podanym wyżej ? Jeśli kod do niczego się nie nadaje to proszę o napisanie mi strony z tym logiem przedstawionej wyżej. :)

Aaaaa twoje "tło" to nie do końca tło. Po prostu chcesz mieć jeden obrazek wyświetlany "pod spodem" i logo wyświetlne "na tle" tego pierwszego.

Spróbuję tak pociąć ten twój obrazek że będzie działać... jak zrobię to napiszę.

EDIT:
http://nic-nac-proje...gabrys/hej.html

Logo można dokleić do pliku "lewy.png" poszerzając go w prawo przesłaniając więcej tła albo umieszczając w dodatkowym <img src> na prawo od "lewy.png".
Użytkownik Catz edytował ten post 22 listopad 2005, 15:11
Ok dzięki, już wcześniej udało mi się to zrobić w ten sposób:

<div id="tlo"> <div id="logo"></div> </div> <div id="calosc"> <div id="kolumna"></div> <div id="tresc"></div> <div id="stopka"></div> </div>

poprostu div z logiem wrzuciłem w div calosc. Ni będę zakładał nowego tematu spytam się już tutaj w jeszcze jednej sprawie. W jaki sposób wyśrodkować diva ? mam zastosowane:

margin-left: auto; margin-right: auto;

wyświetla się dobrze ale jedynie pod FF. czego użyc żeby wszędzie logo było wyśrodkowane ?

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL