Dynamische Navigation

[Sebastian]

Hallo,

ich möchte mit Hilfe der in self-html vorgestellten Beispiele eine horizontale Navigation mit mehreren Unterebenen mit css erstellen, die in etwa so aussehen soll wie das Beispiel:

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm

Ich möchte nur ändern, dass die gesamte Navigation horizontal zentriert ist (und natürlich die Farben), so wie hier:

http://de.selfhtml.org/css/layouts/anzeige/nav_inline.htm

Allerdings bin ich bisher grandios gescheitert, weil immer irgendein Element dann nicht gepasst hat, z.B. waren dann die Elemente in den Unterebenen nicht mehr zentriert usw.

Das ist der Code, mit dem ich arbeite:

  
<div id="topnaviframe">  
<div id="topnavi">  
<ul class="topnavigation">  
<li><a href="">Seite 1</a></li>  
<li><a href=""?>">Seite 2</a>  
 <ul>  
  <li><a href="">Seite 2.1</a></li>  
  <li><a href="">Seite 2.2</a></li>  
  <li><a href="">Seite 2.3</a></li>  
  <li><a href="">Seite 2.4</a></li>  
 </ul>  
</li>  
<li><a href="">Seite 3</a></li>  
<li><a href="">Seite 4</a></li>  
<li><a href="">Seite 5</a></li>  
<li><a href="">Seite 6</a></li>  
<li><a href="">Seite 7</a></li>  
</ul><div></div>  
</div>  
</div>  

  
  
#topnaviframe{  
  width:100%;  
  padding-top:0.75em;  
  margin-bottom:0;  
  padding-bottom:0;  
}  
  
div#topnavi {  
  background-color:silver;  
  border:1px solid black;  
}  
  
div#topnavi div {  
  clear:left;  
}  
  
ul.topnavigation {  
  margin:0;  
  padding:0.8em;  
  text-align:center;  
  background-color:silver;  
}  
  
ul.topnavigation li {  
  list-style:none;  
  float:left;  
  position:relative;  
  margin:0.4em;  
  padding:0;  
}  
  
ul.topnavigation li ul {  
  margin:0;  
  padding:0;  
  position:absolute;  
  top:1.6em;  
  left:-0.4em;  
  display:none;  
}  
  
ul.topnavigation li:hover ul {  
  display: block;  
}  
ul.topnavigation li ul li {  
  float: none;  
  display: block;  
  margin-bottom: 0.2em;  
}  
  
ul.topnavigation a, ul.topnavigation span {  
  display:block;  
  width: 7em;  
  padding: 0.2em 1em;  
  text-decoration: none;  
  font-weight: bold;  
  border: 1px solid black;  
  border-left-color: white;  
  border-top-color: white;  
  color: maroon;  
  background-color: #ccc;  
}  
  
ul.topnavigation a:hover,  
ul.topnavigation span,  
li a#aktuell {  
  border-color: white;  
  border-left-color: black; border-top-color: black;  
  color: white; background-color: gray;  
}  
  
ul.topnavigation li ul span {  
  background-color: maroon;  
}  

Vielen Dank für Eure Hilfe.

[Florian Stascheck]

Hallo,

1. Ohne Frage keine Antwort
2. Relevante Teile!
3. Problem präzisieren

mfg, Flo

[Sebastian]

Sorry. Ich dachte, das sei alles relevant, weil ich ehrlich gesagt nicht genau verstehe, warum das nicht horizontal zentriert dargestellt wird.

Wenn ich unter "ul.topnavigation li" "display:inline" einstelle und zugleich bei "ul.topnavigation" "text-align:center" einstelle, dann passiert nichts, obwohl nach der Beschreibung bei self-html damit erreicht werden soll, dass das ganze zentriert sein soll:

http://de.selfhtml.org/css/layouts/anzeige/nav_inline.htm

Irgendetwas mache ich anscheinend falsch. Ich bin für jede Hilfe äußerst dankbar, weil wie gesagt nicht durchschaue, warum das so nach der vorgestellten Lösung nicht geht.

Sebastian

[ChrisB]

Hi,

Wenn ich unter "ul.topnavigation li" "display:inline" einstelle und zugleich bei "ul.topnavigation" "text-align:center" einstelle, dann passiert nichts, obwohl nach der Beschreibung bei self-html damit erreicht werden soll, dass das ganze zentriert sein soll

Das floating der LI hast du entfernt? Das wirkt sonst natuerlich "staerker" als display:inline.

MfG ChrisB

[Sebastian]

Hi,

Das floating der LI hast du entfernt? Das wirkt sonst natuerlich "staerker" als display:inline.

Wenn ich das float entferne, ist die Liste auf einmal wieder untereinander und nicht nebeneinander angeordnet. Das ist ja gerade die misslich Lage. Ich verstehe das Problem überhaupt nicht.

Aber danke für deine Hilfe.

Sebatian

[ChrisB]

Hi,

Wenn ich das float entferne, ist die Liste auf einmal wieder untereinander und nicht nebeneinander angeordnet.

Natuerlich, wenn die in den LI auf zweiter Ebene liegenden UL immer noch beim Einblenden als block dargestellt werden.

Ich verstehe das Problem überhaupt nicht.

Vermutlich darf hier das Wort "Problem" mit "CSS" substituiert werden?
Dann solltest du dich erst mal ein bisschen umfassender damit beschaeftigen, damit du auch einschaetzen kannst, welche Eigenschaften und deren Werte welche Auswirkungen haben.

MfG ChrisB