• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menu mit Pipe als Trennzeichen

L

lddd

Neues Mitglied
Hallo,

ich möchte meinem Menu gerne ein | als Trennzeichen geben mit etwas Abstand zum jeweils nächsten Element.
Dabei soll der Hintergrund und Textfarbe eines Links im Menu sich bei a:hover ändern.

Das Problem ist wenn ich border-right: 1px solid #666; nehme für mein Trennzeichen und dem ganzen noch
Padding gebe damit der Abstand stimmt der Hintergrund sich nicht komplett bis über die Trennzeichen
ausbreitet.

Hier mal ein Bild zur Veranschaung mit und ohne a:hover Status

menu.jpg


Danke für eure Hilfe.
 
Zuletzt bearbeitet:
Hmm ne bekomms irgendwie net richtig hin, hier mal mein CSS

#footer-nav li {
font:normal 16px/16px Arial, Verdana, Sans-Serif;
float:left;
margin: 0;
color: #676767;
border-right: 1px solid #353535;
padding: 0 2px 0 2px;
}

#footer-nav a:hover {
background: #353535;
}

#footer-nav a {
text-transform:uppercase;
text-decoration:none;
padding: 3px;
}
 
Ich vermute mal, dass du den hover-Effekt beim li angegeben hast? Ähnlich: ul li:hover { background-color: #666; }

Dann ist es klar. Wenn du aber den hover-Effekt beim a-T angibst, dann sollte es gehen:
Code: 
ul { list-style-type: none; }

ul li {
   display: inline;
   margin-right: 30px;
   border-right: 1px solid #000;
   padding-right: 30px;
}

ul li:last-child {   /* kein Trennzeichen beim letzten Element */
   margin: 0;
   padding: 0;
   border: 0;
}

ul li.last {   /* Fallback fuer Browser ohne CSS3 Support */
   margin: 0;
   padding: 0;
   border: 0;
}

ul li a:hover { background-color: #666; }
 
Über das Trennzeichen? Wie soll das gehen? Du gibst das Trennzeichen doch als border an. Den Rand kannst du nicht "übermalen" :) (siehe Boxmodell)

Hast du eventuell einen Link zu deiner Seite, oder zu einer Seite wo zu live sehen was du meinst?
 
Btw, bekomm ich den Border irgendwie noch etwas kleiner in der Höhe?
Ich habs mit line-height und height: probiert doch das haut irgendwie nicht hin.
Wäre schön wenn ich den Border auf die Height des Textes bekommen würde.
 
Habe nun auch background-image benutzt, allerdings weiß ich nun nicht wie ich das ganze noch mit "active states" ausstatte. Habs versucht aber mein Code funktioniert leider nicht für Ie7, und das sollte er

Hier mal mein Beispiel für "About"
HTML: 
<body id="about">

       <!-- start #footer-nav --> 
       <nav id="footer-nav">
          <ul>
            <li class="news"><a href="news.html">News</a></li>       
            <li class="about"><a href="about.html">Über Uns</a></li>    
            <li class="technology"><a href="#">Technologie</a></li> 
            <li class="press"><a href="presse.html">Presse</a></li>
          </ul></nav>

#footer-nav { 
    margin:0 0 0 15px;
    float:left; 
}
    #footer-nav li { 
        float: left;
        list-style: none; 
    }
    
    #footer-nav li a { 
        display:block;
        text-align: center;
        background: url('../img/interface/sep.jpg') left no-repeat;
        font:normal 16px/16px Arial, Verdana, Sans-Serif;
        text-transform:uppercase;
        text-decoration:none;    
        color: #353535;    
        padding: 2px 10px 2px 10px;
        }
        
    #footer-nav a:hover { 
        background:#353535;
        color:#fff; 
    }
    
    #footer-nav li:hover + li a { 
        background:none; 
    }

    /* First Child */
    #footer-nav .news a { 
        background:none;
    }
    
    #footer-nav .news a:hover { 
        background:#353535;
        color:#fff; 

/**
 * = Footer Navigation Active States
 */

#about #footer-nav .about a {
    background: #353535;
    color:#fff;
}

#about #footer-nav .technology a {
    background: none;
}
    }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben