Vertikales Menue mit vertikalem Text (CSS) von apsel, 05.07.2010 14:47

Vertikales Menue mit vertikalem Text (CSS)

mark 05.07.2010 14:24

Hi !

Ich habe vor ein vertikales Menue mit vertikalem Text zu realisieren. Anfangs hatte ich vor (wie üblich) Bilder zu verwenden, die den vertikalen Text darstellen, da das meines Wissens mit CSS nicht realisierbar war.

Nun bin ich aber auf folgende CSS-Eigenschaften gestoßen:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Leider überlappen sich alle <li> - Tags sobald ich diese Eigenschaften anwende.

Hier mein Beispielcode :

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Navigationsleisten</title>  
<style type="text/css">  
  
  div#navi{  
    position:absolute;  
    top:50px;  
    left:50px;  
  }  
  
  ul#Navigation {  
    margin: 0;  
    padding: 0;  
  }  
  
  ul#Navigation li {  
    /*Vertical text*/  
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
  
    list-style: none;  
    margin: 0; padding: 0;  
  }  
  
</style>  
</head>  
<body>  
<div id="navi">  
  <ul id="Navigation">  
    <li><a href="#">Beispiel 1</a></li>  
    <li><a href="#">Beispiel 2</a></li>  
    <li><a href="#">Beispiel 3</a></li>  
  </ul>  
</div>  
  
</body>  
</html>

Ohne die oben genannten Eigenschaften (vertikale Ausrichtung des Textes)
funktioniert das Menue. Ich hab schon einiges ausprobiert
(float, display:block, ...) doch ohne Erfolg.

Ich glaube, dass es eine einfache Lösung für dieses Problem gibt.
Hat jemand einen Tipp?

Ansonsten mach ich das ganze mit Bildern. Der Vorteil dieser Variante ist,
dass ich das Menue dynamisch gestalten kann. Denn die Navigationsliste wird
per PHP generiert (Wordpress).

Danke im Voraus,

Mark.

Beitrag melden

– Informationen zu den Bewertungsregeln

Vertikales Menue mit vertikalem Text (CSS)

Jens S. 05.07.2010 14:37

– Informationen zu den Bewertungsregeln

Hi !

Hi,

Ich glaube, dass es eine einfache Lösung für dieses Problem gibt.
Hat jemand einen Tipp?

da das li-Element durch die Rotation nicht automatisch die "Höhe" des darin befindlichen Textes bekommt sondern immer noch eine Zeilenhöhe hoch ist, musst du die Höhe seperat angeben:

ul#Navigation li{
[...]
height: 75px;
}

sollte dir als Beispiel reichen. Vielleicht kannst du den Wert ja in Abhängigkeit der Textlänge "errechnen", eine andere Lösung fällt mir dazu nicht ein...

Gruß,
Jens

Beitrag melden

– Informationen zu den Bewertungsregeln

Vertikales Menue mit vertikalem Text (CSS)

mark 06.07.2010 11:50

– Informationen zu den Bewertungsregeln

Danke für eure Hilfe. Ich hab das jetzt mit "height:100px" probiert und es klappt wunderbar.

Allerdings hab' ich nun versucht das Ganze dynamisch zu gestalten und die
Höhe und Breite per Javascript zu berechnen (wie von Jens vorgeschlagen).
Allerdings erhalte ich so kein stimmiges Ergebnis mehr.

Ich verwende folgenden Javascript Code (Mootools):

  
window.addEvent('domready', function() {  
    var e_li = $('Navigation').getElements('li'); // Alle Menüpunkte Auslesen  
  
    var i = 0;  
    for( i = 0; i< e_li.length; i++){ // Durch alle Menüpunkte loopen und css Eigenschaften setzen  
        // Höhe und Breite des <li> Elements ermitteln  
        var w  = e_li[i].scrollWidth;  
        var h = e_li[i].scrollHeight;  
  
        console.log('el: '+i+'  w: '+w+'  h: '+h); // Debug  
        // Höhe und Breite austauschen  
        e_li[i].setStyles({  
            width: h,  
            height: w,  
            border: '1px solid #f0f'  
        });  
  
    }  
});

