nicht angemeldet
Layout mit Listen umzusetzen statt mit div funktioniert perfekt!
Hallo,
erst mal Gratulation zum neuen Aufbau!
Ich bin erst erschrocken, da ich dachte, ich wäre auf einer falschen Seite gelandet ;-)
Wirklich sehr gut gelungen :-)
Da ich immer wieder gelesen habe, dass es heikel ist, mit div und float zu arbeiten, und auch selber mehr oder weniger nur Probleme mit der browserübergreifend korrekten Implementierung hatte, gerade weil ich auch vor der Herausforderung stand, dass meine Spalten, unabhängig der Länge deren Inhalte, immer gleich lang sein müssen, habe ich mir, angeregt durch zahlreiche Artikel im Internet, überlegt, anstelle von div-Bereichen und notwendiger Hacks, mit Listen zu arbeiten.
Was soll ich sagen?
Es funktioniert perfekt!
Danach habe ich meinen Code mit dem W3C-Validierungsservice prüfen lassen.
Keine Warnungen, keine Hinweise, keine Fehler!
Weitere Vorteile:
- Keine Hacks
- Kein floating
- Kein clearing
- Kein Javascript oder PlugIns
- Extrem schlanker Code
- Pfeilschnell beim Aufbauen der Ausgabe im Browser
Hier meine komplette Testseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
*
{
margin: 0px;
padding: 0px;
}
html,
body
{
border: 0px;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
body
{
background-color: #000000;
color: #000000;
font-family: arial;
font-size: 12px;
font-weight: bold;
}
ul#Container
{
list-style-type: none;
margin: 0px auto;
width: 866px;
}
ul
{
list-style-type: none;
}
li#Header
{
background: url(../GRAFIKEN/HomepageHeader.png);
height: 242px;
width: 866px;
}
li#Informationen,
li#Navigation
{
background: url(../GRAFIKEN/HomepageRibbon.png);
height: 31px;
line-height: 31px;
width: 866px;
}
li#InformationenAbschluss
{
background: url(../GRAFIKEN/HomepageRibbonAbschlussOben.png);
clear: both;
height: 13px;
width: 866px;
}
ul#Spalten
{
display: table;
list-style-type: none;
table-layout: fixed;
}
li#VorInhalte
{
background: url(../GRAFIKEN/HomepageVorInhalte.png) repeat-y;
display: table-cell;
width: 64px;
}
li#Inhalte
{
background: url(../GRAFIKEN/HomepageInhalte.png) repeat-y;
display: table-cell;
width: 579px;
}
li#NachInhalteVorSidebar
{
background: url(../GRAFIKEN/HomepageNachInhalteVorSidebar.png) repeat-y;
display: table-cell;
width: 24px;
}
li#Sidebar
{
background: url(../GRAFIKEN/HomepageSidebar.png) repeat-y;
display: table-cell;
width: 147px;
}
li#NachSidebar
{
background: url(../GRAFIKEN/HomepageNachSidebar.png) repeat-y;
display: table-cell;
width: 52px;
}
li#NavigationAbschluss
{
background: url(../GRAFIKEN/HomepageRibbonAbschlussUnten.png);
height: 26px;
width: 866px;
}
</style>
</head>
<body>
<ul id="Container">
<li>
<ul>
<li id="Header"></li>
<li id="Informationen"></li>
<li id="InformationenAbschluss"></li>
<li>
<ul id="Spalten">
<li id="VorInhalte"></li>
<li id="Inhalte">
Überall nur Text<br>
Text<br>
Text
</li>
<li id="NachInhalteVorSidebar"></li>
<li id="Sidebar">
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text<br>
Text
</li>
<li id="NachSidebar"></li>
</ul>
</li>
<li id="Navigation">
Navigation
</li>
<li id="NavigationAbschluss"></li>
</ul>
</li>
</ul>
</body>
</html>
Was haltet ihr von dieser Methode?
Könnten hier doch irgendwelche Probleme auftreten (Browserinkompatibilität)?
Habt ihr Anregungen oder Kritikpunkte?
Gruß,
Enrico
-
Habt ihr Anregungen oder Kritikpunkte?
Im Endeffekt der gleiche Kritikpunkt wie bei Tabellenlayouts. Nur, dass nicht Tabellen sondern Listen zum Layouten missbraucht werden.
Desweiteren, die Pixel genauen Angaben. Meiner Meinung nach in der heutigen Zeit unbrauchbar, da die Viewport größen heutzutage von riesig, bis klein reichen.
Da man ja mehr oder weniger sogar noch mehr Angaben zu den Größen machen muss als bei Tabellen, ist das eigentlich sogar noch schlechter.
Bei Tabellen-Layouts war ja einer der großen Kritikpunkte, dass die Tabellen erst dargestellt werden, wenn sie komplett geladen sind.
Ich vermute mal bei Listen wird das ähnlich sein.Floating ist auch nicht so kompliziert, wenn man es mal verstanden hat, und dann auch alle mal leichter bildlich vor dem Auge zu haben, als sich dutzende Größenangaben durch den Kopf sausen zu lassen.
Flexboxen sind wohl die bessere Alternative zu floatenden DIVs.
MfG
bubble -
Heyho!
Was soll ich sagen?
Es funktioniert perfekt!Es funktioniert auch perfekt mit Tabellen oder Frames oder spans...
Das es "funktioniert", ist bei semantisch ausgezeichnetem Code kein Argument.
Desweiteren verhinderst du damit effektiv den Nutzen von HTML5-Elementen wie z.B. <menu>, <header>, <footer> und die weitgehende Unabhängigkeit der Reihenfolge der Elemente im Quelltext.Was haltet ihr von dieser Methode?
Weniger als von Tabellenlayouts.
Habt ihr Anregungen oder Kritikpunkte?
Als Anregung würde ich dir empfehlen dich besser mit float, clear, margin und padding zu beschäftigen als damit welche Elemente sonst noch so zu Layoutzwecken missbraucht werden können. Es ist kein Hexenwerk und "funktioniert perfekt".
Als Kritikpunkt würde ich vor allem die völlige Abstinenz von Semantik anführen.
Du bist wirklich auf einem Holzweg.
best regards
-
Als Kritikpunkt würde ich vor allem die völlige Abstinenz von Semantik anführen.
Herrliche Ausdrucksweise *-*
MfG
bubble
-