Horizontale Navigation mit Umbrüchen @ tutorials.de: Tutorials, Forum & Hilfe

TeBeO · 01.02.10 09:59

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

ich habe eine Navigation z.B.:

HTML-Code:

<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 :

1 2	test3 test3 test3 test1 test2 test3 test3 test4

Vielen dank schon einmal

Maik · 01.02.10 10:04

Hi,

das funktioniert grundsätzlich so:

Code css:

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

mfg Maik

TeBeO · 01.02.10 10:08

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 · 01.02.10 10:28

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

Maik · 01.02.10 11:23

Zitat von Maik

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

... der dann so lauten würde:

HTML-Code:

<!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

TeBeO · 01.02.10 11:23

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-Code:

<!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>

Maik · 01.02.10 11:24

Die lauffähige Version hab ich ein paar Sekunden vorher gepostet

mfg Maik

TeBeO · 01.02.10 11:25

So ich war einwenig zu langsam. Ich komme wohl um das outer / inner nicht herum oder? das hatte ich mir gewünscht.

Maik · 01.02.10 11:32

Mehr bzw. weniger geht da nicht:

HTML-Code:

<!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

TeBeO · 01.02.10 11:34

Oh vielen Dank Maik. Ich denke das Thema kann nun als erledigt durch gehen. Vielen Dank noch mal.

TeBeO · 01.02.10 13:41

Ich habe doch noch was.....

Wie bekomme ich das zentriert?

Maik · 01.02.10 13:45

Das komplette Menü?

Centering Float Left Menus

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Horizontale Navigation

Horizontale Navigation

Horizontale Navigation

Horizontale Navigation im FF und IE verschoben

Horizontale Navigation mit CSS

E-Mail:

Abonnieren Abbestellen