Horizontale Navigation mit Umbrüchen

T

TeBeO

Grünschnabel
Hallo vielleicht nur ne kleine Sache aber ich bekomme es nicht auf die Reihe

ich habe eine Navigation z.B.:
HTML: 
<ul>
  <li><a href="">test1</a></li>
  <li><a href="">test2</a></li>
  <li><a href="">test3 test3 test3 test3 test3 </a></li>
  <li><a href="">test4</a></li>
</ul>

test3 soll einen Umbruch erzeugen denn sonst ist der Platz knapp.

Mein Problem wie bekomme ich es hin das alles auf einer Basislinie liegt?

Es soll folgendermaßen aussehen:
Code: 
                                         test3 test3 test3 
test1                test2               test3 test3                                test4

Vielen dank schon einmal
 
Hi,

das funktioniert grundsätzlich so:

CSS: 
ul {
display:table;
}
li {
width:120px;
display:table-cell;
vertical-align:bottom;
}


mfg Maik
 
Vielen Dank Maik.

an table-cell hatte ich nicht gedacht. Ja es geht, danke sehr.


## EDIT ##

Oh kleine Sache noch IE 6.0 und 7.0 zeigen das falsch an was kann ich tun?
 
Maik hat gesagt.:
Da die Tabelleneigenschaften der display-Eigenschaft erst seit dem IE8 interpretiert werden, wäre hier ein Workaround vonnöten, wie er in dem Beispiel http://www.pmob.co.uk/temp/vertical-align9.htm vorgestellt wird.

mfg Maik
Zum Vergrößern anklicken....

... der dann so lauten würde:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align to bottom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
        font:normal .8em verdana,sans-serif;
}
* {
        margin:0;
        padding:0;
}
ul {
        list-style:none;
}
ul li {
        float:left;
}
.outer {
        position:relative;
        display:table;
        height:40px;
        width:120px;
        vertical-align:middle;
        text-align:center;
        float:left;
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:bottom;
        position:relative;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.inner {top:100%;left:0;}
.inner a{top:-100%; position:relative;}
</style>
<![endif]-->
</head>
<body>

<ul>
    <li>
        <div class="outer">
             <div class="inner">
                  <a href="#">test1</a>
             </div>
        </div>
    </li>
    <li>
        <div class="outer">
             <div class="inner">
                  <a href="#">test2</a>
             </div>
        </div>
    </li>
    <li>
        <div class="outer">
             <div class="inner">
                  <a href="#">test3 test3 test3 test3 test3</a>
             </div>
        </div>
    </li>
    <li>
        <div class="outer">
             <div class="inner">
                  <a href="#">test4</a>
             </div>
        </div>
    </li>
</ul>

</body>
</html>


mfg Maik
 
So ganz will es noch noch nicht ich habe noch Probleme mit dem IE der zeigt es einwenig falsch an

ich poste mal meinen Code.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0}
li {
        position:relative;
        display:table;
        height: 75px;
        width: 100px;
        vertical-align: middle;
        border-left: 1px solid #CCCCCC;
        float:left
}
a {
        width:100%;
        display:table-cell;
        vertical-align:bottom;
        position:relative;
}
</style>
<!--[if IE ]>
<style type="text/css">
li {top:100%;left:0;}
a{top:-100%;        position:relative;}
</style>
<![endif]-->
</head>
<body>
<ul>
  <li><a href="">test1</a></li>
  <li><a href="">test2</a></li>
  <li><a href="">test3 test3 test3 test3 test3 </a></li>
  <li><a href="">test4</a></li>
</ul>
</body>
</html>
 
So ich war einwenig zu langsam. Ich komme wohl um das outer / inner nicht herum oder? das hatte ich mir gewünscht.
 
Mehr bzw. weniger geht da nicht:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align to bottom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
        font:normal .8em verdana,sans-serif;
}
* {
        margin:0;
        padding:0;
}
ul {
        list-style:none;
}
.outer {
        position:relative;
        display:table;
        height:40px;
        width:120px;
        vertical-align:middle;
        text-align:center;
        float:left;
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:bottom;
        position:relative;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.inner {top:100%;left:0;}
.inner a{top:-100%; position:relative;}
</style>
<![endif]-->
</head>
<body>

<ul>
    <li class="outer">
             <div class="inner">
                  <a href="#">test1</a>
             </div>
    </li>
    <li class="outer">
             <div class="inner">
                  <a href="#">test2</a>
             </div>
    </li>
    <li class="outer">
             <div class="inner">
                  <a href="#">test3 test3 test3 test3 test3</a>
             </div>
    </li>
    <li class="outer">
             <div class="inner">
                  <a href="#">test4</a>
             </div>
    </li>
</ul>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück