...

View Full Version : 2 header background colors...



Phaaze
01-27-2007, 09:48 PM
I'm used to coding with tables but I'm trying to learn to code tableless as it's becoming the new standard... Anyway...

I've gotten a design on my hands that I need to finish coding ASAP as they're waiting for it. So a fast response would be great!

I have a situation where the designer made a fixed width template and it has to be centered but 1 side of the header is a different color than the other side...

So I need a way to make a certain background image repeat 100% on the left and another one to repeat 100% on the right meanwhile keeping in mind that the center box is fixed width...

How would I go about doing this? Tableless Valid XHTML/CSS...
I attached an image with the basic structure to show ya what I mean...

-Thanks


----------------------------------

Troy297
01-27-2007, 10:50 PM
Um... I have built a couple layouts with HTML/XHTML/CSS and I know how difficult it can be to get it right but when it works, it works!

Anyways... what I would suggest is if it is a fixed width header then just create a background image that is the full width of the header and then use a no-repeat background.

If not you could also try having two different divs side by side each with a width of say 50% and each with their own respective background image....? Like use the float attribute and then just set them to right and left, side by side.

Hope this helps & good luck!

Phaaze
01-27-2007, 10:55 PM
Um... I have built a couple layouts with HTML/XHTML/CSS and I know how difficult it can be to get it right but when it works, it works!

Anyways... what I would suggest is if it is a fixed width header then just create a background image that is the full width of the header and then use a no-repeat background.

If not you could also try having two different divs side by side each with a width of say 50% and each with their own respective background image....? Like use the float attribute and then just set them to right and left, side by side.

Hope this helps & good luck!

I understand the concept your saying in your post but as I mentioned, I am new to this tableless stuff... Could you post some code examples for me to get the basic idea of how to go about coding it?

Thanks

Graft-Creative
01-27-2007, 11:43 PM
How about this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>50 percent</title>
<style type="text/css">

#leftbox {
width: 50%;
position: absolute;
top: 0;
left; 0;
background-color: red;
}
#rightbox {
width: 50%;
position: absolute;
top: 0;
left: 50%;
background-color: green;
}
</style>
</head>

<body>
<div id="leftbox">hello</div>
<div id="rightbox">hey</div>
</body>
</html>

Gary

Phaaze
01-27-2007, 11:45 PM
Gary, I have navigation and a logo up there so I will probably need 3 divs...

I have updated the image to be a bit more specific.

--------------------------------
Edit:

After a little trial and error I finally managed to get it.

<div id="header">
<div id="header-left">
Left
</div>
<div id="header-right">
Right
</div>
<div id="header-center">
Center
</div>
</div>


#header-left
{
height: 67px;
width: 45%;
background-image: url(images/head_left.gif);
background-repeat: repeat-x;
float: left;
margin: 0;
padding: 0;
}
#header-center
{
height: 67px;
width: 759px;
margin: 0;
padding: 0;
z-index: 1;
}
#header-right
{
height: 67px;
width: 45%;
background-image: url(images/head_right.gif);
background-repeat: repeat-x;
float: right;
margin: 0;
padding: 0;
}

Thanks again! :)

Phaaze
01-28-2007, 06:36 AM
No offense, but why go thru all that ?? Use the ENTIRE bi-color header has a background for the header div, then float the logo and the menu where you want them ??



No offense, but why go thru all that ?? Use the ENTIRE bi-color header has a background for the header div, then float the logo and the menu where you want them ??


Ok, well I ended up getting stuck on the tableless html and this guy does not care if it's tableless or not so I went back to using tables but I still cannot figure out how I can make it repeat properly on the header/footer...

--Link Removed--

(Open it in FF2 and you can see basically how it's supposed to be... But it won't work in anything else...)

I have not coded in awhile and don't know much about css so please be specific and show me an example as I'm more of a visual learner.

-Thanks

------------
Edit: Figured it out using tables, thanks anyway!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum