mark: Vertikales Menue mit vertikalem Text (CSS)

Beitrag lesen

SELF-Forum

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