PDA

View Full Version : Help with CSS



Josh
Dec 9, 2004, 03:18 PM
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:

#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;
}


mnkeybsness
Dec 9, 2004, 03:22 PM
on #logo, try adding

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


I would be interested to see what it is you are actually doing with this.
aus_dave
Dec 9, 2004, 03:30 PM
A link to the page makes it much easier to pass comment. Without any HTML the CSS is only half the story ;).
Josh
Dec 9, 2004, 03:40 PM
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!
Josh
Dec 10, 2004, 12:58 AM
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:
#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!
Josh
Dec 10, 2004, 11:34 AM
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.
kgarner
Dec 10, 2004, 12:09 PM
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 right: -200px; on Logo2? It looks like the image was centered and then pulled left (FireFox 1.0 on Windows). Have you tried margin: 0 auto;?
kgarner
Dec 10, 2004, 12:41 PM
Nevermind that last post. I played around with it a bit and this code works (in FireFox anyway, no time to test others):
<!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>
Josh
Dec 10, 2004, 01:06 PM
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!
dr0wnoutthen0is
Dec 10, 2004, 01:18 PM
I think I have the solution for you ...

Here is the HTML file ...


<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


#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;
}
davecuse
Dec 10, 2004, 01:44 PM
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.
Josh
Dec 10, 2004, 05:43 PM
I think I have the solution for you ...

Here is the HTML file ...


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 :D
Josh
Dec 10, 2004, 11:55 PM
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!