Help with silly floating layers.

Craig321

Craig321

Craig321

Soldato
Joined
2 May 2004
Posts
19,950
Hi,

I'll probably get told of for mentioning the site for an example, so I won't.

All our customers websites have a sidebar with an ad in it (free web hosting - we need some way to pay for the servers ;)).

We also offer an online website builder which is very simple to use, good for the new ones to web hosting... we're using RV Site Builder.

Anyway, on every single page they had to go and put a stupid floating layer, so the layer stays in the same place & the sidebar pushes the content to the right... so the logo (floating layer) is on top of the sidebar :(

Here's my code:

Code: 
<style>

body
{
	margin:0px;
	padding:0px;
}
div.one
{
	position: absolute;
	top:0;
	background-color:#FFFFFF;
	height:100%;
	/* Firefox hack to make 100% height work properly */
	/* START */
	min-height: 100%;
	/* END */
	width:170px;
	padding-top:0px;
	float:left;
	backgrund: url(http://www.xoopiter.com/images/sidebar_03.gif) repeat-y 100% 0;
	margin-left:0px;
	padding-left:0px;
}
div.usrcontent
{
	margin-left:175px;
}

</style>

<div class="one">
Content of the sidebar goes here.
</div>

<div class="usrcontent">
Users page goes here... then the footer is included which is this:
</div>

That's all working nicely, 100% height etc. but as said above, as RV Site Builder is using a floating layer for the logo the logo stays in the top left & goes over the sidebar which is no good :(

Is there any CSS I can use instead of or with margin-left:175px; that will push anything no matter what it is, even floating layers?

Thanks
Craig.
 
Bit hard to help you without actually seeing it all in action.

But from what I can tell from your description, tell me if this is wrong, is that you have a floating logo ontop of the left sidebar, when you want the sidebar to push the logo to the side, so it will become this:


_sidebar_ _logo_
_sidebar_ _content_
_sidebar_
_sidebar_
_sidebar_
_sidebar_

Now, I think you need to edit the logo css and give it a left margin of 175px like your content to move it across, but I think you could maybe get away with having the logo above the sidebar, and to do that you can add a clear:left; to the div.one class.

But like I said bit hard to help without seeing it and having a play around (usually) so apologies if this is all totally wrong.
 
Hmm.

Try this:

div.usrcontent
{
position:absolute;
margin:0 0 0 175px;
}

If that doesnt work then only other option I can see (because they have stupidly included the style inside the div tag while they could have put it all in a css file under their named id's, and since its all absolute positioning) you can make the sidebar cover up the logo, by giving it a z-index:5; or anything above 3 should do.

But I have a feeling the first method above may work, try it, post back with your results :)
 
You must log in or register to reply here.
Back
Top Bottom