0

Hi

I'm trying to put this 800x60 banner image on my page, I succeeded to center it, but I don't want it to stay from above the menu on the left.

So, lets say that this menu is 100px wide, then I want a minimum distance of 100px between browser border and banner image, but the image being centralized when browser window is becoming bigger.

Thx in advance

Grtz, K?!

2
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by K?!
0

never mind, solved it with a fluid design approach.

0

If you are using div tags, give the margin-left:100px; for your image div tag(div tag that holds your image).

0

well, I have tried to create a "liquid" banner (fluid design) that gets wider when the window's width increases. So there are typical 3 div's (left, center, right) (and a container div for these three. Deleted and put it back several times trying things).

But I keep getting these weird results.

I'v put a min-width in the left div, but there is this space thats being preserved in it, whether I have set this min width or not...

I'm not good at making this all clear, ask me questions if you need to know certain things.

I would like an example (cross-browser compatible) of the fluid banner I'm talking about.

This is my html

<div id="banner_container">
	<div id="banner_left"></div>
	<div id="banner_center"><img src="img/banner_text.png" /></div>
	<div id="banner_right"></div>
</div>

This is my css (only for the banner part of course):

#banner_container{
	width: 100%;
	height: 60px;
	/*overflow: hidden;*/
}
#banner_left{
	float: left;
	width: 15%;
	/*min-width: 130px;*/
	height: 60px;
	background: url(img/banner_left.png) no-repeat top right;
}
#banner_center{
	float: left;
	width: 70%;
	/*min-width: 100px;*/
	height: 60px;
	background: #000;
}
#banner_right{
	float: left;
	width: 15%;
	/*min-width: 28px;*/
	height: 60px;
	background: url(img/banner_right.png) no-repeat top left;
}

Edited by K?!: n/a

0

For example, when I put in min-width=100px; for the left div, it resizes pretty good, and everything stays in the same position, the right div just disappears when the browser window gets too small.

When I set it to 150 px, when the browser window gets too small, the right div jumps UNDER the others...

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.