HTML - Ako napísať tento kód bez tabuľky?
Mám takýto HTML kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Skuska</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
<center>
<div id="main">
<div id="middle">
<div class='left'>
Niečo pod obrázkom<br>
Niečo pod obrázkom<br>
</div>
<div class='left'>
Niečo pod obrázkom<br>
Niečo pod obrázkom<br>
</div>
<div class='left'>
Niečo pod obrázkom<br>
Niečo pod obrázkom<br>
</div>
</div>
</div>
</center>
</body>
</html>
K nemu odpovedajúci CSS súbor:
#body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#main {
width: 780px;
text-align: left;
background-color: #FFFFFF;
}
#middle {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
left: 5px;
top: 5px;
right: 5px;
bottom: 5px;
padding: 5px;
height: 100%;
}
.left {
float: left;
}
Tento kód zobrazí Firefox tak, že #middle bude mať šírku padding zhora aj z dola, čiže 10 spolu. Znamená to, že FF nezaujíma, aký kód sa v tagu nachádza, ale ho stlačí, pretože vo vnorených tagoch je stýl float: left. IE ho zobrazí správne. Aby som dosiahol správne zobrazenie vo FF, vložil som do #middle tabuľku:
<table><tr><td>
<div class='left'>
Niečo pod obrázkom<br>
Niečo pod obrázkom<br>
</div>
<div class='left'>
Niečo pod obrázkom<br>
Niečo pod obrázkom<br>
</div>
<div class='left'>
Niečo pod obrázkom<br>
Niečo pod obrázkom<br>
</div>
</td></tr></table>
Teraz kód zobrazí správne aj FF aj IE. Ak tabuľku opäť odstránim, tak cache robí zázraky. FF stránku zobrazuje naďalej správne, ale IE už nie! Zaujímavé je, že IE zobrazoval kód správne pred vložením tabuľky, ale po odstránení už nie.
Ale ide mi o to, že chcem tento kód zobraziť vždy správne aj pri FF aj IE aj v Opere a nechcem tam tabuľku. Ako na to?
Napr. tak, že za posledný div class=left dáš ešte nejaký blokový element (napr. br) s clear: both.
BTW: To 12-riadkové nastavenie okraju pre #middle sa dá zapísať aj jednoduchšie - border: 1px solid #000. Nastavenie left, top, right a bottom nehrá rolu, keďže #middle má position: static.
No lenže potom nebudem mať to orámovanie z #middle alebo áno? Pokiaľ viem, tak nie, ale iba element s clear: both sa mi nastaví úplne pod všetky elementy. Čiže vlastne bude dole, ale orámovanie bude rozbité.
To 12-riadkové nastavenie za mňa písal Dreamweaver. Používam ho ako CSS editor, aby som nemusel vypisovať ručne, pretože všetky tie štýly nepoznám. Ale určite mu to odkážem.
Ale nie, ďakujem.
Po vložení br clear: both bude orámovanie fungovať správne podľa očakávania.
Ak som správne pochopil:
Funguje to, ďakujem. To by ma vôbec nenapadlo.