✔ Menü

Hallo Maik,

danke für Deine prompte - wie immer völlig korrekte-superschnelle Antwort.

Den html-Fehler habe ich leider übersehen.-(

Ich wünsche Dir einen tollen Tag
Vio
 
Hallo,

ich noch einmal.

Habe das Menü umgebaut.
Jetzt soll aber nach oben und bei einem Menüpunkt ein Border.
Und bei nicht anklcikbaren Links soll auch die .gif Datei bei Hover nicht vorhanden sein.
Weiterhin fehlt mir noch ein Abstand zwischen
li ul li ul li a span
und
li ul li a span

Mhm. Komme leider nicht weiter. Kann jemand helfen?
HTML: 
<li class="firstLink"><a href="actualite.html" target="_self"
><span>ActualitÉs</span></a></li>
          <li><a span>RÉALISATIONs</span></a>
                 <ul>
                      <li><a
href="#"><span>Expositions</span></a></li>
                      <li><a href="#"><span>Affiches</span></a></li>
                      <li><a 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 class="firstLink" href="clients.html"
target="_self"><span>Clients</span></a></li>
          <li><a href="atelier.html"
target="_self"><span>Atelier</span></a></li>
      </ul>
</div></div>

Code: 
}
#menue1 ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                width: 160px; /* Width of Menu Items */ text-transform:uppercase;
}
#menue1 li{
                margin:0;
                position:relative; line-height: 14px;
}
#menue1 a {
                display:block;
                padding-right:12px;
                color:#000;
                text-decoration:none;
                font-weight:bold;
                font-size:11px;
}
#menue1 a span {
                border-bottom:solid #000 1px;
                display:block;
                padding: 3px 0;
                letter-spacing: 1px; margin-bottom: 2px;
}
#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;
				text-transform:none;
				
}
#menue1 li ul li a span { border: none; letter-spacing: 0px; line-height:11px; margin-top:2px;}


#menue1 li ul li ul li a span {
                border: none; letter-spacing: 0px; line-height:5px; 
}
#menue1 li ul li a:hover { /* betrifft alle a-Tags im Untermenü*/
                color: #000;
                letter-spacing:0;
                font-weight: normal;
}

.firstLink {
                border-top:solid #000 1px; padding: 3px 0; 
}

Danke
Vio
 
Und wo ist das Problem?

Wie sieht denn dein erfolgloser Versuch aus, dies in die Praxis umzusetzen?

Ich frag nur, weil dieses Forum kein Wunschkonzert ist, wo man alles auf dem Silbertablett serviert bekommt.

Übrigens hast du da einen unvollständigen HTML- und CSS-Code gepostet. Dürfen wir nun raten, wie der Rest lautet?

Zu der Formatierung des HTML-Codes gegenüber meiner zuletzt geposteten Variante sag ich jetzt mal nichts.

mfg Maik
 
Hallo Maik,

ich habe diese Formatierungen geteilt
#menue1 li ul li a span { border: none; letter-spacing: 0px; line-height:11px; margin-top:2px;}


#menue1 li ul li ul li a span {
border: none; letter-spacing: 0px; line-height:5px;
}

und habe die line-height geändert. Dann habe ich die margins/paddings variiert - ohne befriedigendes Ergebnis.

Die nicht klickbaren Menüpunkte habe ich vom Link entfernt.
Dann habe ich es beim hover Befehl ohne background probiert.

:-(
Vio
 
Vielleicht stellst du dir das so vor.

Ich greife hier jetzt auf meinem zuletzt geposteten Code zurück:

HTML: 
<div id="menue1">
     <ul>
         <li><a href="actualites.html" target="_self"><span>ActualitÉs</span></a></li>
         <li><span class="noLink">RÉALISATIONs</span><!-- kein klickbarer Link -->
                <ul>
                     <li><a href="#"><span>Expositions</span></a></li>
                     <li><a href="#"><span>Affiches</span></a></li>
                     <li><span class="noLink">Édition</span><!-- kein klickbarer Link -->
                            <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;
                border-right:1px solid red;
}
#menue1 ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                width: 142px; 
                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-top:solid #000 1px; /* oberer Rahmen */
                display:block;
                padding: 3px 0;             
}
#menue1 span.noLink {  /* Ersetzt den nicht klickbaren Link */
                display:block;
                margin-right:12px;
                font-size:11px;
}
#menue1 a:hover  {
                background: url(bullet.gif) no-repeat right;
}
#menue1 li ul li a { 
                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 { 
                color: #000;
                letter-spacing:0;
                font-weight: bold;
}

mfg Maik
 
2504 hat gesagt.:
Weiterhin fehlt mir noch ein Abstand zwischen
li ul li ul li a span
und
li ul li a span
Zum Vergrößern anklicken....
Hab ich doch glatt vergessen.

Meinst du so?
CSS: 
#menue1 li{
                margin:5px 0; /* Außenabstand oben/unten u. links/rechts */
                position:relative;
}

Oder vielleicht eher so?
CSS: 
#menue1 ul li ul,
#menue1 ul li ul li ul {
                margin-top:10px;
}

mfg Maik
 
Danke für Deine Anregung.
Das war es noch nicht, aber ich probiere weiter.
Ich wünsche einen schönen Abend.
Vio
 
Na denn, du weißt ja schließlich besser, wie du dir das im Detail konkret vorstellst.

Den Weg dorthin habe ich dir aufgezeigt.

mfg Maik
 
Guten Morgen Maik,

ja, vielen lieben Dank dafür.

Jetzt bin ich gerade dabei, das dann für den Mac kompatibel zu machen, für den PC habe ich es so, wie es aussehen soll.

Also danke noch einmal.

Viola
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück