mark: Vertikales Menue mit vertikalem Text (CSS)

Beitrag lesen

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