[XHTML/CSS] Równoważność specyficznej tabeli na divach

[random]

Witam,
czytałem ostatnio trochę na temat div. Do tej pory robię w tabelkach i nie miałem z tym problemów. Żeby iść do przodu jak to się mówi chciałem zaobaczyć jak te same strony wyglądałyby w divach. Mam w związku z tym pytanie jak zrobić coś podobnego na divach:

Kod: Zaznacz cały

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
       <tr>
           <td width="50%" class="tlo3"></td>
           <td align="left" valign="top">
                <object
                type="application/x-shockwave-flash" data="header.swf" 
                width="766" height="339">
                <param name="movie" value="header.swf" />
                </object></td>
           <td width="50%" class="tlo4"></td>
       </tr>
</table>

Czyli jest wiersz, w środku jest flash, po lewej stronie jest tło które jest inne od tła po prawej stronie flasha. Tła dopasowują się do rozdzielczości ekranu i wypełniają miejsce pomiędzy flashem a bokami przeglądarki.
Z góry dziękuję za pomoc.
Pozdrawiam
RaN

1. W temacie określaj język, do którego odnosi się topic (div nie jest językiem) [poprawione]
2. Do prezentacji fragmentu kodu korzystaj z odpowiedniego BBCode [poprawione]

[rafcio8405]

Nie chce mi się pisać kodu, ale to dosyć proste nie ma większej różnicy między tworzeniem w tabelce czy w DIVie Przykładem tworzenia może być np. moja strona www.netzin.net cała zrobiona na DIVach. Dużej filozofi nie ma.

[stami]

Kod: Zaznacz cały

<div>
	<div style="width:45%; background-color: #eeeeee; display: inline;"></div>
	<div style="width:10%; background-color: #33CC33; display: inline; text-align: center;">Text</div>
	<div style="width:45%; background-color: #eeeeee; display: inline;"></div>
</div>

kolorki wstawiłem, żebyś lepiej widział gdzie sie kończy i zaczyna DIV.

[Stig]

Obawiam się stami, że zaprezentowane przez Ciebie rozwiązanie nie do końca się sprawdza

Realizacja tego zamysłu wymaga zastosowania trochę bardziej nietypowych technik niż zwyczajnie w przypadku tego sposobu tworzenia stron. Kluczową kwestią w tej sprawie jest użycie ujemnych marginesów dla dwóch bocznych elementów.

Zacznijmy od warstwy struktury. W tym wypadku jedyny "trik" to zmiana kolejności wyświetlania elementów. Pierw umieścimy div'y boczne, a dopiero potem środkowy z animacją flash. Kod:

Kod: Zaznacz cały

<div id="left"></div>
<div id="right"></div>
<div id="center">
 <object type="application/x-shockwave-flash" data="header.swf" width="766" height="339"> 
  <param name="movie" value="header.swf" /> 
 </object>
</div>

Jeśli chodzi, o warstwę prezentacji, tak jak wspomniałem, oprócz oczywiście odpowiedniego zastosowania atrybutu float, oprzemy się w znacznej mierze o ujemne wartości marginesów bocznych elementów. Kod:

Kod: Zaznacz cały

body {
margin: 0;
padding: 0;
}

div#left {
width: 50%; 
background-color: #FF0000; 
float: left; 
margin-left: -388px; /*polowa szerokosc zawartosci w center*/
height: 339px; /*wysokosc zawartosci center*/
}

div#center {
float: left; 
}

div#right {
width: 50%; 
background-color: #00FF00; 
float: right; 
margin-left: -388px;  /*polowa szerokosc zawartosci w center*/
height: 339px; /*wysokosc zawartosci center*/
}

Efekt działa we wszystkich nowoczesnych przeglądarkach (przetestowałem pod Operą 8.5 i Firefox'em).

[random]

Witam,
jeszcze nie robiłem nic w divach i jestem początkujący w tym temacie, ale uważacie że to jest lepiej interpretowane przez przeglądarki niż mój kod napisany na tabelach ?
Pozdrawiam
RaN

[Stig]

Wszak kwestia zalet w interpretacji tych dwóch fragmentów kodu, prezentujących odmienne techniki jego tworzenia, przez przeglądarki stanowi właściwie tylko niewielki fragment obszernej tematyki różnić w wielu aspektach między semantycznym (zaprezentowynym przeze mnie) i niesemantycznym (przytoczonym przez Ciebie) sposobem pisania kodu warstwy stryktury, to, jak w przypadku przeglądarek graficznych nie ma to właściwie znaczenia, tak w przeglądarkach tekstowych, dodatkowo ewentualnie wzbogaconych w syntezatoty mowy, różnica jest kolosalna, z wszelkimi zaletami rzecz jasna dla sposobu semantycznego.