Listen mit CSS - klappt nicht

Dieses Thema im Forum "Web Page Design" wurde erstellt von Der_Jan, 24.03.2006.

  1. Der_Jan

    Der_Jan Thread Starter MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    7
    MacUser seit:
    06.01.2004
    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
     
  2. SilentBob

    SilentBob MacUser Mitglied

    Beiträge:
    361
    Zustimmungen:
    0
    MacUser seit:
    01.02.2005
    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. ;)
     
  3. pks85

    pks85 MacUser Mitglied

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

    boxi MacUser Mitglied

    Beiträge:
    34
    Zustimmungen:
    7
    MacUser seit:
    04.03.2005
    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
     
  5. Der_Jan

    Der_Jan Thread Starter MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    7
    MacUser seit:
    06.01.2004
    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
     
  6. hossa

    hossa MacUser Mitglied

    Beiträge:
    309
    Zustimmungen:
    0
    MacUser seit:
    03.04.2005
    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; 
    }
    
     
  7. boxi

    boxi MacUser Mitglied

    Beiträge:
    34
    Zustimmungen:
    7
    MacUser seit:
    04.03.2005
    dann würd ich ne verschachtelte Liste machen.
     
  8. Der_Jan

    Der_Jan Thread Starter MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    7
    MacUser seit:
    06.01.2004
    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
     
  9. mac-anfänger

    mac-anfänger MacUser Mitglied

    Beiträge:
    1.077
    Zustimmungen:
    0
    MacUser seit:
    20.02.2004
    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>
     
Die Seite wird geladen...