Teil 5: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 2: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 3: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 4: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 5: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
- Teil 6: [Workshop] Bessere Web-Site mit CSS - Usability verbessern
Keine Experimente Beim Thema interne Verlinkung sollten Sie auch nicht zu kreativ sein, sonst riskieren Sie unter Umständen einen Ausschluss aus den Trefferlisten der Suchmaschinen. Die Crawler erkennen häufig zuverlässig, wenn ein spezieller Pfad für sie eingerichtet wurde, der die Inhalte sp...
Keine Experimente
Beim Thema interne Verlinkung sollten Sie auch nicht zu kreativ sein, sonst riskieren Sie unter Umständen einen Ausschluss aus den Trefferlisten der Suchmaschinen. Die Crawler erkennen häufig zuverlässig, wenn ein spezieller Pfad für sie eingerichtet wurde, der die Inhalte speziell aufbereitet. Dabei spielt es keine Rolle, ob Sie dies über Javascript oder Meta-Tags machen.Wirkungsvoll und von den Suchrobotern auch akzeptiert sind allerdings Navigationen, die auf CSS und Javascript aufbauen. Die Verlinkungen funktionieren auch bei ausgeschaltetem oder nicht vorhandenem Javascript, lediglich die Optik leidet stark darunter.Für einen Besucher aus Fleisch und Blut sicher nur schwer zu verkraften, ein Crawler schaut an dieser Ecke jedoch großzügig darüber hinweg. Das folgende Beispiel zeigt Ihnen, wie Sie mit einer normalen HTML-Liste und ein wenig CSS eine Navigation aufbauen und diese auch ohne großen Aufwand auf Ihre eigenen Bedürfnisse anpassen können.
Einfache Navigation mit Tabelle
Stellen Sie sich als Erstes eine HTML-Liste mit den wichtigsten Navigationselementen zusammen und bilden Sie diese in HTML ab.
<ul><li><a href=
"#">Home</a></li><li><a href=
"#">Über</a><ul><li><a href=
"#">Team</a></li><li><a href="#">Niederlassung</a></li></ul></li><li><a href="#">Kontakt</a><ul><li><a href="#">München</a></li><li><a href="#">Berlin</a></li><li><a href="#">Stuttgart</a></li></ul></li></ul>Da es eine zweistufige Navigation werden soll, haben wir die Liste als verschachteltes Element aufgebaut. Innerhalb der Rubrik Kontakt gibt es drei weitere Unterpunkte München, Stuttgart und Berlin, welche die Niederlassungen darstellen sollen.
ul { margin: 0; padding: 0;
list-style: none; width: 150px; }Entfernen Sie nun als Erstes die einzelnen Aufzählungszeichen von der Liste und weisen Sie den Aufzählungspunkten eine feste Breite von 150 Pixeln zu. Alle Punkte erscheinen nun untereinander in einer Liste - nichts erinnert mehr an die zweistufige Aufzählung.
Da wir ein mehrstufiges Menü darstellen wollen, müssen wir die zweite Navigationsebene versetzt darstellen und diese für entsprechend absolut positionieren. Für die Ausrichtung ist es notwendig, einen Bezugspunkt zu haben.
ul li { position:
relative; }Auf Basis dieser Formatierung können Sie nun eine Anordnung der Unterelemente durchführen. Diese werden genau anschließend an das jeweilige Hauptmenü platziert. Der Abstand wurde bewusst um einen Pixel verringert. Somit überlappen die beiden Hierarchiestufen um einen Pixel und es scheint, als teilen Sie sich eine Außenwand.
li ul { position: absolute;
left: 149px; top: 0; display: none; }Wenn Sie Ihre HTML-Seite in diesem Zustand aufrufen, werden Sie bemerken, dass die Elemente der zweiten Hierarchiestufe verschwunden sind und nur noch die Hauptpunkte Home, Über und Kontakt übrig geblieben sind.
