Navigationsleiste, so möglich, und wie?

[Fkhm]

Hallo, noch ein Beitrag, ob und wie eine Navigationsleiste in dem Maße möglich ist.

Momentan sieht das ganze so aus: http://contao.pikante-stadtallendorf....php/home.html

Der Hintergrund der Navigationsleiste ist also, wie ersichtlich, schon vorhanden. Es ist eine 1px breite und 40px hohe Datei, die in x-Richtung wiederholt wird.

Ich möchte jedoch, dass das ganze am Ende so aussieht: Navigationsleiste.png

Also wie ihr seht, dass die Schrift etwas von oben herunter kommt und sich zwischen den Links mehr abstand befindet. Zwischen den Links bekommt man das vermutlich mit dem Padding hin? Aber wie bekomme ich es von oben ein Stück herunter?

Außerdem möchte ich, dass der angeklickte Bereich, als wenn ich z.B. auf Home bin so aussieht:
Home.png

Eine PNG 1px breit und 40px hoch mit der Farbe ist vorhanden, aber wie kann ich sie in der Breite über die Hintergrundgrafik legen, bzw. wie bekome ich es hin, dass es genau in der Mitte zwischen 2 Navigationslinks aufhört?

und 3. möchte ich das mit dem Hovereffekt so aussehen lassen, wenn ich auf Home bin, meine Maus jedoch auf Leistungen ist:
Home_Hover_Leistungen.png. Wird vermutlich dann genauso gemacht wie mit dem aktiven Link?

Hier meine Stylesheet:

      
Aktiver Link (überschreibt Hover)
#sucker.mod_navigation ul.level_1 span.active {
    display:block;
    text-align:center;
    font-family:Verdana,Arial;
    font-weight:bold;
    text-decoration:none;
    color:#e6e6e6;
}
      
Aktiver Link
#sucker.mod_navigation ul.level_1 li {
    float:left;
    display:block;
    font:12pt Verdana,Arial;
    color:#363636;
    margin:0 4px 3px;
    padding:5px 10px;
}
      
inaktive Links
#sucker.mod_navigation ul.level_1 li a {
    top:10px;
    display:block;
    text-align:center;
    font-family:Verdana,Arial;
    font-weight:bold;
    text-decoration:none;
    color:#e6e6e6;
}
      
Hover effekt
#sucker.mod_navigation ul li:hover,
#sucker.mod_navigation ul li:active,
#sucker.mod_navigation ul li:focus {
}
      
Hover Effekt inaktive Links
#sucker.mod_navigation ul.level_1 li:hover a,
#sucker.mod_navigation ul.level_1 li:active a,
#sucker.mod_navigation ul.level_1 li:focus a {
}
      
Allgemein
#sucker.mod_navigation {
    height:50px;
    display:block;
    background:url("files/carna/navi.png") left top repeat-x;
}
      
#sucker .mod_navigation ul.level_1 span.active:hover,
#sucker .mod_navigation ul.level_1 span.active:focus,
#sucker .mod_navigation ul.level_1 span.active:active {
}
      
#sucker.mod_navigation ul li:hover ul.level_2,
#sucker.mod_navigation ul li:active ul.level_2,
#sucker.mod_navigation ul li:focus ul.level_2 {
    margin:3px 0 0;
}
      
#sucker.mod_navigation ul.level_2 {
    width:200px;
    position:absolute;
    display:block;
    margin-left:-9999px;
    padding:4px;
    background-color:rgba(255,255,255,0.75);
    border:1px solid #C0C0C0;
    z-index: 55555;
}
      
Schriftfarbe ausklappmenu aktiv
#sucker.mod_navigation ul.level_2 span.active {
    display:block;
    padding:3px 0 3px 5px;
    text-align:left;
    color:#787878;
}
      
.mod_navigation ul.level_2 span.active:hover,
.mod_navigation ul.level_2 span.active:focus,
.mod_navigation ul.level_2 span.active:active {
}
      
#sucker.mod_navigation ul.level_2 li {
    width:100%;
    margin:5px 0 0;
    padding:2px 2px 0 0;
    color:#000;
}
      
Ausklappmenu inaktiv
#sucker.mod_navigation ul.level_2 li a {
    display:block;
    padding:3px 0 3px 5px;
    text-align:left;
    font-family:Verdana,Arial;
    color:#363636;
}
      
.mod_navigation ul.level_2 li a:hover,
.mod_navigation ul.level_2 li a:active,
.mod_navigation ul.level_2 li a:focus {
}

Kann mir dabei jemand helfen?

[Fkhm]

Also ich habe es jetzt so probiert, dass ich es als Hover bei:

Hover Effekt inaktive Links
#sucker.mod_navigation ul.level_1 li:hover a,
#sucker.mod_navigation ul.level_1 li:active a,
#sucker.mod_navigation ul.level_1 li:focus a {
    background-repeat:repeat-x;
}

eingesetzt hatte, aber dadurch hat sich auch die Hintergrundfarbe der Links von den Ausklappmenüs verändert. Also irgendwie bekomme ich es nicht hin, wäre für jede Hilfe Dankbar.

[InitArt]

Für den Abstand:

#sucker.mod_navigation ul.level_1 li a, #sucker.mod_navigation ul.level_1 li span {
  padding: 15px;
}

Wenn du padding nur auf das li-Element legst, wird nur der Text anklickbar sein.

Für den Hintergrund

#sucker.mod_navigation ul.level_1 li a:hover, #sucker.mod_navigation ul.level_1 li span.active {
  background: darkred;
}

[Fkhm]

Danke schonmal soweit, dass mit dem Ausrichten hat geklappt.

Beim Hover und beim aktiven Link besteht aber noch das Problem, dass nur unter dem Text der Hintergrund zu sehen ist, und dass die Menüpunkte in Level 2, also im Dropdown-Menü auch farbig hinterlegt sind. Die sollen sich jedoch nicht verändern und eben die Hintergrundfarbe bei Hover bzw. active vom oberen bis zum unteren Rand der Navigationsleiste gehen, sowie auch noch links und rechts ein Stück, dass es Mittig zwischen zwei Menüpunkten aufhört. Daran haperts im Moment leider noch.

[InitArt]

Lies meinen Beitrag nochmal, dort steht bereits die Lösung des Problems, warum der Hintergrund nur unter dem Text zu sehen ist.

[Fkhm]

Ich darf es also nicht nur auf das Li-Element legen? Auf welches Element muss ich es denn auch noch legen?

[InitArt]

Du musst es nur auf das a-Element und auf das span-Element legen, nicht jedoch auf das li-Element, da sonst der Abstand doppelt angezeigt wird.

[Fkhm]

#sucker.mod_navigation a:Hover,
#sucker.mod_navigation span.active {
    height:50px;
    display:block;
    background-image:url("files/carna/Auswahl_navigation.png");
    background-repeat:repeat-x;
}

So habe ich es probiert. Aber es hat von der Höhe her wieder das gesamte Layout zerrisen und es waren wieder alle Unterpunkte hinterlegt. Außerdem hat es nur vom Text bis zum unteren Rand gereicht. Über dem Link hat sich nichts verändert.

[InitArt]

#sucker.mod_navigation {
	background: url("../../files/carna/navi.png") repeat-x;
}

#sucker.mod_navigation > ul > li{
	float: left;
	font: 1.3em Verdana,Arial;
	margin: 0 4px;
}

#sucker.mod_navigation > ul.level_1 > a, #sucker.mod_navigation > ul.level_1 > span{
	font-weight: bold;
	color: #e6e6e6;
	text-decoration: none;
	padding: 14.5px;
}

#sucker.mod_navigation > ul.level_1 > a:hover, #sucker.mod_navigation > ul.level_1 > span.active {
	background: darkred;
}

[Fkhm]

