html menü?

    Hi!

    Ich würde gerne ein html menü für meine HP machen, kann aber nur langweilige Textmenüs:-/
    Und ich kann zu 95% nur im Entwurfmodus von Dreamweaver abeiten:-/

    Hat vielleicht jemand von euch ne Idee wie ich ein schönes Menü für meine HP machen kann?

    Ins Menü kommen nur:

    Home - News - Steckbrief - Fotos - Links - G-Book - Forum - Impressum

    Hallo ich habe dir hier mal drei Varianten eines horizontalen Menues.


    CSS:

    HTML:

    Wenn du es testen willst, dann kopiere den CSS- und den HTML-Code in eine HTML Datei. Achte darauf, dass du den CSS-Code an die richtige Stelle kopierst. Im HTML-Code ist ein entsprechender Vermerk.

    Erstmal ein frohes neues Jahr an euch alle!!

    Super danke!!

    Wie bekomme ich das Menü untereinander, es soll links in die Spalte über Renate mit dem UEFA-Cup in der Hand?
    Sorry, das hätte ich natürlich vorher sagen können*schäm*

    Hallo,

    also du könntest im Stylesheet beim Element a dem Atribut "display" den Wert "block" zuweisen und das Atribut float müsstest du löschen.

    a { display:block }

    Dann verhält sich das <a>...</a> Element, dass ja eigentlich ein Inline-Element ist wie ein Block-Element. Block-Elemente beginnen immer in einem neuen Absatz und Inline-Elemente werden in der aktuellen Zeile nebeneinander gestellt.

    Probier mal ob es so funktioniert.

    Aus gestallterischen Gründen soltest du dem <a>...</a> Element noch eine feste height und width vergeben, falls du z. B. beim a:hover die background-color ändern möchtest ...

    Ich würde dir jedoch vorschlagen, das du versuchst die Leiste selber zu erstellen und meinen Code nur als Vorlage zu verwenden. Ich selbst bin auch noch ein Einsteiger und bestimmt kann man das anders besser machen, als ich es gemacht habe.

    Habe ich gemacht, jetzt ist es aber nur noch ein schwarzer Kasten.
    Hab wohl was falsch gemacht?
    Ich befürchte das bekomme ich net gebacken, hab keinen Peil von css ect. *schäm*


    <html>
    <head>
    <style>body
    {
    0px;
    }
    div.variant1, div.variant2, div.variant3
    {
    width:248px;
    margin:20px auto;
    }

    div.variant1
    {
    border-top:2px solid rgb(0,0,0);
    border-bottom:2px solid rgb(0,0,0);
    }
    div.variant2
    {
    background-color:rgb(0,0,0);
    }

    a.variant1, a.variant2, a.variant3
    {
    font-family:'Trebuchet MS';
    font-size:12px;
    font-weight:normal;
    text-decoration:none;
    display:inline;
    display:block;
    line-height:20px;
    padding-left:12px;
    padding-right:12px;
    }
    a.variant1
    {
    color:rgb(0,0,0);
    }
    a.variant2
    {
    color:rgb(255,255,255);
    }
    a.variant3
    {
    color:rgb(0,0,0);

    }
    a.variant1:hover
    {
    color:rgb(0,0,0);
    background-color:rgb(203,230,230);
    }
    a.variant2:hover
    {
    color:rgb(255,128,0);
    }
    a.variant3:hover
    {
    background-color:rgb(490,191,191);
    } </style>
    </head>
    <body>
    <div class="variant2">[url='']Startseite[/url][url='']Neuigkeiten[/url]
    [url='']Kontakt[/url]
    </div>

    </body>
    </html>