Individuelle Navigation - Wieso nicht horizontale Anordnung?

**Kasey** · 02.06.2010, 10:59

Hallo zäme
Ich probiere nun seit einiger Zeit die individuelle Navi horizontal auszurichten. Eigentlich kein Problem mit display: inline;
Leider klappt es nicht. Kann mir jemand weiterhelfen? Vielen Dank.
http://www.web-ideen.ch/pony-online/....8.3/index.php

**psren** · 02.06.2010, 11:06

.mod_customnav ul li {position: relative; float: left;}

sollte helfen

**Kasey** · 02.06.2010, 11:55

Danke vielmals, hat aber leider nicht funktioniert.

**Juke** · 02.06.2010, 12:16

Ich glaub du hast da einen Selektor vergessen:
.level_1 li { width: 100%; float: left; margin: 0pt; padding: 0pt;}

schreib mal das #left davor:
#left .level_1 li { width: 100%; float: left; margin: 0pt; padding: 0pt; }
(oder schmeiß das ganz raus)

und gib dem .mod_customnav ul.level_1 eine größere Breite.
Wenn du da nur 170px eingibst, dann stellen sich auch inlines untereinander auf.

Viele Grüße
juke

**psren** · 02.06.2010, 12:53

Code:

.level_1 li { width: 100%; float: left; margin: 0pt; padding: 0pt;}

Wenn die Breite eines li 100% ist, dann kann es auch nicht richtig floate, da es ja die gesamte breite des ul einnimmt.

**psren** · 02.06.2010, 12:58

hab mir jetzt auch mal den quelltext angeschaut:

Code:

.mod_customnav li { width: auto; position: relative; float: left;}

So funktionierts.

Die li haben nichtmehr 100% so kann das ganze dann floaten, und alles ist so, wies sein soll, glaube ich...
musst dann eben noch die breite des ul anpassen, dass es nicht umbricht.

Viel Spaß

psren

**Kasey** · 02.06.2010, 13:24

Danke allen vielmals. Nun hat es geklappt.

**DarkDeviLw** · 15.05.2012, 09:57

Hallo zusammen habe genau das selbe Problem aber bei mir funktioniert das irgendwie nicht
ich glaube, ich spreche dort den falschen wert an

folgenden code habe ich:

Code:

<div id="training_na">
<div class="inside">
<div id="navigation221" class="mod_article block">
<div class="mod_customnav block">
<a class="invisible" href="index.php/adminstudio-schulung-basic-beschreibung.html#skipNavigation144">Navigation überspringen</a>
<ul class="level_1">
<li class="active first">
<span class="active first">Beschreibung</span>
</li>
<li>
<a href="index.php/adminstudio-training-basic-ablauf.html">Schulungsthemen</a>
</li>
<li>
<a href="index.php/adminstudio-seminar-basic-termine.html">Termine</a>
</li>
<li class="last">
<a class="last" href="index.php/adminstudio-schulung-basic-onsite.html">Onsite</a>
</li>
</ul>
<a id="skipNavigation144" class="invisible" name="skipNavigation144">&nbsp;</a>
</div>
</div>
</div>
</div>

wie kann ich dass ganze dann ansprechen wenn ich eine horizontale individuelle navigation habe?

lg

**psren** · 15.05.2012, 11:29

"Ansprechen" tutst du das immer gleich, da sich das Markup ja nicht ändert. Was hast du denn bisher an CSS?
Hast du einen Link zur Seite?

**DarkDeviLw** · 15.05.2012, 12:39

die seite darf ich leider nicht rausgeben, ist eine firmenseite.

habe zurzeit die standart css also ausprobiert und wenns nicht funktioniert hat wieder gelöscht... somit blieb alles auf standart

**Andreas** · 15.05.2012, 13:40

Da hast du viele Möglichkeiten die LIs anzusprechen

HTML-Code:

.mod_customnav li {
  float: left;
}
#main .mod_customnav li {
  float: left;
}
#training_na .mod_customnav li {
  float: left;
}
#navigation221 .mod_customnav li {
  float: left;
}
.mod_article .mod_customnav li {
  float: left;
}
/* usw. */