Matze: Was ist mit der div-Box passiert?

Beitrag lesen

Hallo,

Mag schon sein, aber ich hab in der Vergangenheit schon mehr als ein Projekt in Rekordzeit in den Sand gesetzt, nur weil ich mir zuviel auf einmal vorgenommen habe. Das klingt jetzt vielleicht so, als ob ich nicht in der Lage bin größere Projekte zu organisieren, aber aus der Erfahrung heraus nehme ich mir lieber die Zeit vieles Schritt für Schritt zu bearbeiten.

Es mag dir am Anfang einfacher erscheinen so zu arbeiten, ist es aber nicht.

Ich möchte dir deshalb ein Beispiel zeigen.
Wir erstellen uns ein Menü:

1. Ein Menü gehört semantisch in eine Liste. Wir nehmen dazu <ul>:
<ul id="menu">
  <li><a href="">Punkt1</a></li>
  <li><a href="">Punkt2</a></li>
<ul>

Das sieht sehr übersichtlich aus oder?
Viel zu warten gibts da in der Regel nicht. Nur wenn ein neuer Menüpunkt hinzukommt, muss man an den HTML-Code.

2. Jetzt gehen wir in die CSS-Datei und passen die Liste an unser Layout an.
Wir gehen mal davon aus, dass das Menü horizontal angeordnet sein soll:

#menu {
  list-style-type:none; /* wir entfernen die Punkte vor den Listenpunkten */
  padding:0; /* wir entfernen Aussen- und Innenabstände der Liste */
  margin:0;
}

Jetzt stehen die Menüpunkte aber noch untereinander. Das können wir beheben.
Wir legen auch gleich das Layout der Menüpunkte fest.

#menu li {
  float:left; /* wir richten die Punkte links aus */
  width:5em;  /* Breitenangabe und andere Angaben... */
  background-color:#CCC;
  border:1px solid black;
  margin-right:1px;
  text-align:center;
}

Wenn du jetzt einen Menüpunkt hinzufügen möchtest brauchst du dich nicht mehr um das Layout kümmern. Wenn du das Layout anpassen möchtest, brauchst du nur ein paar Angaben in der CSS-Datei ändern oder hinzufügen.

Zuerst den CSS-Teil inline zu "testen" ist absolut überflüssig.
Es erspart dir viel Zeit nicht hinterher deinen Code nach auszulagernden CSS-Stücken zu durchsuchen. Mal ganz abgesehen von "Star-Hacks" oder ähnlichem was inline unmöglich ist.

Grüße, Matze