Deadweight
03-01-2014, 01:37 PM
I'm currently rotating text [Currently in webkit browsers only for this test] but it seems like i am doing something totally wrong. I cant seem to get the 'div' inside the 'li'.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotation</title>
<style>
* { padding:0; margin:0 auto;}
li { list-style:none;}
.rotate { width: 90%;}
.rotate>li {
width:20px;
height:300px;
float:left;
border:1px solid black;
}
.rotate>li:first-child {
border-left:1px solid black;
}
.r {
height:20px;
width:300px;
-webkit-transform:rotate(-90deg);
border:1px solid red;
}
.spacer {clear:both}
</style>
</head>
<body>
<div>
<ul class="rotate">
<li><div class="r">Group 1</div></li>
</ul>
<div class="spacer"></div></div>
</body>
</html>
As you will notice the red box is suppose to be in the black box. Any idea how to fix this?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotation</title>
<style>
* { padding:0; margin:0 auto;}
li { list-style:none;}
.rotate { width: 90%;}
.rotate>li {
width:20px;
height:300px;
float:left;
border:1px solid black;
}
.rotate>li:first-child {
border-left:1px solid black;
}
.r {
height:20px;
width:300px;
-webkit-transform:rotate(-90deg);
border:1px solid red;
}
.spacer {clear:both}
</style>
</head>
<body>
<div>
<ul class="rotate">
<li><div class="r">Group 1</div></li>
</ul>
<div class="spacer"></div></div>
</body>
</html>
As you will notice the red box is suppose to be in the black box. Any idea how to fix this?