Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 header background colors...

    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


    ----------------------------------
    Attached Thumbnails Attached Thumbnails 2 header background colors...-design.jpg  
    Last edited by Phaaze; 01-27-2007 at 11:45 PM.

  • #2
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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!
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Troy297 View Post
    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

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about this:

    Code:
    <!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

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    			<div id="header">
    				<div id="header-left">
    					Left
    				</div>
    				<div id="header-right">
    					Right
    				</div>
    				<div id="header-center">
    					Center				
    				</div>
    			</div>
    Code:
    	#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!
    Last edited by Phaaze; 01-27-2007 at 11:56 PM.

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LadynRed View Post
    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 ??

    Quote Originally Posted by LadynRed View Post
    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!
    Last edited by Phaaze; 01-28-2007 at 09:05 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •