Horizontales Menu mit runden Ecken hover Problem

[brainsucker]

Hallo zusammen,

ich baue mir gerade ein CSS - Horizontal - Menu bei dem jeweils der äußerst linke und rechte Menüpunkt über abgerundete Ecken verfügen soll. Einen Screenshot wie das Ganze aussehen soll, habe ich den Anhang gepackt. Als Grundlage verwende ich dieses Menü hier: http://www.dynamicdrive.com/style/csslibrary/item/cf-navigation-menu/P30/ Prinzipiell funktioniert das ja auch, nur bekomme ich es nicht hin die Hintergrundgrafik bei den äußeren Menüpunkten bei einem hover auszutauschen. Stattdessen tauscht er mir nur ein Teil der Grafik aus, nämlich die der runden Ecke.

Hier ist mein Code dazu:

#hauptmenu{
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#4e4e4e;
}

#hauptmenu ul{
background: url(images2/nav-bg-no.gif) repeat-x;
padding: 0;
margin: 0;
float: left;

}

#hauptmenu ul li{
display: inline;
}


#hauptmenu ul li a, #hauptmenu ul li span{
float: left;
color: black;
font-weight: bold;
padding: 15px 10px 25px 10px;
text-decoration: none;
background: url(images2/nav-divider.gif) top right no-repeat;
}

#hauptmenu ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#hauptmenu ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images2/nav-start-no.gif) top left no-repeat;
}
#hauptmenu ul li a:hover#leftcorner{
background: url(images2/nav-start-act.gif) top left no-repeat;
}

#hauptmenu ul li a#rightcorner{
padding-right: 10px;
background: url(images2/nav-end-no.gif) top right no-repeat;
}

#hauptmenu ul li a:hover#rightcorner{
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}

#hauptmenu ul li a:hover{
text-decoration: underline;
background: url(images2/nav-bg-act.gif) repeat-x;
color:#CCCCCC;
}

Und hier das HTML Gerüst:

<div id="hauptmenu">
<ul>
<li><span><a href="#" id="leftcorner">Menuepunkt 1</a></span></li>
<li><a href="#">Menuepunkt 2</a></li>
<li><a href="#">Menuepunkt 3</a></li>
<li><a href="#">Menuepunkt 4</a></li>
<li><a href="#">Menuepunkt 5</a></li>
<li><a href="#">Menuepunkt 6</a></li>
<li><a href="#" id="rightcorner">Menuepunkt 7</a></li>
</ul>
</div>

Könnt Ihr mir helfen das Problem zu lösen? Bin natürlich auch für sonstige Verbesserungsvorschläge offen...

 

[Maik]

Moin,

dir fehlt ein weiterer Selektor mit der :hover-Pseudoklasse, um das zweite Hintergrundbild der äußeren Menüpunkte zu tauschen.

Wie sich zwei Hintergrundbilder in einem Menüpunkt tauschen lassen, habe ich einst in dem Thema Problem mit Menübutton erörtert.

Demnach würde das Hintergrundbild des <span>-Elements stattdessen für das <li>-Element deklariert werden. Hierfür rufst du die ID-Bezeichner #leftcorner und #rightcorner nicht mehr im <a>-Element, sondern im <li>-Element auf, damit diese Regeln nicht für alle <li>-Elemente gelten.

Die dazugehörigen :hover-Selektoren kannst du aus meinem zweiten Beitrag ableiten.

mfg Maik

 

[brainsucker]

Hi,

danke schonmal für die Info.

Ich habe das HTML nun wie folgt geändert:

<ul>
<li id="leftcorner"><span><a href="#">Menuepunkt 1</a></span></li>
<li><a href="#">Menuepunkt 2</a></li>
<li><a href="#">Menuepunkt 3</a></li>
<li><a href="#">Menuepunkt 4</a></li>
<li><a href="#">Menuepunkt 5</a></li>
<li><a href="#">Menuepunkt 6</a></li>
<li id="rightcorner"><a href="#">Menuepunkt 7</a></li>
</ul>
</div>

Im CSS entsprechend folgendes:

#hauptmenu{
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#4e4e4e;
}

#hauptmenu ul{
background: url(images2/nav-bg-no.gif) repeat-x;
padding: 0;
margin: 0;
float: left;

}

#hauptmenu ul li{
display: inline;
}


#hauptmenu ul li a, #hauptmenu ul li span{
float: left;
color: black;
font-weight: bold;
padding: 15px 10px 25px 10px;
text-decoration: none;
background: url(images2/nav-divider.gif) top right no-repeat;
}

#hauptmenu ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#hauptmenu ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images2/nav-start-no.gif) top left no-repeat;
}
#hauptmenu ul li a:hover#leftcorner{
background: url(images2/nav-start-act.gif) top left no-repeat;
}

#hauptmenu ul li a:hover#leftcorner a{
background: url(images2/nav-start-act.gif) top left no-repeat;
}


#hauptmenu ul li a#rightcorner{
padding-right: 10px;
background: url(images2/nav-end-no.gif) top right no-repeat;
}

#hauptmenu ul li a:hover#rightcorner{
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}

#hauptmenu ul li a:hover#rightcorner a{
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}


#hauptmenu ul li a:hover{
text-decoration: underline;
background: url(images2/nav-bg-act.gif) repeat-x;
color:#CCCCCC;
}

Leider habe ich damit mehr Probleme als vorher. Das Ergebnis ist im Anhang. Was habe ich falsch gemacht?

 

[Maik]

Auffällig ist mit einem Blick, dass du meinen Ratschlag aus dem empfohlenen Thema in deinem CSS überhaupt nicht umgesetzt hast, und die beiden ID-Bezeichner laut deinem neuen HTML-Code im Stylesheet nun nicht mehr für das <a>-Element, sondern für das <li>-Element zu gelten haben.

mfg Maik

 

[brainsucker]

Hi Maik,

ich verstehs grad leider gar nicht. Habe jetzt noch ein wenig damit ausprobiert, möchte aber natürlich nicht jeden Fehlversuch hier posten. Natürlich möchte ich hier keine Lösung vorgekaut bekommen, allerdings hilft es mir in dem Fall vielleicht doch, wenn du mir im CSS Code ein wenig unter die Arme greifen und zeigen könntest was genau Du meinst?

 

[Maik]

Auf jeden Fall mußt du zunächst mal in den einzelnen Selektoren die ID-Bezeichner hinter den <a>-Elementen entfernen, und sie stattdessen nach den <li>-Elementen notieren, denn die beiden äußeren besitzen sie nun in deinem HTML-Code, und nicht mehr, wie im Originalmenü, die <a>-Elemente.

mfg Maik

 

[brainsucker]

#hauptmenu{
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#4e4e4e;
}

#hauptmenu ul{
background: url(images2/nav-bg-no.gif) repeat-x;
padding: 0;
margin: 0;
float: left;

}

#hauptmenu ul li{
display: inline;
}


#hauptmenu ul li #hauptmenu a,  ul li span{
float: left;
color: black;
font-weight: bold;
padding: 15px 10px 25px 10px;
text-decoration: none;
background: url(images2/nav-divider.gif) top right no-repeat;
}

#hauptmenu ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#hauptmenu ul li #leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images2/nav-start-no.gif) top left no-repeat;
}
#hauptmenu ul li #leftcorner a:hover{
background: url(images2/nav-start-act.gif) top left no-repeat;
}

#hauptmenu ul li #leftcorner a:hover a{
background: url(images2/nav-start-act.gif) top left no-repeat;
}


#hauptmenu ul li #rightcorner{
padding-right: 10px;
background: url(images2/nav-end-no.gif) top right no-repeat;
}

#hauptmenu ul li #rightcorner a:hover{
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}

#hauptmenu ul li #rightcorner a:hover a{
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}


#hauptmenu ul li a:hover{
text-decoration: underline;
background: url(images2/nav-bg-act.gif) repeat-x;
color:#CCCCCC;
}

schlimmer als vorher :-( Ich kapiers nicht...

 

[Maik]

Tja, dein Problem dürfte hierbei wohl sein, dass der durchgehende Hintergrund des <ul>-Elements Bestandteil der Menüpunkte ist.

Außerdem hast du nun zwischen dem li-Element und den ID-Bezeichnern ein Leerzeichen notiert, womit ein ganz anderer Selektor definiert wird, wie es bei dir im Markup tatsächlich der Fall ist.

Und was du mit "... a:hover a" erzielen willst, weißt wohl nur du selbst, denn im HTML-Code folgt in dem <a>-Element überhaupt kein weiteres <a>-Element.

Wie mir scheint, solltest du dich mal mit den Selektoren näher beschäftigen, und dir hier gewisse Kenntnisse aneignen.

mfg Maik

 

[brainsucker]

#hauptmenu{
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#4e4e4e;
}

#hauptmenu ul{

padding: 0;
margin: 0;
float: left;

}

#hauptmenu ul li{
display: inline;
background: url(images2/nav-bg-no.gif) repeat-x;
}


#hauptmenu ul li #hauptmenu a,  ul li span{
float: left;
color: black;
font-weight: bold;
padding: 15px 10px 25px 10px;
text-decoration: none;
background: url(images2/nav-divider.gif) top right no-repeat;
}

#hauptmenu ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#hauptmenu ul li#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images2/nav-start-no.gif) top left no-repeat;
}
#hauptmenu ul li#leftcorner a:hover{
background: url(images2/nav-start-act.gif) top left no-repeat;
}

#hauptmenu ul li#leftcorner a:hover {
background: url(images2/nav-start-act.gif) top left no-repeat;
}


#hauptmenu ul li#rightcorner{
padding-right: 10px;
background: url(images2/nav-end-no.gif) top right no-repeat;
}

#hauptmenu ul li#rightcorner a:hover{
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}

#hauptmenu ul li#rightcorner a:hover {
padding-right: 10px;
background: url(images2/nav-end-act.gif) top right no-repeat;
}


#hauptmenu ul li a:hover{
text-decoration: underline;
background: url(images2/nav-bg-act.gif) repeat-x;
color:#CCCCCC;
}

So habe die Leerzeichen rausgeworfen, das überflüssige a sowie das backgroundimage von ul nach ul li verlagert. Ergebnis ist aber ne Katastrophe :-(

 

[Maik]

Tut mir leid, wenn du die Logik und Syntax der Selektoren noch immer nicht verstanden kannst, obwohl ich dir heute Morgen ein Thema empfohlen habe, woraus du den ganzen Tag über deine Lehre hättest ziehen können, kann ich dir auch nicht mehr weiterhelfen.

Oder welchen Sinn soll beispielsweise das hier ergeben, wenn offensichtlich das Hintergrundbild des <li>-Elements getauscht werden soll, sobald es mit der Maus überfahren wird?

#hauptmenu ul li#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(images2/nav-start-no.gif) top left no-repeat;
}
#hauptmenu ul li#leftcorner a:hover{
background: url(images2/nav-start-act.gif) top left no-repeat;
}

In einem Selektor lässt sich über das Kindelement nunmal keine Formatierung für sein Elternelement vornehmen.

Ohne jetzt die konkrete Zusammensetzung deiner einzelnen Grafikdateien überhaupt im Detail zu kennen, sprich welcher grafische Bestandteil der Menüpunkte darin jeweils enthalten ist, müsste der zweite Selektor stattdessen so lauten:

#hauptmenu ul li#leftcorner:hover{
background: url(images2/nav-start-act.gif) top left no-repeat;
}

mfg Maik