Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with CSS

Josh

Josh

macrumors 68000
Original poster
Hello,

I want to position my site's banner using CSS.

I have divided the image into 3 sections: the left end, middle, and right end.

I also have a 1px wide image that spans the entire width of the top to form the background for my banner.

I want the left and right ends to stay put at the edges of the browser, and I want the middle image to stay in the center of the browser (horizontally).

The problem is with my current code, when resizing the browser, the left and middle images stay put, but the right end image moves closer to the center as it gets smaller. Thats *almost* what I want it to do.

But I want the left AND right images to move closer to the center simultainously, as the middle stays put. This way, there is always an equal gap between the center image, and each image on either side of it.

Thanks in advance for any help/advice!

Here is my current code:

Code: 
#logo {
  background: url(banleft.jpg) top;
  height: 110px;
  width: 122px;
}

#logo2 {
  background: url(banright.jpg) top right;
  height: 110px;
  width: 145px;
  position: absolute;
  top: 0px;
  right: 0px;
}

#logo3 {
  background: url(banmid.jpg) top center;
  height: 110px;
  width: 407px;
  position: relative;
  left:50%
  top: 0px;
  margin-top: 0px;
  margin-left: 200px;
}

/* Header */
#header {
  background: url(banbg.jpg) repeat-x 0% 0%; 
  height: 110px;
}
 
on #logo, try adding
Code: 
position: absolute;
top: 0;
left: 0;

I would be interested to see what it is you are actually doing with this.
 
A link to the page makes it much easier to pass comment. Without any HTML the CSS is only half the story 😉.
 
Alright, I'll post the HTML and a link to the sight as quick as I can. I dont have the site uploaded yet, its still on my computer at work (Im home now).

But I'll try to cut everything up and post my site later on tonight.

Thanks for the replies!
 
Ok, I got it *almost* right.

Here is a link to it: http://www.tibathon.com/banner/banner.html

I got the right and left images working fine, but the middle image needs to be adjusted, and I cannot do it for the life of me.

I want it to be perfectly aligned to the middle of the window, and stay in the middle as the window resizes.

Here is the updated css, and you can view source for the html:
Code: 
#header {
	width: 100%;
	height: 110px;
	background: repeat-x url(banbg.jpg);
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	vertical-align: 0px;
}

#logo {
	background: url(banleft.jpg) no-repeat;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 110px;
	width: 120px;
}

#logo2 {
	background: url(banmid.jpg) no-repeat;
	height: 110px;
	width: 425px;
	top: 0px;
	position: relative;
	right: -200px;
}

#logo3 {
	background: url(banright.jpg) no-repeat;
	position: fixed;
	height: 110px;
	width: 147px;
	top: 0px;
	right: 0px;
}

Thanks for the help!
 
Im beginning to think - even though I'd rather avoid it - that maybe using tables would be a more effective way of pulling this off.

I could create one table, fixed to the top, 100% width, with 1 row and 5 columns.
Then I could arrange it like this:

[image] [empty cell] [image] [empty cell] [image]

and the whole table would have the tilable bg.

And this way, I could make each of the end images links - one back home, and one to the forums.

I'm going to play with this idea a bit, I think.
 
Two things.

1. Have you tried it with a proper doctype? When the browser is not given a doctype, it often goes into quirks mode and can cause problems.

2. What is the purpose of the
Code: 
right: -200px;
on Logo2? It looks like the image was centered and then pulled left (FireFox 1.0 on Windows). Have you tried
Code: 
margin: 0 auto;
?
 
Nevermind that last post. I played around with it a bit and this code works (in FireFox anyway, no time to test others):
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#header {
	width: 100%;
	height: 110px;
	background: repeat-x url(banbg.jpg);
	position: absolute;
	top: 0px;
	left: 0px;
	}

#logo {
	background: url(banleft.jpg) no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 110px;
	width: 120px;
	}

#logo2 {
	background: url(banmid.jpg) no-repeat;
	height: 110px;
	width: 425px;
	position: relative;
	margin: 0 auto;
	}
	
#logo3 {
	background: url(banright.jpg) no-repeat;
	position: absolute;
	height: 110px;
	width: 147px;
	top: 0px;
	right: 0px;
	}
</style>
</head>
<body>
<div id="header">
	<div id="logo2"></div>
</div>
<div id="logo"></div>	
<div id="logo3"></div>
</body>
</html>
 
awesome - thanks alot man!

I'll have to examine that code and figure out what makes the difference.

It dosnt work in Safari - the left image works, the middle does too (exactly how I want it to, too!) - but the right image doesnt show.

I'll take a look at it later.

thanks a ton!
 
I think I have the solution for you ...

Here is the HTML file ...

Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="banner.css" />
</head>
<body>
<div id="header">
	<div id="logoLeft"></div>
	<div id="logoMiddle"></div>
	<div id="logoRight"></div>
</div>
</body>
</html>

and the CSS file

Code: 
#header {
	background: repeat-x url(banbg.jpg);

	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 110px;
	
	text-align: center;
}

#logoLeft {
	background: url(banleft.jpg) no-repeat;
	
	position: absolute;
	top: 0px;
	left: 0px;

	width: 120px;
	height: 110px;
}

#logoMiddle {
	background: url(banmid.jpg) no-repeat;

	width: 425px;
	height: 110px;

	top: 0px;
	
    margin-left: auto; 
    margin-right: auto;
}

#logoRight {
	background: url(banright.jpg) no-repeat;

	position: absolute;
	top: 0px;
	right: 0px;

	width: 147px;
	height: 110px;
}
 
I see two solutions to the dilemna you are running into.

1. Create a container div and set a width.

2. Set the alignment of the right logo as "left: 650px;" instead of "right:0px;"

The problem you are running into, seems like the expected outcome of what you are trying to accomplish. While using the entire window looks nice, it can cause issues, as you have absolutely no say over what size your page is displayed.
 
dr0wnoutthen0is said:
I think I have the solution for you ...

Here is the HTML file ...
Click to expand...

Ah ha!

That did the trick!

Thanks alot man, and big thanks to everyone else that helped me with this!

As you see, I have some CSS to brush up on 🙂 lol

...and I finally downloaded SubEthaEdit...makes doing the html much easier....(I was using the terminal and vi...not the best/quickest way lol).

Thanks again!! I really appreciate it 😀
 
OK I ran into a problem.

If you go to my site: http://www.tibathon.com you may or may not see what I mean.

In Safari, FireFox, and IE 5.2 on the Mac, it displays perfectly.

But a Windows user, using IE 6 sent me a screenshot, and on his, the banner is perfect, except the rest of the page is moved upwards, so that it is cutting halfway into the "Welcome" message.

I dont have a windows machine so I dont know how its displaying in IE.

Any ideas?

edit
several hours and a 2liter of pepsi later, all problems have been solved.

Thanks to everyone for helping out! Would've never got anything done without it!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back