...

View Full Version : Position of top left logo



sackstein
12-01-2009, 04:47 PM
I am trying to position the blue oval logo on the top left of this image:

http://img4.imageshack.us/img4/6625/layoutgj.jpg

The problem I am having and can`t seem to figure out is when the window resizes I need the logo to stay put and to get hidden much like the orange sidebars would on smaller screens instead of overlapping the menu.

my css for it is:



html, body{
height: 100%;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

#wrapper {
width:100%;
margin:0 auto;
background: url(images/bg_sidebar.png) repeat-x #feea83;
height:100%;
}

#underbelt {
background:url(images/whatsunder.png) no-repeat;
float:left;
position: absolute;
top:10px;
left:0px;
width:307px;
height:130px;
}

#content {
padding-top:40px;
width:950px;
margin: 0 auto;
background:#FFFFFF;
}

#menubar {
background:url(images/menubar_bg.png) repeat-x;
height:80px;
}

and the html is


<body>
<div id="wrapper">
<div id="content">
<div id="underbelt"></div>
<div id="menubar"></div>

</div>
</div>
</body>

So obviously it is moving since the position is absolute.. But I am not sure how I can get it to stick per se...

I`m sure this is pretty simple I'm just a putts. Any help?

Excavator
12-01-2009, 05:12 PM
Hello sackstein,
Make #wrapper position:relative; and then adjust top/left pixels to place #underbelt.

#underbelt can be just the image instead of putting an un-needed div around the image.
Like this - <img src="images/whatsunder.png" alt="description" width="307" height="130" id="underbelt" />



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum