Steffen: Text am unteren Ende eines DIVs

SELF-Forum

Text am unteren Ende eines DIVs

Steffen
– Informationen zu den Bewertungsregeln

Hallo Forum,

für ein Menü möchte ich gerne, dass die Menüpunkte am unteren Ende eines DIVs angezeigt werden:

+------+
|      |
|      |
|      |
+------+
| bla  |
+------+
| bla  |
+------+

Zum Test habe ich Folgendes versucht, was aber schon nicht klappt:
<div style="height: 200px; width: 200px; vertical-align: bottom; border: 1px solid red;">
<span>
bla
</span>
</div>

Geht das überhaupt nicht oder wie setze ich das am Besten um?
Das DIV hat eine feste Größe.

Danke,
Steffen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text am unteren Ende eines DIVs

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    für ein Menü möchte ich gerne, dass die Menüpunkte am unteren Ende eines DIVs angezeigt werden:

    +------+
    |      |
    |      |
    |      |
    +------+
    | bla  |
    +------+
    | bla  |
    +------+

    Zum Test habe ich Folgendes versucht, was aber schon nicht klappt:
    <div style="height: 200px; width: 200px; vertical-align: bottom; border: 1px solid red;">
    <span>
    bla
    </span>
    </div>

    Die Eigenschaft vertical-align wird nur in Inline-Boxen(z.B. Textzeilen) und/oder in Tabellenzellen wirksam.

    Du könntest das DIV mit position:relative zum Positions-Kontainer für die Linkliste machen und diese dann mit position:absolute darin positionieren. Aber bitte verwende für die Linkliste nicht SPAN-Elementen, sondern zeichne sie als das aus, was sie ist, eine Liste.

    Beispiel:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Text des Titels</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
div#menu {position:relative; height: 200px; width: 200px; border: 1px solid red;}  
div#menu ul {position:absolute; bottom:0; left:0; width:100%; margin:0; padding:0; background-color:#FF0;}  
div#menu li {margin:0; padding:2px; list-style-type:none;}  
-->  
</style>  
</head>  
<body>  
<div id="menu">  
<ul>  
<li>bla</li>  
<li>bla bli blubb</li>  
<li>bla bla</li>  
</ul>  
</div>  
</body>  
</html>

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Text am unteren Ende eines DIVs

      Steffen
      – Informationen zu den Bewertungsregeln

      Du könntest das DIV mit position:relative zum Positions-Kontainer für die Linkliste machen und diese dann mit position:absolute darin positionieren. Aber bitte verwende für die Linkliste nicht SPAN-Elementen, sondern zeichne sie als das aus, was sie ist, eine Liste.

      Passt, sitzt, wackelt & hat Luft. Danke!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln