Dynamisch Navigationsleiste zentrieren

[Jens Ottersberg]

Moin zusammen,

ich habe mir hier das Kapitel http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Navigationsleisten durchgelesen und mich für folgendes Layout entschieden: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm (Das ist das letzte auf der Seite)
Ich habe auch schon ein wenig getestet und meinen Bedürfnissen angepasst.
Allerdings hätte ich es gerne zentriert. Das kriege ich auch schon mit dem Beispiel nicht hin.
Geht das überhaupt? Bei den Beispielen ab der horizontalen Formatierung ist auch nichts mehr zentriert ist, obwohl ich keinen Unterschied in der Positionierung erkennen kann.
Ich hoffe ihr könnt mir helfen. Danke im Voraus.

Jens

[Gunnar Bittersmann]

@@Jens Ottersberg:

nuqneH

Allerdings hätte ich es gerne zentriert. Das kriege ich auch schon mit dem Beispiel nicht hin.

div#Rahmen {margin: auto}

(Aber nicht als eigenständige Regel notieren, sondern 'margin: auto;' zu den anderen Deklarationen beim Selektor 'div#Rahmen' hinzufügen.)

Hätteste in den FAQ auch gefunden.

Qapla'

[Jens Ottersberg]

Moin,

tja wiedermal nicht alles durchsucht. Das Forum hatte ich zwar durchsucht nach Navigationsleisten und zentrieren usw., die FAQ aber nicht.
Danke nochmals.

Jens

[Gunnar Bittersmann]

@@Jens Ottersberg:

nuqneH

Das Forum hatte ich zwar durchsucht nach Navigationsleisten und zentrieren usw.

Bei der Suche nach "zentrieren" sollte die Trefferanzeige nur so überquillen. Und wenn es nur Verweise auf die FAQ sind. ;-)

Qapla'

[Jens Ottersberg]

Moin,

stimmt. Aber nicht in Kombination mit Navigationsleiste. Nur mit Zentrieren hätte ich es vermutlich auch nie gefunden bei dem Haufen an Ergebnissen der dabei herausgekommen wäre.

Jens

[Gunnar Bittersmann]

@@Jens Ottersberg:

nuqneH

Nur mit Zentrieren hätte ich es vermutlich auch nie gefunden bei dem Haufen an Ergebnissen der dabei herausgekommen wäre.

Na das hat mich jetzt aber neugierig gemacht. Also nach "zentrieren" gesucht.

Beim ersten der 86 Suchergebnisse in 'Forums-Archiv 2009' geht es um vertikale Zentrierung, bei den nächsten kommt "zentrieren" nicht im Titel vor.

Also folgen wir #6 liste zentriert ausgeben. Und was finden wir in ChrisBs Antwort? Den Verweis auf die FAQ.

Hab ich’s nicht gesagt?

Qapla'

[Jens Ottersberg]

Moin,

Schande über mich. Also nächstes Mal wenn die präzise Suche mit mehreren Begriffen nichts bringt, nur nach einem Begriff suchen.

Ein Problem habe ich noch.
1. Das margin: auto geht ja wohl nur im Zusammenhang mit width. Irgendwie muss sich das ja vermutlich berechnen lassen. Jedenfalls geht es bei mir nicht ohne.
2. Sobald ich bei dem Beispiel einen weiteren Menüpunkt hinzufüge ist es nicht mehr zentriert. Sehe ich das richtig, dass ich also erst denn richtigen Wert für width finden muss?

Wobei mir gerade einfiel, was ich in der FAQ von Carsten Protsch gelesen habe auf die du verwiesen hast:
"margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = Breite des übergeordneten Elements"
"Wird der Wert auto sowohl margin-left als auch margin-right zugewiesen, so sind die berechneten Werte für beide Seitenränder gleich groß."

Wenn ich jetzt also folgendes verwende, warum ist es nicht zentriert, obwohl doch für margin-left und margin-right der selbe Wert berechnet werden soll.

div#Rahmen {  
    margin: auto;  
    width: 47.1em;  
  }

Jens

[ChrisB]

Hi,

Wenn ich jetzt also folgendes verwende, warum ist es nicht zentriert, obwohl doch für margin-left und margin-right der selbe Wert berechnet werden soll.

div#Rahmen {

margin: auto;
    width: 47.1em;
  }

  
Das DIV-Element wird wohl zentiert dargestellt werden - das wirst du sehen, wenn du ihm mal eine Hintergrundfarbe gibst.  
  
MfG ChrisB  
  

-- 
Light travels faster than sound - that's why most people appear bright until you hear them speak.

[Jens Ottersberg]

Moin,

ja du hast recht. Wenn ich das richtig verstanden habe war das div über die width zu klein um alle Elemente aufzunehmen. Daher der Umbruch. Und dadurch sah es auch so aus, als wäre es nicht zentriert.

Zusammenfassend:
Wer <http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm@title=dieses Beispiel> zentriert haben möchte fügt beim div#Rahmen ein margin: auto; hinzu. Bleibt es allerdings nicht bei 6 Seiten, sondern werden es mehr muss auch das Element width angepasst werden.
Ich hoffe das ist so richtig.

Jens

[Jens Ottersberg]

Moin,

also irgendwie ist das noch unzufriedenstellend. Ich habe jetzt mal diese http://de.selfhtml.org/css/layouts/anzeige/nav_inline.htm@title=Variante soweit angepasst, das sie aussieht wie diese http://de.selfhtml.org/css/layouts/anzeige/nav_float.htm@title=Variante, denn ich möchte ja gerne eine Kombination aus beidem. Aber scheinbar ist es so, dass das float: left; das Layout "kaputt" macht. Denn sobald das eingefügt wird sind die Buttons nicht mehr zentriert.

Geht das überhaupt was ich will?

• Gleichgroße Buttons
• Hover-Effekt
• Zentriert
• Untermenüs beim Hover wären toll

Jens

[Detlef G.]

Hallo Jens,

welche Variante möchtest du denn nun?
<http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm@title=Die mit den Untermenüs> nur zentriert?
Dort das CSS ändern:

  div#Rahmen {  
 /* width: 47.1em;  entfernt, ul#Navigation braucht die Breitenangabe */  
    padding: 0.8em;  
    border: 1px solid black;  
    background-color: silver;  
    text-align: center;  /* hinzugefügt weil alte IEs nicht mit margin:0 zentrieren */  
	}  
/* * html div#Rahmen {  /* Korrektur fuer IE 5.x - entfernt weil Breite jetzt in ul#Navagation  
    width: 48.7em;  
    w\idth: 47.1em;  
  } */  
  div#Rahmen div {  
     clear: left;  
  }  
  ul#Navigation {  
/*  margin: 0;   stattdessen zentrieren */  
    margin: auto;  
	width: 47.1em;  
	padding: 0;  
/*  text-align: center;  hier nicht mehr nötig, weil schon in div#Rahmen */  
  }  
  * html ul#Navigation {  /* Korrektur fuer IE 5.x  - hier hinzugefügt*/  
    width: 48.7em;  
    w\idth: 47.1em;  
  }  

Dann sollte es passen.

Geht das überhaupt was ich will?

• Gleichgroße Buttons

Kein Problem, wenn du ihnen eine Breite gibst.

• Hover-Effekt

Kein Problem, wenn du die entsprechende Pseudoklasse richtig verwendest.

• Zentriert

Indem der ul margin:auto und eine passenden Breite gibst (und dem Elternelement text-align:center für unfähige Browser).
Zentriert nebeneinander stellen wäre wohl auch mit inline-block möglich, wie sich dies allerdings für (dynamische) Menüs gebrauchen lässt, habe ich aber noch nie getestet.

• Untermenüs beim Hover wären toll

Das kennst du doch bereits: Dynamische CSS-Navigation für moderne Browser (bitte auch weiterlesen)

Auf Wiederlesen
Detlef