Zaokrąglone rogi, dopasywanie wzdłuż i wszerz., 9 divów, środkowy rządzący kolegami Opcje

[Rewil]

Witam, mam zrobionego diva który chcę aby mógł się wzłuż i wszerz rozciągać.

http://koka.pctk.pl

Jak poinformować dwa pozostałe divy, żeby dorównały się od tego odchodzącego?

Przykładowo, jeśli nagłówek przesunie część kolumny. Dolne powinny overflowem, łapać szerokość do końca i ustawiać własną grafikę poszerzoną o repeat.
Chodzi mi głównie bardziej o logikę zbudowania czegoś takiego, ew. naprowadzenie.

[HTML] pobierz, plaintext 
<div class="dymek">
 
				<div class="dtresc">
					<div class="lgr"></div><div class="topg">Nagłówek</div>
					<div class="lr"></div><div class="trg">Jakiś tam tekst</div>
					<div class="ldr"></div><div class="btg"></div>
				</div>
 
				<div class="rogi">
					<div class="pgr"></div>
					<div class="pr"></div>
					<div class="pdr"></div>
				</div>
 
			</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
body{
	background:url('../grafika/tlo.png') repeat-x;
	background-color: #ffc54f;
	font-family:Arial;
	font-size: 11px;
	color:#4e4e4e;
	padding:0;
	margin:0;
	/*overflow-y: scroll;*/
}
 
.dtresc{
	float:left;
}
 
.rogi{
	float:left;
}
 
/* gora */
 
.lgr{
	background:url('../grafika/dymki_01.png') no-repeat;
	width:52px;
	height:27px;
	float:left;
}
 
.topg{
	background:url('../grafika/dymki_02.png') repeat-x;
	min-width:236px;
	height:27px;
	float:left;
	color:#ff7800;
	line-height:40px;
	font-size:12px;
	font-weight:bold;
	overflow:hidden;
}
 
.pgr{
	background:url('../grafika/dymki_03.png') no-repeat;
	width:33px;
	height:27px;
}
 
/* srodek */
 
.lr{
	background:url('../grafika/dymki_04.png') no-repeat;
	width:22px;
	height:37px;
	float:left;
	clear:both;
}
 
.trg{
	background:url('../grafika/dymki_05.png') repeat-x #f2f2f2;
	min-width:266px;
	min-height:37px;
	float:left;
	overflow:hidden;
}
 
.pr{
	background:url('../grafika/dymki_06.png') no-repeat;
	width:33px;
	height:37px;
}
 
/* dol */
 
.ldr{
	background:url('../grafika/dymki_07.png') no-repeat;
	width:105px;
	height:47px;
	float:left;
	clear:both;
}
 
.btg{
	background:url('../grafika/dymki_08.png') no-repeat;
	min-width:183px;
	height:47px;
	float:left;
}
 
.pdr{
	background:url('../grafika/dymki_09.png') no-repeat;
	width:33px;
	height:47px;
}
[HTML] pobierz, plaintext 

[Kildyt]

[HTML] pobierz, plaintext 
<div class="section"><div class="top-left"><div class="top-right"><div class="bottom-left"><div class="bottom-right">content</div></div></div></div>
[HTML] pobierz, plaintext 

To lepszy sposób na zaokrąglone rogi. W CSS-ie dla div-ów rogów dajesz background: url('') no-repeat right top; (dla top-right rogu).

[Crozin]

Od takich rzeczy jest CSS: http://jsfiddle.net/p5GCC/1/ - na dobrą sprawę trzeba tutaj użyć tylko jednego obrazka (z tym "ogonkiem"). Pożądany efekt otrzymasz na wszystkich liczących się przeglądarkach (jedynie będzie konieczne zdublowanie niektórych reguł pod konkretne przeglądarki) - pod IE będzie wszystko nadal ładnie wyglądać.

[Kildyt]

@Crozin, o czym ty mówisz? Pseudo-elementy after i before (bo tak też można rozwiązać ten problem) jest dopiero wspierany w IE 9, który nie posiada jeszcze wersji stabilnej (tak samo z border-radius).

Ten post edytował Kildyt 22.12.2010, 20:11:46

[Crozin]

@Kildyt: Gwoli ścisłości: IE (włączając w to 8 i w niektórych przypadkach 9) nie obsłuży: cienia pod elementem, gradientu w tle, zaokrąglonych rogów. Co do :after i :before - są obsługiwane przez IE8.

Gówniana przeglądarka? Brzydsza strona. Podobnie jak ze słabą kartą graf. nie oczekuj cudów od gry. IE wyświetli czytelny boks na wiadomość, użytkownik nie będzie miał najmniejszych problemów z jego odczytaniem itp. Czasy robienia "co do piksela" pod każdą przeglądarkę całe szczęście odeszły w niepamięć.

[Kildyt]

Co do :after i :before posłużyłem się zestawieniem, które podaje informacje, że IE8 nie obsługuje tych psudo-elementów. Możliwe, że jest tam błąd.

Nie chciałbym wdawać się w polemiki na temat tego czy wspierać stare przeglądarki, czy nie (osobiście wspieram tylko to co jest uznawane za popularne).
@Rewil chciał odpowiedzi i je dostał. (IMG:style_emoticons/default/winksmiley.jpg)