vertikale Navigationsleiste

Praktiker · #1 (**permalink**) 12.04.2013, 10:20

Hallo Leute
in den letzten Tagen habe ich eine vertikale Navigationsleiste erstellt.
Genauer gesagt habe ich davon zwei Varianten erstellt, welche sich im CSS unterscheiden.
In meinem Google chrome sehen beide gleich aus.aber ich habe keine Ahnung, ob ich alles richtig gemacht habe.
Könntet ihr mir bitte sagen, welche Variante die bessere ist und ob das alles so passt oder falls etwas nicht passt, was ich dann tun muss, damit die Navigationsleiste in allen Browsern (auch in den alten Internet Explorer) korrekt dargestellt wird.
Das Beispiel habe ich hier hochgeladen:
Little Boxes und eigene Navigation
Recht herzlichen Dank schonmal für eure Tipps!

explanator · #2 (**permalink**) 12.04.2013, 12:13

Was sind bei dir alte IE. Auf IE6 und IE7 brauchst du keine Rücksicht mehr zu nehmen.

Du kannst im Firefox deine Seite mit der Errorkonsole überprüfen. Dort ist alles sauber, also keine Fehler.

Tipp am Rande:
Du kannst den Doctype verkürzen und den Metatag Charset auch, auf

Code:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset=UTF-8>

dann reicht dir eine einfach schliessende Klammer ohne linksseitigem Schrägstrich(Backslash) in den weiteren Metatags.
Der neue Doctype ist HTML5 und Rückwärtskompatipel, funktioniert also auch bei älteren Browsern.

HTML-Code:

<h1>Platz für Ihr Logo</h1>
<p>Platz für Ihren Slogan</p>

Mann könnte dem Slogan auch als h2 (Überschrift 2. Ordnung) auffassen, das liegt aber im Sinne des Betrachters, möglich wäre es und falsch auch nicht, ich mache das so. Die nächsten Überschriften wären dann natürlich h3 statt h2.

Insgesamt ein feines Ergebnis was du uns hier ablieferst, weiter so.

plastiko · #3 (**permalink**) 12.04.2013, 20:56

Zitat:

Zitat von Praktiker

Könntet ihr mir bitte sagen, welche Variante die bessere ist und ob das alles so passt oder falls etwas nicht passt, was ich dann tun muss, damit die Navigationsleiste in allen Browsern (auch in den alten Internet Explorer) korrekt dargestellt wird.

Ich sehe nur eine Variante (mit fester px-Breite für den IE 6).
Was der IE6 dort nicht kennt, ist der Selektor:

Code:

#navi ul li:hover

Du könntest den Hintergrund nach innen (auf #navi ul a, bzw: #navi ul a:hover) verlegen.

Wichtiger:
In den (heute) üblichen Browsern, bei schmalem Viewport überschneiden sich die Inhalte.
Je nach dem, was dann passieren soll, könntest du eine ausreichende min-width für #wrapper geben oder die Anordnung mit Media Queries komplett verändern.

Praktiker · #4 (**permalink**) 13.04.2013, 10:57

Vielen Dank euch beiden für eure Tipps!
Werde mich nun damit beschäftigen.
Ein schönes Wochenende wünsche ich euch

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Text neben Navigationsleiste	andi01	CSS	6	08.06.2011 16:54
Vertikale Navigation & Inhalt	Innocentus	(X)HTML	2	03.04.2011 10:32
Horizontal zentrierte Navigationsleiste erstellen	Webnut	CSS	4	16.01.2011 12:09
Dynamische Navigationsleiste horizontal, vertikal	Faven	CSS	6	28.06.2010 15:06
Layout & vertikale UL-Liste: Umbruch des Contents verhindern	Innocentus	CSS	1	02.12.2009 19:34