Florian: vertical-align:middle geht nicht

SELF-Forum

vertical-align:middle geht nicht

Florian
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche nun schon seit Tagen das hier in den Griff zu kriegen. Und zwar bin ich dabei eine Navigationsleiste zu basteln die aus Punkten besteht neben denen ein Text steht. Wenn man über Text oder Punkt fährt soll sich der Punkt verändern.
Für das verändern von dem Punkt habe ich dieses Tolle CSS:

#menu{
 display:block;width:33px;height:29px;
 background-image:url(../navigation/Punkt_0.jpg);
 }
#menu:hover{
 display:block;width:33px;height:29px;
 background-image:url(../navigation/Punkt_1.jpg);
 }

Leider schaffe ich es nicht den Text mittig daneben zu platzieren. Probiert habe ich es mit verschachtelten divs oder span so wie hier:

<td><a target="_top" href="../index.htm" id="menu"><span class="Links1">Startseite</span></a>

wobei Links1 so aussieht:

.Links1 {
 font-size:12px;
 font-weight:bold;
 margin-left:+33px;
 }

Das margin sorgt dafür das der Text schon mal neben dem Punkt erscheint aber ich schaffe es nicht ihn mittig zu platzieren. Egal welchen Element ich ein vertical-align:middle gebe es tut sich nichts. Versuche ich es mit margin-top hat das auch immer auswirkungen auf den Punkt.

Ich versteh einfach nicht warum ich in einer Zelle nicht ein Bild und einen Text mittig anordnen kann bzw. warum ein margin-left geht aber ein magin-top bzw. bottom nich.

Ich wäre dankbar über jede Hilfe.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. vertical-align:middle geht nicht

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Egal welchen Element ich ein vertical-align:middle gebe es tut sich nichts.

    vertical-align:
    Applies to:   inline-level and 'table-cell' elements

    Ich versteh einfach nicht warum ich in einer Zelle nicht ein Bild und einen Text mittig anordnen kann bzw. warum ein margin-left geht aber ein magin-top bzw. bottom nich.

    Erst Mal: Du hast überhaupt kein "Bild" in der Box, sondern nur ein Hintergrundbild.
    Und zweitens, dessen Positionierung vom Default oben links auf einen dir genehmeren Wert - bspw. vertikal zentriert - abzuändern, hast du offenbar komplett versäumt.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. vertical-align:middle geht nicht

      Florian
      – Informationen zu den Bewertungsregeln

      hi,

      Egal welchen Element ich ein vertical-align:middle gebe es tut sich nichts.

      vertical-align:
      Applies to:   inline-level and 'table-cell' elements

      Ich versteh einfach nicht warum ich in einer Zelle nicht ein Bild und einen Text mittig anordnen kann bzw. warum ein margin-left geht aber ein magin-top bzw. bottom nich.

      Erst Mal: Du hast überhaupt kein "Bild" in der Box, sondern nur ein Hintergrundbild.
      Und zweitens, dessen Positionierung vom Default oben links auf einen dir genehmeren Wert - bspw. vertikal zentriert - abzuändern, hast du offenbar komplett versäumt.

      gruß,
      wahsaga

      Ich glaube wir haben etwas aneinander vorbeigeredet aber ich hab das Problem gefunden. Antscheinen lag es an der Box in der das Hintergrundbild angezeigt wird.

      So geht es jetzt:
      .Links1 {
       font-size:12px;
       font-weight:bold;
       margin-left:+33px;
       }
      #box {
       line-height:29px;
       }
      #menu{
       display:block;width:180px;height:29px;
       background-image:url(../navigation/Punkt_0.jpg);
       background-repeat:no-repeat;
       }
      #menu:hover{
       display:block;width:180px;height:29px;
       background-image:url(../navigation/Punkt_1.jpg);
       background-repeat:no-repeat;
       }

      <div id="box"><a target="_top" href="../index.htm" id="menu_o"><span class="Links1">Startseite</span></a></div>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln