Subnavi will mein CSS nicht nehmen

**peter_lang** · 28.12.2011, 16:54

Hi zusammen,

bin seit 2 Wochen neu im bzw. am contao. Habe das Grundprinzip verstanden, also mich eingelesen und auch die Video2Brain DVD vereinleibt

)

Habe nur seit Stunde ein Problem, wo ich einfach nicht weiterkomme. Ich habe eine Hauptnavi, die ist horizontal. Aus dieser ergeben sich Unterpunkte, die dann im linken block untereinander als Block angezeigt werden sollen.

Habe eine eigene CSS mit ID zugewiesen, er verändert Farbe, Schriftgröße etc aber setzt es NICHT in Block um. Zeigt es immer, wie eben die Hauptnavi, auch horizontal.

Habe schon alles probiert, die .mod_nav Klasse anstatt meiner zugeteilt..nix...

Hat jemand ne Idee?` Ich vermute, dass ihn einfach die Class "<div class="mod_navigation block" id="submenu">" stört...soll und wie kann die raus?

Wäre für Hilfe Dankbar

**tblumrich** · 28.12.2011, 17:34

Hi.

Für echte Hilfe ohne Raterei wäre es echt fein, wenn du uns die Seite zeigst oder zumindest deinen genauen Code (CSS, HTML Ausgabe der Navigation) mal zeigst.

Gruß
Thomas

**ShenLung** · 28.12.2011, 18:28

Ich habe gerade Zeit und Rate mal

Kann es sein, dass deine Hauptnavi 'gefloatet' ist und sich diese Floats in deine Subnavi vererben?

Einen Hinweis könnte dir die Betrachtung deiner Seite im Firebug (oder was ähnlichem) geben. Denn da wird dir angezeigt, welche CSS-Sachen für die Formatierung deines Navigationsmenüs verantwortlich sind.

Wenn dem so wäre, müsstest du für die Subnavi die Floats wieder 'entfernen'...

**peter_lang** · 28.12.2011, 18:39

also, hier der code der Seite:

HTML-Code:

<div id="left">
<div class="inside">
 
<!-- indexer::stop -->
<div class="mod_navigation block" id="submenu">
 
<a href="index.php/land.html#skipNavigation19" class="invisible">Navigation überspringen</a>
 
<ul class="level_1">
<li class="first"><a href="index.php/Geographie.html" title="Geographie" class="first">Geographie</a></li>
<li><a href="index.php/Praesident.html" title="Präsident">Präsident</a></li>
<li class="last"><a href="index.php/Bilder.html" title="Bilder" class="last">Bilder</a></li>
</ul>
 
<a id="skipNavigation19" class="invisible">&nbsp;</a>
 
</div>
<!-- indexer::continue -->
 
</div>
</div>

Hier das CSS

Code:

#submenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 100%;
	margin-top: 20px;
	float: left;
}

#submenu ul {
	list-style: none;
	margin: 0px;
	padding-left: 15px;
	border: none;
}
#submenu ul li {
	margin: 0px;
	padding: 0px;
}
#submenu ul li a {
	line-height: 30px;
	font-size: 12px;
	display: block;
	border-bottom: 1px solid #cccccc;
	padding-left: 10px;
	text-decoration: none;
	color: #434343;
	width:288px;
}

#submenu ul li a:hover, #submenu ul li a:focus {
	color: #434343;
	background-color: #f6f6f6;
}
#submenu .on {
	color: #ff0000;
	background-color: #f6f6f6;	
}

**tblumrich** · 28.12.2011, 18:49

Wenn da von woanders nichts vererbt wurde an die Listenpunkte, sollte die Navigation untereinander angezeigt werden... aber es wird wahrscheinlich so sein, wie ShenLung es ausführte.

Wenn deine Hauptnavi die Listenpunkte horizontal darstellt, wird da vermutlich irgendwo ein .mod_navigation li {float:left}, oder noch allgemeiner vorhanden sein.
Die Frage ist also, wie ist die Hauptnavi formatiert?

Gruß
Thomas

**peter_lang** · 28.12.2011, 18:51

das is die Hauptnnavi

HTML-Code:

<!-- indexer::stop -->
<div class="mod_navigation block" id="mainnavi">
 
<a href="index.php/land.html#skipNavigation1" class="invisible">Navigation überspringen</a>
 
<ul class="level_1">
<li class="sibling first"><a href="index.php/startseite.html" title="Generalkonsulat der Republik Angola" class="sibling first">Startseite</a></li>
<li class="active"><span class="active">Land</span></li>
<li class="sibling"><a href="index.php/wirtschaft-und-investitionen.html" title="Wirtschaft und Investitionen" class="sibling">Wirtschaft und Investitionen</a></li>
<li class="sibling"><a href="index.php/politik.html" title="Politik" class="sibling">Politik</a></li>
<li class="sibling"><a href="index.php/tourismus.html" title="Tourismus" class="sibling">Tourismus</a></li>
<li class="sibling"><a href="index.php/presse.html" title="Presse" class="sibling">Presse</a></li>
<li class="sibling"><a href="index.php/aktuelles.html" title="Aktuelles" class="sibling">Aktuelles</a></li>
<li class="sibling last"><a href="index.php/unsere-dienste.html" title="Unsere Dienste" class="sibling last">Unsere Dienste</a></li>
</ul>
 
<a id="skipNavigation1" class="invisible">&nbsp;</a>
 
</div>
<!-- indexer::continue -->
 
</div>
</div>

das CSS

Code:

#mainnavi {
	width: 940px;
	height: 30px;
	margin: 0 auto;
	list-style: none;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
	margin: 5px 0 0 30px;
	}
#mainnavi li {
	display: inline; 
	float:left;	
	line-height: 30px;
	}

#mainnavi a {
	display: block;
	text-decoration: none;	
	color: #ffffff;
	padding: 0 20px 0 20px;
	}
#mainnavi a:hover{ 
	background-color:#fcfcfc; display: block; color: #000;z-index:100;}
	
#mainnavi .on {
	background-color:#fcfcfc; display: block; color: #000;}

**ShenLung** · 28.12.2011, 19:08

Na du Schelm

Wie ich sehe, wird #submenu explizit ein float: left zugewiesen.
Vielleicht solltest du das einfach mal rausnehmen und schauen, was passiert?

EDIT: Oder ich Schelm. #subnavi ist ja drumrum...
Aber du könntest ja mal testweise für #subnavi li ein float: none setzen

**tblumrich** · 28.12.2011, 20:06

Hmm.
Wenn du die Seite nicht zeigen willst, nimm doch mal Firebug und such dir eins deiner Subnavi <li> und guck. Von irgendwo her bekommen die Listenpunkte ein float:left oder/und display:inline... geht eigentlich nicht anders.

Gruß
Thomas

**peter_lang** · 28.12.2011, 21:16

so..ich habe nun alle floats raus bzw auf none gesetzt ...nichts... ich tipe darauf, dass er noch irgendein style aus der Hauptnavi mitzieht...und deshlab zeigt er es horizontal

**ShenLung** · 28.12.2011, 21:33

Hilft denn in '#submenu ul li' ein 'display: block'?

**peter_lang** · 28.12.2011, 21:57

Leider nein ....irgendwie habe ich keinen Plan mehr woran das noch liegen kann

**tblumrich** · 28.12.2011, 23:02

Hi.

Ich schreibs mal hier rein... da ich via PN auf die Seite gucken durfte.

Du hast, wie schon mehrfach angenommen, eben doch die angenommene Definition in deinem Stylesheet:

Code:

.mod_navigation li {
    display: inline;
    float: left;
}

Das wird auf alle Navigationsmenüs vererbt.
Guck dir dein Styelsheet einfach mal genauer an.

Gruß
Thomas

**peter_lang** · 29.12.2011, 08:23

Moin ... also, CSS rausgeschmissen und dieses mal nicht eingebunden im Backend, sondern direkt im header...und nu passt es .. ohhh Wunder der Weihnacht..

)

thx für die Hilfe.

**tblumrich** · 29.12.2011, 11:23

Nur vom Grundsatz her... die Lösung hat aber eigentlich nichts damit zu tun, das du das Stylesheet jetzt direkt einbaust, anstatt im Backend.
Nicht das hier der Gedanke aufkommt, es ist grundsätzlich besser sein CSS direkt einzubauen. Oder man repariert mit der Methode was.

Gucken, was in den eigenen CSS Files drin steht muss man immer.

Gruß
Thomas