Anzeige

[CSS]horizontale Listennavi

[CSS]horizontale Listennavi | PSD-Tutorials.de

Erstellt von Askalon, 21.10.2005.

  1. Askalon

    Askalon Aktives Mitglied

    Dabei seit:
    20.12.2004
    Beiträge:
    312
    Ort:
    München
    [CSS]horizontale Listennavi
    HI
    an alle CSS-Freaks
    jetzt hab ich mich mal an einer CSS Navi versucht.
    Vertikal funktioniert sie wunderbar, aber alle Tips diverser Tutorials wie ich daraus eine horizontale Navigation mache(display:inline), hauen nicht hin.

    der Quellcode:
    Code (Text):
    1.  
    2. <body>
    3.  
    4. <div class="main"> <div id="navigation">
    5. <ul>
    6. [*][url="#"]Show[/url]
    7. [*][url="#"]Auftritte[/url]
    8. [*][url="#"]Bilder[/url]
    9. [*][url="#"]G&ste[/url]
    10. [*][url="#"]Impressum[/url]
    11. [*][url="#"]Links[/url]
    12. [/list]
    13. </div>[img]grafik/banner.jpg[/img]
    14. Test
    15. </div>
    16.  
    17. </body>
    und die CSS:
    Code (Text):
    1.  
    2. #navigation {
    3.    background-color: transparent;
    4.    
    5.    }
    6. #navigation LI {
    7.    background-color:black; /* gruen */
    8.    padding: 0;
    9.    margin: 0;list-style: none;
    10.  
    11.  
    12. width: 101px;
    13. list-style: none;
    14.    
    15.    }
    16.  
    17. #navigation UL {
    18.    background-color: #6be; /* hellblau */
    19.    padding: 0;
    20.    margin: 0;
    21. width: 100px;
    22.    }
    23.  
    24. #navigation A {
    25.    display:block;
    26.    padding: 0;
    27.    margin: 0;
    28. border:1px solid #990000;
    29.  
    30.  
    31.    }
    32.  
    33. #navigation A:link, #navigation A:visited {
    34.    color: #FFCC00;
    35.    background-color: #black;
    36.    text-decoration: none;
    37.    width: 100px;
    38.    width: 100px !important;
    39.  
    40.  
    41.    }
    42.  
    43. #navigation A:hover, #navigation A:focus {
    44.    color: #FF3300;
    45.    background-color:#666666;
    46.    text-decoration: none;
    47.    width: 100px;
    48.    width: 100px !important;
    49.    }
    ich hoffe das mir hier jemand weiterhelfen kann.
    danke schonmal

    gruss
     
    #1      
  2. ollematze

    ollematze Guest

    [CSS]horizontale Listennavi
    hi,

    als erstes würde ich es mal mit konsequenter kleinschreibung versuchen, auch im css.

    gruß matthias

    edit: #navigation ul {width:100px} ??? so kann das nicht funktionieren.
    jeder listenpunkt hat doch bereits 100px breite.....
     
    #2      
  3. Askalon

    Askalon Aktives Mitglied

    Dabei seit:
    20.12.2004
    Beiträge:
    312
    Ort:
    München
    [CSS]horizontale Listennavi
    HI
    danke für den Tip.Ist bereinigt
    Aber bringt mich in meinem Problem immer noch nicht weiter.
    Insofern war dein post unsinnig
     
    #3      
  4. ollematze

    ollematze Guest

    [CSS]horizontale Listennavi
    das einzige was hier unsinnig ist ist deine beknackte antwort.
    wenn meine versuche hilfestellung zu leisten als unsinnig bewertet werden kann ich es auch bleiben lassen.
    ein "hilft mir leider nicht weiter" hätte es wahrhaftig auch getan.
    bisher gefällt mir das forum ganz gut.....
     
    #4      
  5. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    [CSS]horizontale Listennavi
    sein post war nicht unsinnig...er hat dir versucht zu helfen und im übrigen recht gehabt: im webcode herrscht durchgehende kleinschreibung, der w3c validator rechnet dir das evt sogar als fehler an.

    zu deinem problem: entferne das display: block; in #navigation A und dann kannst du auch display: inline; erfolgreich in #navigation li setzen..habe es eben ausprobiert.
     
    #5      
  6. Askalon

    Askalon Aktives Mitglied

    Dabei seit:
    20.12.2004
    Beiträge:
    312
    Ort:
    München
    [CSS]horizontale Listennavi
    Hi
    ich hatte mich ja auch bei ihm für den Tip bedankt.
    hatte mich nur in meinem aktuellen Problem nicht weitergeholfen.
    (die grossgeschriebenen Sachen waren blind kopiert, ich gebs ja zu :) )
    habe es gerade selber rausgefunden.
    Habs jetzt mit float:left; gelöst
    da es ohne display:block; falsch dargestellt wird
    trotzdem danke dir

    gruss
     
    #6      
Seobility SEO Tool
x
×
×