the_oliver Posted November 17, 2010 Share Posted November 17, 2010 Hello, I'm having a problem with this site: http://bit.ly/czTzhd At present everything sits nicely in the centre and stays central as the window size changes. What i'm trying to do though is to get another div (a tab) to appear on the right hand side of the central area (the white block), but leaving the current area central still. I tried warping everything thats there at the moment in a div, and then putting the tab into another div and using z-index but it would only ever appear bellow the current area. Any pointer please? Many Thanks! Quote Link to comment Share on other sites More sharing options...
seanlim Posted November 17, 2010 Share Posted November 17, 2010 try putting your new div into the <div id="canvas> ...</div>, and "float:right" the new div... Quote Link to comment Share on other sites More sharing options...
the_oliver Posted November 17, 2010 Author Share Posted November 17, 2010 Hi Seanlim, Thanks, thats there now, but it's just sitting bellow the area. (white 'text' at the bottom of the page). Any more thoughts? Thanks! Quote Link to comment Share on other sites More sharing options...
seanlim Posted November 17, 2010 Share Posted November 17, 2010 My bad... put that new div just before <div id="canvas">. the new div still has to be "float:right" Quote Link to comment Share on other sites More sharing options...
the_oliver Posted November 17, 2010 Author Share Posted November 17, 2010 Ok, so it's before <div id="canvas"> at the moment. Which puts it in a better place, but i need to lock it to the side of the white area. - Currently it's locked against the right of the browser. I also tried putting it just after <div id="canvas"> but that really messed things up. The menu dropped down a long way, and the blue extended over the right of the white. Thanks. Quote Link to comment Share on other sites More sharing options...
the_oliver Posted November 17, 2010 Author Share Posted November 17, 2010 It's better now, i've rapped the whole lot in another div and given it a fixed width. Now all i need to do is align the new div centrally. Is there an easy way to do that? Thanks. Quote Link to comment Share on other sites More sharing options...
the_oliver Posted November 17, 2010 Author Share Posted November 17, 2010 Nailed it with margin: 0 auto; Thanks for your pointer seanlim! Quote Link to comment Share on other sites More sharing options...
the_oliver Posted November 17, 2010 Author Share Posted November 17, 2010 Oh dear, back again. So I now have the div in the right place, and mostly styled. The css is: #SideBannerAdd { color: #000; float:right; background: #fff; position: relative; z-index: -1; right: 5px; height: 40px; top: 80px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; } But I have two new problems. The first is that if i add more then 4 characters, the menu drops right down on the left, and the blue extends out over the right of the white box. The second is that the text is pushed up against the right of the box (the top if it was the right way up), not in the centre of it. Any more thoughts would be much apreciated. Many Thanks. Quote Link to comment Share on other sites More sharing options...
the_oliver Posted November 17, 2010 Author Share Posted November 17, 2010 I've now got it working, but not in IE. Any thoughts on that people? #SideBannerAdd { color: #000; vertical-align: middle; float:right; background: #fff; position: absolute; right: -122px; top: 150px; padding-top: 2px; padding-bottom: 18px; padding-right: 15px; padding-left: 15px; -moz-border-radius: 12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } Thanks. Quote Link to comment Share on other sites More sharing options...
seanlim Posted November 18, 2010 Share Posted November 18, 2010 There are issues with rotation and absolute positioning in IE. It shouldn't be a problem if you use IE8 Standards. You are probably better off using an image for the text on the tab. Having said that, it is not impossible to workaround the issue, but this isn't a pixel-perfect solution: <html> <head> <style> body{ background-color:black; text-align:center; } #mwrap { width:840px; border: 0px solid white; margin:0 auto; } #SideBannerAdd { float:right; background-color:white; width:30px; height:200px; } #canvas { width:780px; background-color:white; float:left; margin-left:30px; height:500px; } #SideBannerText { display:block; width:200px; -webkit-transform: rotate(90deg); -webkit-transform-origin: 15px 15px; -moz-transform: rotate(90deg); -moz-transform-origin: 15px 15px; -o-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } </style> <body> <div id="mwrap"> <div id="SideBannerAdd"> <div id="SideBannerText">NEW! Back-Country Ski Camp</div> </div> <div id="canvas"> Content<br> Content<br> Content<br> Content<br> </div> <div style="clear:both"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.