CSS Homepage, Tabellen ersetzen?

[Gunnar Bittersmann]

Hello out there!

Wenn man das genau so gut mit <li> machen kann, dann werd ich das noch ändern.

Falsche Zeitform. Nicht Fur, sondern Präsens ist angesagt: „dann ändere ich das augenblicklich“.

Allerdings würde ich da ungern Punkte haben, denn durch das einrücken erkennt man das ja auch schon so gut.

_Erst_ schreibst du das HTML. Dabei benutzt du die Elemente, die die Dokumtnstruktur beschreiben: 'h1', 'h2', ... für Überschriften; 'p' für Textabsätze, 'ul'/'ol' für Listen; 'li' für Listenitems; ... – ohne Blick auf die später gewünschte Darstellung. (Ob du Bullets vor Listenitems haben möchtest oder nicht, spielt in diesem Stadium nicht die geringste Rolle.)

_Danach_ kümmerst du dich um die Gestaltung mit CSS. (Jetzt ist die Zeit, ungewünschte Bullets vor Listenitems wegzumachen. Dennoch bleiben diese auch ohne Bullets noch das, was sie sind: Listenitems 'li'.)

<div style=" width:100%; height:100px;border:1px solid black;">Top wahrscheinlich  als Bild</div>
<div style=" width:100%; height:25px;border:1px solid black; background-color: #FFFFFF;"  align="center" >Home | Thema1 | Forum | Suche</div>
<ul  style=" width:200px; height:200px;border:1px solid black; float:left">

Notiere CSS-Angaben NIEMALS in 'style'-Attributen!! Der Quelltext wird unleserlich; Fehlersuche sehr schwer.

Mach alle Angaben zentral im http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title='style'-Element oder in einem <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=separaten Stylesheet>! Letzteres hat neben der besseren Lesbarkeit auch noch den Vorteil, dass du es für alle Seiten deiner Site verwenden kannst und spätere Änderungen nur an einer Stelle durchführen musst.

<li>Über mich</li>
   <li style="text-align:left; margin-left:10px;">Lebenslauf</li>
   <li style="text-align:left; margin-left:10px;">Ausbildung</li>

Nein, „Lebenslauf“ und „Ausbildung“ sind keine Items der ganzen Liste, sondern Unterpunkte zu „Über mich“. Das sollte auch im Markup ungesetzt sein.

Dein HTML sollte so aussehen:

<h1>Top wahrscheinlich  als Bild</h1>  
<ul id="Hauptnavigation">  
  <li>Home</li>  
  <li>Thema1</li>  
  <li>Forum</li>  
  <li>Suche</li>  
</ul>  
<ul id="Subnavigation">  
  <li>Aktuelles</li>  
  <li>Geschichte</li>  
  <li>Über mich  
    <ul>  
      <li>Lebenslauf</li>  
      <li>Ausbildung</li>  
    </ul>  
  </li>  
</ul>

Im Stylesheet dann deine Angaben wie z.B.

#Subnavigation  
{  
  width:  200px;  
  height: 200px;  
  border: 1px solid black;  
  float:  left;  
}

See ya up the road,
Gunnar