mark: Vertikales Menue mit vertikalem Text (CSS)

SELF-Forum

Vertikales Menue mit vertikalem Text (CSS)

mark
– Informationen zu den Bewertungsregeln

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

  1. Vertikales Menue mit vertikalem Text (CSS)

    Jens S.
    – 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

    1. Vertikales Menue mit vertikalem Text (CSS)

      mark
      – 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

      1. Vertikales Menue mit vertikalem Text (CSS)

        mark
        – 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

  2. Vertikales Menue mit vertikalem Text (CSS)

    apsel Homepage des Autors
    – 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

    --
    http://www.billiger-im-urlaub.de/kreis_sw.gif
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln