[css]rozciagliwosc diva

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Stef@n
Nowy
Nowy
Posty: 40
Rejestracja: sob lut 15, 2003 12:33 pm
Lokalizacja: Nowy Targ
Kontakt:

[css]rozciagliwosc diva

Post autor: Stef@n »

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

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

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
vloq
Nowy
Nowy
Posty: 99
Rejestracja: wt kwie 03, 2007 12:39 am
Lokalizacja: Kraków
Kontakt:

Re: [css]rozciagliwosc diva

Post autor: vloq »

1) #srodek nie rozciaga sie bo zawiera elementy z float, a sam floata nie ma (no i mieć nie może bo nim środkujesz). Opcje masz dwie - albo poprawisz #okienko (usuwajac z niego height i width ustawiajac na szerokosc #srodek [odejmujac padding boczny]), albo tuż przed zamknieciem #srodek dodasz np. <div style="clear: both"> </div>

2) Rozciąganie pionowe jeśli nie zadawalają cię sztywne wartości heigh najłatwiej chyba pozorować tzn. jeli np kolumny maja inne kolory to w tle elementu nadrzednego wstawiasz gifa z repeat-y ktory ci te kolory ciagnie na calosci. A jak chcesz miec na dole zamkniecie tych dziwnych naroznikow, to umiesc je w #bottom.

Na marginesie po co dajesz wszystkiemu prefix okienko_?
ODPOWIEDZ