Position of top left logo

sackstein · 12-01-2009, 03: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:

Code:

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

Code:

<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, 04: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" />