Der gesamte Code sieht so aus :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Navigationsleisten</title>  
<style type="text/css">  
  div#navi{  
    position:absolute;  
    top:50px;  
    left:50px;  
  }  
  
  ul#Navigation {  
    margin: 0;  
    padding: 0;  
  }  
  
  ul#Navigation li {  
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
  
    list-style: none;  
    margin: 0;  
    padding: 0;  
  }  
  
</style>  
<script type="text/javascript" src="mootools-1.2-core.js" ></script>  
<script type="text/javascript" src="mootools-1.2-more.js" ></script>  
<script type="text/javascript">  
  
window.addEvent('domready', function() {  
    var e_li = $('Navigation').getElements('li'); // Alle Menüpunkte Auslesen  
  
    var i = 0;  
    for( i = 0; i< e_li.length; i++){ // Durch alle Menüpunkte loopen und css Eigenschaften setzen  
        // Höhe und Breite des <li> Elements ermitteln  
        var w  = e_li[i].scrollWidth+10;  
        var h = e_li[i].scrollHeight+10;  
  
        var style_str = 'width:'+h+'px; height:'+w+'px;';  
        console.log('el: '+i+'  w: '+w+'  h: '+h+'  style: '+style_str); // Debug  
  
       // e_li[i].setProperty('style', style_str); // Höhe und Breite tauschen  
  
        e_li[i].setStyles({  
            width: h,  
            height: w,  
            border: '1px solid #f0f'  
        });  
  
    }  
});  
  
</script>  
</head>  
<body>  
<div id="navi">  
  <ul id="Navigation">  
    <li class="Vnav"><a href="#">Beispiel 1 langer Menuepunkt</a></li>  
    <li class="Vnav"><a href="http://airbagpromo.com">Beisp. 2</a></li>  
    <li class="Vnav"><a href="http://google.de">Bsp. 3</a></li>  
  </ul>  
</div>  
  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Vertikales Menue mit vertikalem Text (CSS)

mark 06.07.2010 14:45

– Informationen zu den Bewertungsregeln

Wenn ich den Text rotiere und nun die Eigenschaft "width" ändere ändert
sich nicht wie zu erwarten die breite, sondern die Höhe des <li> Elements.
(Firefox 3.6.6 und Opera 10.60 auf Ubuntu 8.04)

Beispielcode zum selbertesten. Es wird ein <li> Element mit der Breite
300px und der Höhe 30px angezeigt. Es scheint also als würde schon das Ganze
Element samt Eigenschaften rotiert werden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Navigationsleisten</title>  
<style type="text/css">  
  div#navi{  
    position:absolute;  
    top:250px;  
    left:250px;  
  }  
  
  ul#Navigation {  
    margin: 0;  
    padding: 0;  
  }  
  
  ul#Navigation li {  
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
  
    white-space:nowrap;  
    width: 30px;  
    height:300px;  
    border: 1px solid #f0f;  
    list-style: none;  
    margin: 0;  
    padding: 0;  
  }  
  
</style>  
  
</head>  
<body>  
<div id="navi">  
  <ul id="Navigation">  
    <li class="Vnav"><a href="#">Beispiel Ein langer text</a></li>  
    <li class="Vnav"><a href="http://airbagpromo.com">Beisp. 2</a></li>  
    <li class="Vnav"><a href="http://google.de">B 3</a></li>  
  </ul>  
</div>  
  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Vertikales Menue mit vertikalem Text (CSS)
apsel Homepage des Autors 05.07.2010 14:47

css
– Informationen zu den Bewertungsregeln
Om nah hoo pez nyeetz, mark!

ein einfaches float: left; oder display: inline; setzt die Links nebeneinander, falls es das ist, was du willst.

ein einfaches height: 100px; setzt die Links untereinander, falls es das ist, was du willst.

Matthias

--
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

mark: Vertikales Menue mit vertikalem Text (CSS)

Vertikales Menue mit vertikalem Text (CSS)

Vertikales Menue mit vertikalem Text (CSS)

Vertikales Menue mit vertikalem Text (CSS)

Vertikales Menue mit vertikalem Text (CSS)

Vertikales Menue mit vertikalem Text (CSS)

Vertikales Menue mit vertikalem Text (CSS)