Habe es damit versucht, es sieht immernoch gleich aus. So wie es nun aussieht habe ich es schon am wochenende hinbekommen, jedoch möchte ich, dass die Unterpunkte rot werden und der Hover und aktive Hintergrund erstreckt sich nicht über die komplette höhe :-( Das muss doch irgendwie möglich sein, es so zu lösen, wie ich es mir vorstelle(siehe Eingangspost)

Im moment sieht es immernoch so aus wie es auf: http://contao.pikante-stadtallendorf....php/home.html zu sehen ist.

Es soll so sein wie hier: http://www.reneboehres.de/

Der komplette Bereich um den Link herum soll mit dem Hover effekt hinterlegt werden, der unterschied soll jedoch sein, dass in level 2, also die Unterpunkte, kein Hovereffekt statt findet.

[InitArt]

Du solltest dich mit der Materie beschäftigen oder das Design in Auftrag geben, ich hab dir den Code doch schon vorgekaut...

[Fkhm]

Zum in Auftrag geben ist kein Geld da, leider. Versuche mich ja damit zu beschäftigen, nur jedes mal wenn ich z.B. die Höhe vom Hover ändere, schiebt es mir das Untermenü nach unten. Ich werds weiter probieren, gib mir nur noch einen Tipp womit das zusammen hängen könnte?

PS: Wie hast du die .css so angepasst, dass es bei dir so funktioniert hat?


Also mit Firebug habe ich jetzt diese elemente hier ausgelesen. Es müssen also die Elemente active submenu, und hover submenu sibling mit einem Hover unterlegt werden.
Ich würde das nun mit li.submenu sibling machen, hat aber leider nicht funktioniert. Bin ich wenigstens auf dem richtigen Weg?
<ul class="level_1">
<li class="active submenu first">
<li class="submenu sibling">
<li class="submenu sibling last">

Gut, nun habe ich es verstanden. Wie zu sehen ist auf der Seite, ist zumindest jetzt der Hover effekt da und die Unterlinks sind nicht davon betroffen. Ich musste mich erstmal in die Thematik des mir unbekannten descendand selector einarbeiten. Habe jetzt noch ein > li nach dem ul.level_1 eingefügt. Also ein großes Dank an dich. Werde jetzt probieren, dies auf die gesamte größe des Menüs anzupassen.

[InitArt]

Das muss weg:

#sucker.mod_navigation ul.level_1 li a, #sucker.mod_navigation ul.level_1 li span {
margin-top: 10px;
}

Das hier auch:

#sucker.mod_navigation > ul.level_1 > li >a, #sucker.mod_navigation > ul.level_1 > li> span {
padding-right: 5px;
padding-bottom: 29px;
padding-left: 5px;
}

Und das:

#sucker.mod_navigation ul.level_1 li {
margin: 0 4px 3px;
padding: 5px 10px;
}

Das muss so aussehen:

#sucker.mod_navigation > ul.level_1 > li >a, #sucker.mod_navigation > ul.level_1 > li> span {
padding: 15px;
}

[Fkhm]

Einsame Spitze. Habe, wie du gesehen hast gerade rumprobiert.

Das margin ist ja für den Außenabstand, also dem Abstand zum Rand des nächsten Elementes.
Das Padding ist ja für den Innenabstand, also einem Polster zuständig.
Ich verstehe noch nicht so ganz warum das eine margin weg musste und dafür das padding her. Denn mit dem Padding mache ich ja einen innenabstand und keinen außen Abstand. Dabei wollte ich ja nach außen zum Rand. Das leuchtet mir noch nicht so ganz ein. Das mit dem descendand ist mir komplett neu, scheint aber sehr praktisch zu sein, auch wenn es anscheinend im IE6 und niedriger noch nicht funktioniert. Diese Funtkion werde ich bestimmt noch einige male benötigen.

