Text Rotation with CSS
Sehr erhellender Artikel auf snook.ca: Text Rotation with CSS
Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask?
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Wobei BasicImage die Werte 0, 1, 2, or 3 haben kann und das Element um 0, 90, 180 oder 270 Grad dreht. Cool!!
Wahnsinn, bei mir klappt irgendwas nicht. Ich möchte mehrere Elemente in einem Div zu einem Menü zusammenfügen in welchem die Elemente aber vertikal ausgerichtet sind. Ich hab das Problem dass sie ewig auseineander stehen und nicht alle an einer Linie aligned sind.
das ganze wäre ungefähr so
HomeFotos
CSS:
.main{
height:400px;
width:100%;
}
.art-main{
width:1000px;
position:relative;
margin: 0 auto;
}
}
.menu{
height:100px;
margin: 0px;
text-align: right;
}
.menu_item{
background-color:white;
color:black;
font-family:Verdana, Geneva, sans-serif;
width:100%;
padding: 5px 10px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Link: http://www.w3d.bonzaibikez.com
Wie krieg ich die Dinger an einer imaginären oberen waagerechten Linie entlang? ich probier jetzt schon ne weile dran rum.
Bei der Rotation bleiben die Höhen/Breiten Angaben erhalten was zu komischen Effekten führt. Für ein Menü habe ich das mit position:absolute gelöst. Hier ein Code Beispiel vielleicht hilft das:
Super, danke! Jetzt funktioniert es bei mir auch!
Genialer Hinweis… Vielen Dank dafür!