MIchiiii: Mouseover buttons

Hey Leute!

Ich bin an meiner eigenen Homepage dran und habe nun aber ein kleines Problem.
Ich will meine Menüleiste mit den Buttons mit einem Mouseover versehen. Damit ich das bewerkstelligen kann, habe ich mich nach diesem Beispiel gerichtet:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/beispiel5.htm

Nun gibt es ein Problem: Wenn ich das ganze mit den <p> tags mache, dann braucht der Button "mehr Platz"... also er ist nicht mehr bündig mit der oberen Zeile der tabelle.

An was kann das liegen? Oder gibt es eine bessere Variante als das oben genannte Beispiel? das Ziel sollte sein, dass es wie hier aussieht:
http://uponyou-records.com/about-us/

wobei es keine aktive register geben sollte.

Vielen Dank für Eure Antworten!

Gruss
Michiiii

  1. Nun gibt es ein Problem: Wenn ich das ganze mit den <p> tags mache, dann braucht der Button "mehr Platz"... also er ist nicht mehr bündig mit der oberen Zeile der tabelle.
    An was kann das liegen?

    An allem, was Platz beansprucht.
    Aber von p in table würde ich doch Abstand nehmen.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
  2. Moin,

    Hey Leute!

    Nun gibt es ein Problem: Wenn ich das ganze mit den <p> tags mache, dann braucht der Button "mehr Platz"... also er ist nicht mehr bündig mit der oberen Zeile der tabelle.

    Das liegt an den CSS-Voreinstellungen der Browser die dem Element <p> ein Margin geben. Diese musst du in deinem CSS überschreiben, ich empfehle immer ganz am Anfang ein

      
    * {margin:0px; padding:0px;}  
    
    

    An was kann das liegen? Oder gibt es eine bessere Variante als das oben genannte Beispiel?

    Ja, nimm keine Tabelle zu Layoutzwecken, sondern nimm eine Liste für die Navigation, wie http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=hier beschrieben.

    das Ziel sollte sein, dass es wie hier aussieht:
    http://uponyou-records.com/about-us/

    Die nehmen auch eine Liste, mit CSS entsprechend formatiert.

    wobei es keine aktive register geben sollte.

    Ähh... Was?

    Vielen Dank für Eure Antworten!

    Gruss
    Michiiii

    Gruß,
    Take

  3. Hallo,

    Ich will meine Menüleiste mit den Buttons mit einem Mouseover versehen. Damit ich das bewerkstelligen kann, habe ich mich nach diesem Beispiel gerichtet:
    http://aktuell.de.selfhtml.org/artikel/css/mouseover/beispiel5.htm
    Nun gibt es ein Problem: Wenn ich das ganze mit den <p> tags mache, ...

    Moment, Moment. Nur weil das Beispiel den Effekt an einem einzelnen p-Element demonstriert, musst du das ja nicht mit einem Rudel von Textabsätzen nachbauen. Eine Menüleiste ist zunächst mal eine Liste aus Links, also ein ol- oder ul-Element mit li-Elementen für die einzelnen Einträge.

    dann braucht der Button "mehr Platz"... also er ist nicht mehr bündig mit der oberen Zeile der tabelle.

    Was für eine Tabelle?
    Hast du vielleicht nicht daran gedacht, dass viele Elemente durch das Default-Stylesheet des Browsers schon margins und/oder paddings haben? Das p-Element gehört zu denen. Es ist deine Aufgabe als Autor, die CSS-Eigenschaften der verwendeten Elemente so zurechtzuzupfen, dass sie in deine Designvorstellungen passen.

    An was kann das liegen? Oder gibt es eine bessere Variante als das oben genannte Beispiel? das Ziel sollte sein, dass es wie hier aussieht:
    http://uponyou-records.com/about-us/

    Ja, "aussieht" ist ein wichtiges Stichwort. Mach dich zunächst mal mit dem Gedanken vertraut, dass der HTML-Code ausschließlich nach der *Struktur* der Inhalte entworfen werden soll. Das kann aussehen, wie es will. Erst im zweiten Schritt geht man mit CSS ans Aussehen.

    wobei es keine aktive register geben sollte.

    Das vereinfacht die Geschichte je eher.
    Aber warum nicht? Ist doch eine elegante Methode, dem Besucher anzuzeigen, wo er sich gerade befindet.

    So long,
     Martin

    --
    Verliebt:    Er spricht, sie lauscht.
    Verlobt:     Sie spricht, er lauscht.
    Verheiratet: Beide sprechen, und die Nachbarn lauschen.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(