Ok here is the fiddle.
http://jsfiddle.net/ozzy/mnmc7/
Code is very very basic at this stage, but essentially here is the css:
.Box {
width:660px;
border: 1px solid #aaaaaa;
border-radius: 3px 3px 3px 3px;
height:140px;
}
#Logo {
position:absolute;
-moz-transform:rotate(270deg);
transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
z-index:inherit;
zoom:1;
}
here is the html so far:
<div class="Box">
<div id="Logo">
<img src="http://images.domain.com.au/img/Agencys/16067/logo_16067.GIF" width="130px">
</div>
</div>
The idea is to get the image to exactly sit inside the div, and float it to the left with say 5px margin. So th开发者_如何学Cat it looks like this:
Try adding this to the logo:
position:relative;
float:left;
top:43px;
left:-33px;
Also in Internet Explorer 9 it appears they want you to use rotation=4
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
http://jsfiddle.net/AlienWebguy/mnmc7/21/
Just give #logo a top and left value for it's position if you want to do it this way http://jsfiddle.net/mnmc7/13/
精彩评论