nicht angemeldet
table or <div> css layout probleme -> box model bug
Tach Zusammen,
ein heißes Thema was schon einiges an Diskusion erzeugt hat.
Ich möchte ein Seite ohne "Layout Tabelle" bauen, doch dazu etwas später.
vgl. etwa http://forum.de.selfhtml.org/archiv/2004/5/t81349/#m477566
Wenn ich mit <div>'s arbeite bekomme ich bei meinem Grundgerüst Probleme. Mal abgesehen vom box model bug ....
da gibt es schon einen sehr ähnlichen Thread der meinem Problem sehr nahe ist wo es aber wohl auch noch nicht "die" Lösung gibt ...
http://forum.de.selfhtml.org/archiv/2004/11/t95459/#m579194
Jetzt mal zu meinem Layout ich beschreibe es mal vereinfacht in der Tabellenform, da funktioniert es so wie ich mir es vorstelle.
--------------
t |ti
t |ti
t |
t |
t |-----
t |
t |
t |tx
-------------
habe ein Layout mit zwei Spalten, bei der rechten Spalte steht bei tx (mit fester Höhe) immer etwas ganz unten! ti variiert in der Länge ebenso die linke Spalte, egal welche Spalte länger ist unten soll der abschluß auf gleicher Höhe sein. Darum jetzt noch einen Rahmen (gut einfach ein <div> drumherum) und zentriert (das geht beides unproblematisch)
der Code für die Tab sieht dann etwas so aus:
<div id="mittig mit rahmen">
<table border=3>
<tr>
<td rowspan=2> t</td>
<td> ti</td>
</tr>
<tr>
<td> tx</td>
</tr>
</table>
</div>
so jetzt zum <div> mit css das wohl unproblematisch mit festen Größen ist!
zuerst die css anweisungen:
#site {
width:820px; height:100%;
min-height:360px;
margin-left:auto; margin-right:auto;
padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:40px;
background-color:#FFFFFF;
z-index:1;
}
#content {
float:left;
width:610px; height:100%;
min-height:360px;
margin:0px;
padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px;
background-color:#FFDDFF;
z-index:2;
}
#navi {
float:right;
width:170px; height:100%;
min-height:360px;
margin:0px;
padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px;
background-color:#DDFFDD;
z-index:4;
}
#bottom {
float:right;
width:150px; height:170px; position:relative; bottom:0px;
margin:0px;
padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px;
background-color:#FFDDDD;
z-index:3;
}
jetzt der htmlcode zum anzeigen:
<div id="site">
<!-- content begin-->
<div id="content">
<p>-- content begin --</p>
<h1>Sie haben die Startseite gefunden.</h1>
<hr />
<p>-- content end--</p>
</div>
<!-- content end-->
<!-- navi begin-->
<div id="navi">
<p>r...</p>
</div>
<!-- navi end-->
<!-- murx begin-->
<div id="bottom">
<p>bottom</p>
</div>
<!-- murx end-->
</div>
das witzige ist das der IE6 in dieser version einigermassen das darstellt was ich möchte.
firefox nicht .... das liegt wohl daran das die Browser unterschiedliche bezugpunkte nehmen -> box model bug ????
interressant wird die Sache wenn ich jetzt entweder unter navi oder content die Textlänge mit sehr vielen Absätzen sehr in die Länge ziehe dann sieht die Sache unterschiedlichst in den unterschiedlichsten Browsern aus ....
der text geht teilweise über die angezeigten <div> (insb. ti) Bereiche hinaus ... hat das etwas mit den height=100% zu tun ???
aber wie bekomme ich sonst die höhe der "Spalten" flexibel, elastisch ... hin?
Und eine witzige Sache noch ist das der IE6 die letzen zwei Zeichen das naviblocks (ti) doppelt darstellt und zwar in dem site div ganz unten links :grübbel: nein der Queltext ist sauber !!! habe testweise ein Zeichen geändert und dies kamm dann an beiden Stellen geändert in Erscheinung
ich könnt ja bei dem Tabelen layout bleiben aber das ist doch eigentlich nicht einer Tabelle wert, oder ???
insbesondere in Bezug auf das Thema Barrierefreiheit ;-)
ich habe keine Vorstellung wie die einzelnen Reader usw. mit so einer Tabelle zurecht kommen, dies ist doch wohl sehr unterschiedlich ....
Ich kann mich nicht entscheiden ob meine "Position absolute|fixed|relative|static" zu diesem Thema ist.
skai007