Werde noch etwas rumprobieren um den Abstand der zwischen Home und Unsere Leistungen nicht mit dem Darkred hinterlegt wird zu schließen, so wie dem linken Rand neben Home, der auch nicht hinterlegt ist. Oder ist das Hoffnungslos und unmöglich?

Edit: Gut, habe es hinbekommen. Es lag auch nur an dem margin mit 4 px. Ich danke vielmals, verspreche mir auch das Buch von Peter Müller zu bestellen(sobald mal etwas Geld über ist), in dem er Contao erklärt. Damit ich nicht weiter solche in euren Augen dummen Fragen stelle. Besteht nur noch das Problem, dass das ausklapp menü etwas nach unten versetzt ist, das muss ich jetzt noch irgendwie ein stück nach oben bekommen. Funktioniert aber wahrscheinlich nicht mit padding oder margin sondern wohl eher mit einem position-top:-5px; oder ähnlich? Sagt mir nur, ob ich auf dem richtigen Weg bin.

[Fkhm]

Ich habe bei

#sucker.mod_navigation ul.level_2 {
    width:200px;
    top:197px;
    position:absolute;
    display:block;
    margin-left:-9999px;
    padding:4px;
    background-color:rgba(255,255,255,0.75);
    border:1px solid #C0C0C0;
    z-index: 55555;
}

noch das in 3. Zeile stehenden attribut top:197px; hinzugefügt. Somit habe ich das Menü ein Stück nach oben gezogen. Jetzt frage ich mich aber, ob das dann so überall richtig dargestellt wird oder ob das so unsauber programmiert ist.
Ich habe mal gelesen das das mit den pixel angaben nicht überall gleich angezeigt ist.

Also meine Frage: ist das okay so oder muss ich das anders lösen?

Außerdem wollte ich probieren, dass auch ein Hover, bzw. active, Effekt eintritt, wenn ich einen Unterpunkt auswähle. Ich hatte mir das so gedacht, dass ich das eventuell löse mit
#sucker.mod_navigation ul.level_2 li.level_1:hover {background-color: darkred;}
Hat aber nicht funktioniert. :-/

[KlausGrenoble]

Ich erinnere mich gelesen zu haben, dass ein(ige) Browser bei negativen Margin-pixels (vielleicht sogar bei position-top:-5px) negativ reagieren.

[Fkhm]

Das ganze habe ich ja schon gelöst bekommen, habe hieran:

#sucker.mod_navigation ul.level_2 {
    width:200px;
    top:197px;
    position:absolute;
    display:block;
    margin-left:-9999px;
    padding:4px;
    background-color:rgba(255,255,255,0.75);
    border:1px solid #C0C0C0;
    z-index: 55555;
}

nichts mehr geändert, also habe ich es mit einem top:197px; gelöst.

Bin gerade daran, dass das Menü level_1 auch gehovert ist wenn ich im Menü level_2 bin. Klappt zwar noch nicht so ganz und bin über jeden Tipp dankbar, ansonsten probiere ich weiter herum.

[Fkhm]

Ist dies denn so der richtige Ansatz damit das Level 1 auch gehovert ist, wenn ich im Level 2 Menü bin?

#sucker li.level1:hover ul.level2, {
  background-color:darkred;
}

[InitArt]

Die gute alte Langeweile...:

#sucker.mod_navigation > ul.level_1 > li.trail > a {
    background: #333;
}

Background natürlich mit dem Bild ersetzen.
Falls du Weiterleitungen benutzt brauchst du ggf. auch noch:

#sucker.mod_navigation > ul.level_1 > li.trail > span {
    background: #333;
}

[Fkhm]

Interessant, bezieht er sich durch li.trail immer auf den vorherigen Befehl?
Langsam blicke ich da durch. Habe jetzt versucht mit

#sucker.mod_navigation > ul.level_1 > li.trail > a:hover {
background-color:darkred;
}

auch noch den oberen Menüpunkt dunkel zu färben wenn ich nur die Maus im Menü bewege, nur das hat noch nicht so ganz funktioniert. auch nicht mit a.hover.