mark: Vertikales Menue mit vertikalem Text (CSS)

Beitrag lesen

SELF-Forum

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