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/cs...tion-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:

HTML-Code:

#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:

HTML-Code:

<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...

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

Hi,

danke schonmal für die Info.

Ich habe das HTML nun wie folgt geändert:

Code :

1 2 3 4 5 6 7 8 9 10

<ul> [COLOR="Red"]<li id="leftcorner"><[/COLOR]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> [COLOR="red"]<li id="rightcorner"><[/COLOR]a href="#">Menuepunkt 7</a></li> </ul> </div>

Im CSS entsprechend folgendes:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

#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; }   [COLOR="red"]#hauptmenu ul li a:hover#leftcorner a{ background: url(images2/nav-start-act.gif) top left no-repeat; }[/COLOR]     #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; }   [COLOR="red"]#hauptmenu ul li a:hover#rightcorner a{ padding-right: 10px; background: url(images2/nav-end-act.gif) top right no-repeat; }[/COLOR]     #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?

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

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?

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

HTML-Code:

#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...

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

HTML-Code:

#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

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?

Code :

1 2 3 4 5 6 7 8 9

#hauptmenu ul [B]li#leftcorner[/B]{ float: none; padding-left: 10px; padding-right: 0px; background: url([B]images2/nav-start-no.gif[/B]) top left no-repeat; } #hauptmenu ul li#leftcorner [b]a:hover[/b]{ background: url([B]images2/nav-start-act.gif[/B]) 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:

Code css:

1 2 3

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

mfg Maik

Hi Maik,

ich bedanke mich auf jeden Fall für Deine Hilfe und möchte mich auch für mein Unvermögen entschuldigen. Leider bekomm ich es nicht hin, so dass ich mich dazu entschliesse das ganze sein zu lassen. Hat so echt keinen Wert, das wird alles nix. Nehm dann halt ein 0815 Menü...

Danke nochmals für Deine Hilfe und Deine Geduld...

Hi,

ich habe den bisherigen Entwurf einfach mal verworfen und komplett neu angefangen. Folgendes habe ich bereits geschafft:

HTML-Code:

<ul>
<li><a href="#">Menuepunkt 1</a></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>
</ul>

CSS:

HTML-Code:

ul {
list-style-type: none;
background-image: url(images2/nav-bg-no.gif);
height: 42px;
margin: auto;
}

li {
float: left;
}

ul a {
background-image: url(images2/nav-divider.gif);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 42px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #371C1C;
}

li:hover
	{
	background-image: url(images2/nav-bg-act.gif);
	}

Wie kann ich nun weitermachen damit ich links und rechts die runden Ecken realisiert bekomme, die zudem beim hover sich einfärben. Falls es hilfreich ist habe ich die Grafiken auch einmal als anlage angehängt. Ich habe absichtlich noch keine IDs oder Klassen für links und rechts gesetzt, da ich es nicht verhunzen und Euch vorher um Rat bitten wollte.

Wäre echt stark wenn wir es hinbekommen könnten

Hi,

warum fragst du, wie's nun weitergeht, damit das Menü zunächst mal seinen linken und rechten Eck-Hintergrund erhält, wo du doch im Besitz einer funktionstüchtigen Menü-Vorlage bist, und sie jetzt offensichtlich "Step-by-Step" nachbauen willst?

Wollen wir das gestrige Spiel also doch nochmal von vorne anpfeifen?

Gut, dann geb ich dir jetzt für die linke Ecke eine Steilvorlage, die ich einfach aus der Breitendimension deiner angehängten Grafiken (im speziellen "nav-start-xxx.gif") hergeleitet habe, ohne sie mit deinem übrigen Quellcode lokal im Browser testen zu müssen

Code css:

1 2 3 4 5 6 7 8 9 10 11 12

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

Die rechte Flanke überlasse ich dir zum Üben und Lernen.

Ein Tipp: Mein CSS zu kopieren und darin alles entsprechend für die rechte Ecke umzubenennen, führt dich so nicht direkt zum Erfolg.

mfg Maik

Hi,

seit über drei Wochen keine Wortmeldung mehr von dir, obwohl du u.a. heute und erst vor zwei Stunden noch im Forum aktiv gewesen bist?

Na, dann lös' ich hier nun mal abschließend das Rätsel auf, damit zukünftige Hilfesuchende in diesem Thema auch ein vollständiges Lösungsbeispiel vorfinden, da von deiner Seite offensichtlich nicht mehr damit zu rechnen ist.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-06-24" />

<title>tutorials.de | Horizontales Menu mit runden Ecken hover Problem</title>

<style type="text/css">
/* <![CDATA[ */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(images2/nav-bg-no.gif);
height: 42px;
float: left;
}
ul li {
float: left;
}
ul li a {
background-image: url(images2/nav-divider.gif);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 42px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #371C1C;
}
ul li:hover {
background: url(images2/nav-bg-act.gif) repeat-x;
}
/* linke Ecke */
ul li#leftcorner a { 
margin-left:6px; 
}
ul li#leftcorner {
background: url(images2/nav-start-no.gif) left top no-repeat;
}
ul li#leftcorner:hover {
background: url(images2/nav-start-act.gif) left top no-repeat;
}
ul li#leftcorner:hover a {
background: url(images2/nav-bg-act.gif) repeat-x;
}
/* rechte Ecke */
ul li#rightcorner  {
background: url(images2/nav-end-no.gif) right top no-repeat;
}
ul li#rightcorner a { 
background-image: none; 
margin-right: 6px; 
}
ul li#rightcorner:hover {
background: url(images2/nav-end-act.gif) right top no-repeat;
}
ul li#rightcorner:hover a {
background: url(images2/nav-bg-act.gif) repeat-x;
}
/* ]]> */
</style>

</head>
<body>

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

</body>
</html>

Im Anhang findet sich das Dokument inkl. der Grafikdateien.

mfg Maik