Enrico: Layout mit Listen umzusetzen statt mit div funktioniert perfekt!

Beitrag lesen

SELF-Forum

Layout mit Listen umzusetzen statt mit div funktioniert perfekt!

Enrico
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln