Horizontales Menu mit runden Ecken hover Problem

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

Anhänge

  • screen.jpg
    screen.jpg
    5,2 KB · Aufrufe: 62
  • nav-divider.gif
    nav-divider.gif
    58 Bytes · Aufrufe: 559
  • nav-bg-no.gif
    nav-bg-no.gif
    161 Bytes · Aufrufe: 558
  • nav-bg-act.gif
    nav-bg-act.gif
    105 Bytes · Aufrufe: 557
  • nav-end-act.gif
    nav-end-act.gif
    941 Bytes · Aufrufe: 562
  • nav-start-act.gif
    nav-start-act.gif
    239 Bytes · Aufrufe: 561
  • nav-end-no.gif
    nav-end-no.gif
    960 Bytes · Aufrufe: 563
  • nav-start-no.gif
    nav-start-no.gif
    256 Bytes · Aufrufe: 563
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? :suspekt:

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 ;-)

CSS: 
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: 
<!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
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück