Listen mit CSS - klappt nicht

  1. Der_Jan

    Der_Jan Thread StarterMacUser Mitglied

    Mitglied seit:
    06.01.2004
    Beiträge:
    609
    Zustimmungen:
    7
    Irgendwie klappt es mit meinem CSS-Menu nicht. Hier die Ausgangssituation. Nun möchte ich den Menüpunkt "Impressum" optisch anders (Schrift kleiner und rechtsbündig) gestalten, jedoch soll es Teil der Auflistung bleiben, also bündig mit den anderen Menüpunkten bleiben.

    Kann mir jemand einen Tipp geben, wie ich einzelne Menüpunkte individuell gestalten kann?

    Der CSS-Code...

    Code:
    #navigation 
    { 
    width: 16em; 
    border-top: 1px solid #efefef; 
    border-right: 1px solid #efefef; 
    padding: 0; 
    margin-bottom: 1em; 
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
    background-color: #fff; 
    color: #efefef; 
    } 
    
    #navigation ul 
    { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
    } 
    
    #navigation li 
    { 
    border-bottom: 1px solid #efefef; 
    margin: 0; 
    } 
    
    #navigation .subnav li 
    { 
    border-bottom: 1px solid #ffbb00; 
    margin: 0; 
    } 
    
    #navigation li a 
    { 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #ffbb00; 
    background-colasdfador: #ffbb00; 
    color: #afafasadffs; 
    text-decoration: none; 
    text-align: left;
    width: 100%; 
    } 
    
    #navigation li a 
    { 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #84B027; 
    background-color: #fff; 
    color: #afafaf; 
    text-decoration: none; 
    width: 100%; 
    } 
    
    html>body #navigation li a { width: auto; } 
    
    #navigation li a:hover 
    { 
    border-left: 10px solid #84B027; 
    border-right: 5px solid #84B027; 
    background-color: #fff; 
    color: #000; 
    } 
    ...und hier der HTML-Teil

    Code:
    <div id="navigation"> 
    <ul id="navlist"> 
    <li><a href="#">Rubrik 1</a></li> 
    <li><a href="#">Rubrik 2</a></li> 
    <li><a href="#">Rubrik 3</a></li> 
    <li><a href="#">Rubrik 4</a></li> 
    </ul> 
    </div>
    Für jeden Tipp dankbar! ;)

    Gruß
    Der Jan
     
    Der_Jan, 24.03.2006
  2. SilentBob

    SilentBobMacUser Mitglied

    Mitglied seit:
    01.02.2005
    Beiträge:
    360
    Zustimmungen:
    0
    Ich kann Dir nur zu 50% helfen. Mache in HTML so etwas:
    HTML:
    <li><a href="#" id="impressum">Rubrik 4</a></li> 
    In CSS kannst Du dann den Link mit dieser besonderen ID ansprechen:
    HTML:
    #impressum{
     font-size: 90%;
    }
    Dadurch ist es schon einmal kleiner. Aber mit dem rechtsbündig - mal abgesehen davon, dass ich das sehr ungewöhnlich und auch etwas verwirrend finde - kann ich nicht helfen. Ich hatte noch das hier in die CSS-Anweisung geschrieben:
    HTML:
    #impressum{
     font-size: 90%;
     text-align: right;
    }
    Aber leider funktioniert das nicht. :confused: Aber 50% sind ja schon einmal die halbe Miete. ;)
     
    SilentBob, 24.03.2006
  3. pks85

    pks85MacUser Mitglied

    Mitglied seit:
    16.07.2004
    Beiträge:
    1.157
    Zustimmungen:
    5
  4. boxi

    boxiMacUser Mitglied

    Mitglied seit:
    04.03.2005
    Beiträge:
    49
    Zustimmungen:
    7
    Moin,

    so gehts bei mir:

    Code:
    <html>  
    <head>  
    <style type=""text/css>
    #navigation 
    { 
    width: 16em; 
    border-top: 1px solid #efefef; 
    border-right: 1px solid #efefef; 
    padding: 0; 
    margin-bottom: 1em; 
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
    background-color: #fff; 
    color: #efefef; 
    } 
    
    #navigation ul 
    { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
    } 
    
    #navigation li 
    { 
    border-bottom: 1px solid #efefef; 
    margin: 0; 
    } 
    
    #navigation .subnav li 
    { 
    border-bottom: 1px solid #ffbb00; 
    margin: 0; 
    } 
    
    #navigation li a 
    { 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #ffbb00; 
    background-colasdfador: #ffbb00; 
    color: #afafasadffs; 
    text-decoration: none; 
    text-align: left;
    width: 100%; 
    } 
    
    #navigation li a 
    { 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #84B027; 
    background-color: #fff; 
    color: #afafaf; 
    text-decoration: none; 
    width: 100%; 
    } 
    
    #navigation li#impressum a
    { 
    text-align: right;
    font-size: 0.8em;
    }
    
    
    html>body #navigation li a { width: auto; } 
    
    #navigation li a:hover 
    { 
    border-left: 10px solid #84B027; 
    border-right: 5px solid #84B027; 
    background-color: #fff; 
    color: #000; 
    } 
    </style>
    </head>  
    <body>  
    <div id="navigation"> 
    <ul id="navlist"> 
    <li><a href="#">Rubrik 1</a></li> 
    <li><a href="#">Rubrik 2</a></li> 
    <li><a href="#">Rubrik 3</a></li> 
    <li id="impressum"><a href="#">Impressum</a></li> 
    </ul> 
    </div>
    
    </body>  
    </html>
    viele Grüße,
    boxi
     
    boxi, 24.03.2006
  5. Der_Jan

    Der_Jan Thread StarterMacUser Mitglied

    Mitglied seit:
    06.01.2004
    Beiträge:
    609
    Zustimmungen:
    7
    Hab mich wohl ungenau ausdrückt, deshalb ... neuer Anlauf ;)

    Ich habe zwei verschiedene, mit CSS definierte Auflistungen, die ich als Menu einsetzen will.

    Auflistung 1
    Auflistung 2

    Die "Rubrik 4" soll nun zwischen "Rubrik 3" und "Impressum" eingefügt werden (siehe Montage ). Okay, in Photoshop alles kein Problem, aber wie mach ich das mit HTML und CSS? Das Problem ist die Zusammenführung, das Verweben der beiden Programmierungen. Ich nehme an, dass es eigentlich einfach gehen müßte. Lediglich mein Fingerfertigkeit im Umgang mit CSS läßt halt zu wünschen übrig ;-)

    Any ideas?

    Danke!
    Der Jan
     
    Der_Jan, 24.03.2006
  6. hossa

    hossaMacUser Mitglied

    Mitglied seit:
    03.04.2005
    Beiträge:
    309
    Zustimmungen:
    0
    so gehts, noch bisschen aufgeräumt:

    Code:
    <html>  
    <head>  
    <link rel='stylesheet' type='text/css' href='beispiel.css'>
    </head>  
    <body>  
    <div id="navigation"> 
    <ul id="navlist"> 
    <li><a href="#">Rubrik 1</a></li> 
    <li><a href="#">Rubrik 2</a></li> 
    <li><a href="#">Rubrik 3</a></li> 
    <li><a href="#" class="impressum">Impressum</a></li> 
    </ul> 
    </div>
    
    </body>  
    </html>
    Code:
    #navigation 
    { 
    width: 16em; 
    border-top: 1px solid #efefef; 
    border-right: 1px solid #efefef; 
    padding: 0; 
    margin-bottom: 1em; 
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
    background-color: #fff; 
    color: #efefef; 
    } 
    
    #navigation ul 
    { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
    } 
    
    #navigation li 
    { 
    border-bottom: 1px solid #efefef; 
    margin: 0; 
    }
    
    #navigation li a 
    { 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #84B027; 
    background-color: #fff; 
    color: #afafaf; 
    text-decoration: none; 
    width: 100%; 
    }
    #navigation li a.impressum{
    	font-size: 60%;
    	text-align: right;
    	border-right: 5px solid #fff;
    }
    
    html>body #navigation li a { width: auto; } 
    
    #navigation li a:hover 
    { 
    border-left: 10px solid #84B027; 
    border-right: 5px solid #84B027; 
    background-color: #fff; 
    color: #000; 
    }
    
     
    hossa, 24.03.2006
  7. boxi

    boxiMacUser Mitglied

    Mitglied seit:
    04.03.2005
    Beiträge:
    49
    Zustimmungen:
    7
    dann würd ich ne verschachtelte Liste machen.
     
    boxi, 24.03.2006
  8. Der_Jan

    Der_Jan Thread StarterMacUser Mitglied

    Mitglied seit:
    06.01.2004
    Beiträge:
    609
    Zustimmungen:
    7
    N'abend,
    - das mit dem Verschachteln hat bei mir halt nicht geklappt, hab mich zwischen diversen id='' <div> und class='' verlaufen.
    @ hossa,boxi: Das ist der Durchbruch, jetzt klappts!!!

    Danke für eure Hilfe, so wirds klappen. Das Wochenende ist gerettet! :D

    Cheers,
    Der Jan
     
    Der_Jan, 24.03.2006
  9. mac-anfänger

    mac-anfängerMacUser Mitglied

    Mitglied seit:
    20.02.2004
    Beiträge:
    1.066
    Zustimmungen:
    0
    das würde etwa so aussehen:

    HTML:
    <ul id="navlist"> 
    <li><a href="#">Rubrik 1</a></li> 
    <li><a href="#">Rubrik 2</a>
    <ul id="subnavi">
    <li><a href="#">Rubrik 3</a></li>
    </ul>
    </li>  
    <li><a href="#" class="impressum">Impressum</a></li> 
    </ul>
     
    mac-anfänger, 24.03.2006
Die Seite wird geladen...