Axel Richter: Text am unteren Ende eines DIVs

Beitrag lesen

SELF-Forum

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