✔ Menü

2

2504

Grünschnabel
Hallo,

ich komme bei einem Menü nicht weiter.

Folgenden Code habe ich:
html
HTML: 
<div id="menuestartseite">
<ul>
<li class="first"><a href="#">ENTREZ</a></li>
<li><a href="#">WILLKOMMEN</a></li>
</ul>
css
Code: 
#menuestartseite {
top: 283px;
padding:0 0 0 0;
width: 231px;
 text-align: right;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:12px; font-weight:bold;
}

#menuestartseite ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 231px; /* Width of Menu Items */
	}
#menuestartseite li{
	margin: 0;
	padding: 3px 0 3px 0;
	position: relative;
	border-bottom: solid #000000 1px; }
	
#menuestartseite ul li a, #menuestartseite ul li a:visited #menuestartseite ul li a:hover {	
		color:#000000; border: none; text-decoration: none;}

.first {border-top: solid #000000 1px; background: url(bullet.gif) no-repeat right;
}

Eigentlich soll das Bullet ausserhalb des Menüs, wie im anliegenden Bild.
Komme irgendwie nicht weiter, kann jemand helfen?

Vielen Dank.
 

Anhänge

  • menue.jpg
    menue.jpg
    11,8 KB · Aufrufe: 18
Hi,

außerhalb des Anzeigebereichs eines HTML-Elements (in deinem Fall das <li>-Element) lässt sich ein Hintergrundbild nicht sichtbar anordnen.

Es lassen sich aber die Rahmenformatierungen auf die inneren <a>-Elemente anwenden, und mit einem rechten Außenabstand wird der benötigte Raum geschaffen, die Bulletgrafik neben dem Link zu platzieren.

Vom Prinzip her würde das Ganze dann so lauten:
HTML: 
<div id="menuestartseite">
     <ul>
         <li class="firstItem"><a class="firstLink" href="#">ENTREZ</a></li>
         <li><a href="#">WILLKOMMEN</a></li>
     </ul>
</div>
CSS: 
#menuestartseite li{
                margin:0;
                position:relative;
}
#menuestartseite ul li a,
#menuestartseite ul li a:visited,
#menuestartseite ul li a:hover {
                color:#000;
                text-decoration:none;
                border-bottom:solid #000 1px;
                display:block;
                margin-right:15px; /* der margin-right-Wert ist von mir hier frei gewählt, und muß ggfs.noch  angeglichen werden */
                padding:3px 0;
}
.firstLink {
                border-top:solid #000 1px;
}
.firstItem {
                background:url(bullet.gif) no-repeat right;
}


mfg Maik
 
Hi Maik,

vielen Dank, das war genial!

Und vor allem seeeehr schnell!
Jetzt komme ich weiter und das ist super.

Schönen Jahreswechsel.
 
Hallo,

ersteinmal gesundes Neues!


Mhm, wie bekomme ich das Ganze als mouseover hin?
Also normalerweise a:hover?

Vielen Dank.
 
Hi,

wünsche dir auch ein gutes neues Jahr! :)

Zielst du mit deiner Frage auf den Tausch der Bullet-Grafik beim Überfahren des Menüpunktes ab?

In meinem vorgeschlagenen Code funktioniert dies so:
CSS: 
.firstItem:hover {
                background: url(bullet_hover.gif) no-repeat right;
}

mfg Maik
 
Hallo Maik,

nein, die Grafik soll als Mouseover erscheinen, d.h. beim Überfahren von Willkommen oder Entrez.
Zusätzlich auch da, wo man in der Navigation ist (so wie ich es jetzt habe).

Geht das?

Danke
Vio
 
Achso, die Menüpunkte besitzen, entgegen deinem eingangs gezeigten Code, zunächst keine Bullet-Grafik, und sie soll angezeigt werden, wenn die Menüpunkte überfahren werden?

Dann funktioniert das einfach so:
CSS: 
li:hover {
                background: url(bullet.gif) no-repeat right;
}

mfg Maik
 
Hallo Maik,

ja - das hover und mouseover dasselbe ist, weiss ich :)

Ich habe jetzt beide Varianten eingesetzt, danke, es geht super ;-)

Schönen Abend von
Vio
 
Hallo,

noch einmal ich, und zwar mit dem li:hover im submenü.

Das erscheint jetzt aufgrund der li:hover doppelt. Wie kann ich das bitte abstellen?

HTML: 
<div id="menue1">
     <ul>
         <li><a href="actualites.html" target="_self" class="firstLink">ActualitÉs</a></li>
         <li><a href="realisations.html" target="_self">R&Eacute;ALISATIONs</a>
		 <ul><li><a href="#">Expositions</a></li>
<li><a href="#">Affiches</a></li>
<li><a>Édition</a>
  <ul>
