[CSS] vertical-align:bottom ohne Tabelle

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [CSS] vertical-align:bottom ohne Tabelle

    Hallo,

    Ich habe ein verticales Menü, bestehend aus einer Liste. Die Listenelemente werden per CSS formatiert und haben danach eine quadratische Form (80x80Pixel). Dummerweise steht der Linktext dann aber oben im Listenelement:
    Code:
    -----------
| link     | so nicht
|          |
|          |
----------


-----------
|         |sondern so
|         |
| link    |
----------
    Also hab ich zusätzlich eine Tabelle pro Listenelement eingefügt...

    Code:
    <div id="hauptnavigation">
  <ul>
    <li><table><tr><td><a href="#">link</a></td></tr></table></li>
    <li><table><tr><td><ahref="#">link</a></td></tr></table></li>
    <li><table><tr><td><ahref="#">link</a></td></tr></table></li>
    <li><table><tr><td><a href="#">link</a></td></tr></table></li>
    <li><table><tr><td><a href="#">link</a></td></tr></table></li>
  </ul>
</div>
    ...und dann per CSS
    Code:
    td{
vertical-align:bottom;
}
    den Text unten platziert. Kennt jemand eine bessere Möglichkeit, Text ,ausser in einer Tabelle (<td>..</td>), unten zu platzieren?


    padding-top scheidet leider aus, das der linktext auch zweizeilig sein kann.
    Zuletzt geändert von gruenspan; 14.10.2006, 18:03.
    Stichworte: -
  • #2
    Re: [CSS] vertical-align:bottom ohne Tabelle

    Ob du vertical-align anwenden kannst, hängt nicht davon ab, ob die HTML-Elemente den "richtigen" Typ haben - sondern von ihrer display-Eigenschaft.

    (Dummerweise kommt der IE mit den tabellenartigen Eigenschaften für display immer noch nicht klar. Also würde ich solange den Link einfach absolut am bottom des Listenelementes positionieren - bzw. stattdessen den Linkinhalt noch in ein zusätzliches Element packen und dieses in Bezug auf den Link positionieren, wenn der Link selber ebenfalls volle Größe haben soll.)
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar

    • #3
      Vielen Dank wahsaga. Ich häng meinen Code mal dran, falls jemand selbiges Problem hat.
      Code:
      /* CSS  */

div#hauptnavigation{
   width:80px;
   margin-top:20px;   
}

div#hauptnavigation li{
   position:relative;
   list-style-type:none;
   height:80px;
   width:80px;
   background-color:#cccccc;
   margin-bottom:20px;
}

div#hauptnavigation li a{
   position:absolute;
   bottom:3px;
   left:3px;
}

----------------------------------------------------------------------

<!-- HTML -->

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="hauptnavigation">
  <ul>
        <li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
  </ul>
</div>
</body>
</html>

      Kommentar

      • #4
        Schön - wenn jetzt noch der Div um UL rausfliegt, sofern der wirklich keine weiteren Aufgaben hat als im Beispiel erkennbar ...
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar

        • #5
          Im Original sind drei <div>'s nebeneinander gefloatet und in eben diesem hab ich die Navigation. Aber is wohl doch überflüssig...
          Zuletzt geändert von gruenspan; 14.10.2006, 23:40.

          Kommentar

          • #6
            Jetzt ergibt sich aber ein weiteres Problem. Wenn ich neben die Liste einen div setzen will, muß ich der Liste ein float:left geben.
            Allerdings zieht dann der IE 6.0 die Liste auseinander. Das ganze sieht aus wie der DoubleMarginBug. Entferne ich das position:absolut für das Element a ist die Liste wie sie sein soll. Allerding sind die Links dann wieder oben.
            display:inline hilft leider auch nicht weiter. Schauts euch bitte mal an:

            ohne position:absolut
            CSS-File
            -----
            mit position:absolut
            CSS-File

            Kommentar

            • #7
              Das ganze sieht aus wie der DoubleMarginBug
              wenn du den vertikalen abstand der listenelemente zueinander meinst, da hilft ein border-bottom: 1px .....;

              gruß
              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar

              • #8
                da hilft ein border-bottom: 1px
                Das bewirkt leider nichts. Passiert halt nur im IE.

                Kommentar

                • #9
                  stell mal die fehlerhafte seite online. bei deinen unten aufgeführten seiten sieht es in allen browsern gleich aus.

                  gruß
                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar

                  • #10
                    Original geschrieben von gruenspan

                    mit position:absolut
                    CSS-File
                    Also bei mir ist es der IE (V 6.0 SP 2) der die Liste nach unten dehnt, alle anderen Browser (FF + Opera) stellen sie korrekt dar.

                    Kommentar

                    Vorherige template Weiter
                    Lädt...
                    X