+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css]rozciagliwosc diva (/thread-css-rozciagliwosc-diva)
[css]rozciagliwosc diva - Stef@n - 27-03-2009
Witam,
mam problem najpierw podam link do strony aby bardziej obrazowo to przedstawić http://www.kozuchykorzen.pl/test.html
1) Otóż problem polega na tym ze div#srodek (powinno być białe tło) nie rozciąga się z treścią zawartą w nim. Nie mam zielonego pojęcia jak to zrobić, pod IE nie ma problemu bo się rozciąga a pod FF nie widać.
2) Drugi problem to ramka którą chce aby div#okienko_left i div#okienko_right rozciągały się równo do dołu z div#okienko_tresc.
Proszę was bardzo o pomoc, podaje kod:
.html
Kod:
<div id="srodek">
<div id="okienko">
<div id="okienko_top"></div>
<div id="okienko_left"></div>
<div id="okienko_tresc">jakas tresc<br />fdgfgf</div>
<div id="okienko_right"></div>
<div id="okienko_bottom"></div>
</div>
</div>.css
Kod:
body {
background-color: #702F4A; margin-top: 0px; font-family: Arial; color: #000000; font-size: 12px; line-height: 18px;
}
#srodek {
width: 780px; margin: auto; background-color: #FFFFFF;
}
#okienko {
width: 276px; height: 59px; display: block; float: left; padding-left: 36px;
}
#okienko_top {
background-image: url(okienko/top.jpg); display: block; width: 276px; height: 34px; clear: both;
}
#okienko_left {
background-image: url(okienko/left.jpg); display: block; width: 5px; float: left;
}
#okienko_tresc {
display: block; width: 249px; float: left; background-image: url(../grafika/okienko/bg.jpg); background-color: #FFFFFF; background-repeat: no-repeat; background-position: bottom;
}
#okienko_right {
background-image: url(okienko/right.jpg); display: block; width: 22px; float: left;
}
#okienko_bottom {
background-image: url(okienko/bottom.jpg); display: block; width: 276px; height: 37px; clear: both;
}Pozdrawiam
RE: [css]rozciagliwosc diva - Labsta.com - 27-03-2009
Witam
#srodek dodaj w css
Kod:
overflow: hidden;#okienko usuń:
Kod:
height: 59px;Skoro box ma stałą szerokość to wyrzuć div#okienko_left i div#okienko_right. Zamiast niego daj do #okienko_tresc
Kod:
background: url(tlo_scalone.jpg) repeat-yGdzie tlo_scalone będzie plikiem łączącym obrazek lewego, prawaego i z białym środkiem. Wysokość jpg może być nawet 1px;
A ornament dodaj w osobnym divie.
Prościej i taniej
Mam nadzieję, że dobrze zrozumiałem.
RE: [css]rozciagliwosc diva - Stef@n - 27-03-2009
Dzięki to pierwsze działa ok!
A co do drugiego to właśnie też tak planowałem ale w div#okienko_tresc jest jeszcze tło które ma się wyświetlać u dołu boxa ;/ i tu już się pogubiłem...
RE: [css]rozciagliwosc diva - Labsta.com - 27-03-2009
Zrób tak:
Kod:
<div id="okienko_tresc">jakas tresc<br />fdgfgf</div>Kod:
<div id="okienko_tresc">jakas tresc<br />fdgfgf<div id="ornament"></div></div>css
Kod:
#ornament {background: url(okienko/bg.jpg) no-repaet 0 0; width:249px; height: ??px;}?? = wysokość obrazka. Tam gdzie jest 0 0 ustawiasz pozycję obrazka tła w boksie, ale pewnie dasz radę. Piszę "z ręki" więc może być jakiś błąd.
P.S.
No i jeszcze szerokość się zmieni jeśli zrobisz tak jak mówiłem na 276px.
RE: [css]rozciagliwosc diva - Stef@n - 28-03-2009
Dzięki za pomoc... ale znalazłem inne rozwiązanie. Na zasadzie
<div id="lewa"><div id="prawa"><div id="zawartosc"></div></div></div>
Pozdrawiam