<li><a href="#">/ catalogues</a></li>
<li><a href="#">/ beaux livres</a></li>
<li><a href="#">/ sciences</a></li></ul>
<li><a href="#">Identité</a></li>
<li><a href="#">Miscellanées</a></li>
<li><a href="#">Signalétique</a></li>
<li><a href="#">Sites web</a></li>
		 </ul>
		 
		 
		 
		 </li>
		  <li><a href="clients.html" target="_self">Clients</a></li>
		   <li><a href="atelier.html" target="_self">Atelier</a></li>
     </ul>
</div>

Code: 
/*First menue - Oberes Menue */

#menue1 {
padding:0 0 0 0;
width: 142px;
 text-align: right;
 font-family:Georgia, "Times New Roman", Times, serif;
 
}

#menue1 ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 142px; /* Width of Menu Items */ text-transform:uppercase;

	}

#menue1 li{
                margin:0;
                position:relative;
}
#menue1 ul li a,
#menue1 ul li a:visited,
#menue1 ul li a:hover {
                color:#000;
                text-decoration:none;
                border-bottom:solid #000 1px;
                display:block;
                margin-right:12px; /* der margin-right-Wert ist von mir hier frei gewählt, und muß ggfs.noch  angeglichen werden */
                padding: 3px 0;
				letter-spacing: 1px;font-size:11px; font-weight:bold;
}

#menue1 li:hover {
                background: url(bullet.gif) no-repeat right;
}

#menue1 li ul li a {  
  /* betrifft alle a-Tags im Untermenü*/
   color: #333333; letter-spacing:0; border: hidden; font-weight: normal; font-size: 11px;
  }
  #menue1 li ul li a:hover {  
  /* betrifft alle a-Tags im Untermenü*/
   color: #000; letter-spacing:0; border: hidden; font-weight: bold;
  }

Vielen Dank.

Vio
 
Moin,

da hier mittlerweile eine verschachtelte Liste mit mehreren Menüebenen vorliegt, was offensichtlich zum Konflikt mit den <li>-Nachfolgerelementen innerhalb der Submenüs führt, empfehle ich diese Umgestaltung, um stattdessen die "Bullet-Grafik" für das <a>-Element einzublenden. Hierfür wird nun die Rahmenformatierung auf das hinzugefügte <span>-Element angewendet.

HTML: 
<div id="menue1">
     <ul>
         <li><a href="actualites.html" target="_self"><span>ActualitÉs</span></a></li>
         <li><a href="realisations.html" target="_self"><span>RÉALISATIONs</span></a>
                <ul>
                     <li><a href="#"><span>Expositions</span></a></li>
                     <li><a href="#"><span>Affiches</span></a></li>
                     <li><a href="#"><span>Édition</span></a>
                            <ul>
                                <li><a href="#"><span>/ catalogues</span></a></li>
                                <li><a href="#"><span>/ beaux livres</span></a></li>
                                <li><a href="#"><span>/ sciences</span></a></li>
                            </ul>
                     </li>
                     <li><a href="#"><span>Identité</span></a></li>
                     <li><a href="#"><span>Miscellanées</span></a></li>
                     <li><a href="#"><span>Signalétique</span></a></li>
                     <li><a href="#"><span>Sites web</span></a></li>
                </ul>
         </li>
         <li><a href="clients.html" target="_self"><span>Clients</span></a></li>
         <li><a href="atelier.html" target="_self"><span>Atelier</span></a></li>
     </ul>
</div>
CSS: 
#menue1 {
                padding:0 0 0 0;
                width: 142px;
                text-align: right;
                font-family:Georgia, "Times New Roman", Times, serif;
}
#menue1 ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                width: 142px; /* Width of Menu Items */ 
                text-transform:uppercase;
}
#menue1 li{
                margin:0;
                position:relative;
}
#menue1 a {
                display:block;
                padding-right:12px;
                color:#000;
                text-decoration:none;
                font-weight:bold;
                font-size:11px;
                letter-spacing: 1px;
}
#menue1 a span {
                border-bottom:solid #000 1px;
                display:block;
                padding: 3px 0;
}
#menue1 a:hover  {
                background: url(bullet.gif) no-repeat right;
}
#menue1 li ul li a { /* betrifft alle a-Tags im Untermenü*/
                color: #333333;
                letter-spacing:0;
                font-weight: normal;
                font-size: 11px;
}
#menue1 li ul li a span,
#menue1 li ul li ul li a span {
                border: none;
}
#menue1 li ul li a:hover { /* betrifft alle a-Tags im Untermenü*/
                color: #000;
                letter-spacing:0;
                font-weight: bold;
}

Übrigens hast du in deinem HTML-Code das zweite Submenü nicht ordnungsgemäß mit dem schliessenden </li>-Tag für den Menüpunkt "Édition" beendet.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück