Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 13
Posts: 13   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 23570 times and has 12 replies Next Thread
Male RaptorRex
Advanced Member
Member's Avatar


Joined: Sep 16, 2005
Post Count: 126
Status: Offline
Reply to this Post  Reply with Quote 
CSS 2 color background

I've seen this requested a few times. How can someone have 2 background colors split down the middle. The technique here is to use z-index to create a layer of backgrounds then make a new writing canvas as a top z-index onto which you build the actual web page. Here is the code:

<html>
<body style='background-color: red; margin: 0px; height: 100%;'>
<div style='position: fixed; top: 0; left: 0; width: 50%; height: 400%; background-color: yellow; z-index: 1;'></div>
<div style='position: absolute; top: 0; left: 0; z-index: 2; width: 100%;'>
To have a web page background be half one color and half another color. Great for a two-tone look.
</div>
</body>
</html>

This example lays down a solid red body background then puts a 50% wide yellow div over top of it. Then over top of all, it makes the new writing canvas.

A few notes:
- you need to set <body> height so that height of elements within <body> can be relative to something.
- the yellow div has height: 400%. This needs to be big enough to exceed the content on the writing canvas. Play with it in explorer (with a HTML4.01 doctype)...you'll see what I mean.
- the last div uses "position: absolute". "fixed" should work just as well but does not in IE. But "absolute" does.

See example at: http://upwithabang.com/articles/example4/split-background.html

It is worth noting that this method of creating a layer to be a new writing canvas (overtop of everything else) allows backgrounds to be as complex as you want.

[Oct 28, 2007 5:12:26 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male torweb
Stranger




Joined: Oct 1, 2008
Post Count: 1
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

I'm trying to get this to format in Firefox so the yellow section is on the right. It's working that way in IE...

Thanks in adavance!! Here is my code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#right{float:right;}
</style>
</head>
<body style='background-color: red; margin: 0px; height: 100%;'>
<div id="right" style='position: fixed; top: 0; left: 0; width: 25%; height: 100%; background-color: yellow; z-index: 1;'></div>
<div style='position: absolute; top: 0; left: 0; z-index: 2; width: 100%;'>
To have a web page background be half one color and half another color. Great for a two-tone look.
</div>
</body>
[Oct 1, 2008 5:51:27 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

Lets fix a few things with the original code, such as using inline styles and omitting the doctpye. No point in using positioned: fixed; as its not supported in IE.

Body background will be whats seen the right, background div on the left. Just change colours and width to suit.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ff0; /*right bg */
}
#background { /*left bg */
position: absolute;
width: 50%;
height: 100%;
background: #f00;
}
#content {
position: relative;
z-index: 1; /* puts content on top of background in stack order */
}
</style>
</head>

<body>
<div id="background"></div>
<div id="content">blah blah blah</div>
</body>

----------------------------------------
Quiquid latine dictum sit altum viditur
----------------------------------------
[Edit 1 times, last edit by billyboy at Oct 2, 2008 5:18:47 AM]
[Oct 2, 2008 5:08:21 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

You know, the first time I looked at the original 2-way spit background, I thought, yeah that's really neat, but what could you use it for, until of course you stepped in with your code corrections.

Erm, billyboy, this is probably still not going to be of any use, but anyway from your code I've slightly mutilated it -- in ways I always do, and have come up with this just in the last 10 minutes or so...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
html, body {
height: 100%;
background-color: #FFF;
}
body {
margin: 0;
padding: 0;
background: transparent; /*right bg */
font-size: small;
text-align: center;
}
#one { /*left bg */
position: absolute;
width: 18%;
height: 100%;
margin: 0 auto 0 0;
text-align: center;
background: #F60;
}

#middle_column {
position: absolute;
width: 64%;
height: 100%;
margin: 0 0 0 18%;
font-family: verdana;
font-size: 1em;
background: #FFF;
}

#two { /*left bg */
position: absolute;
width: 18%;
height: 100%;
margin: 0 0 0 82%;

background: #090;
}

.content {
position: relative;
z-index: 1; /* puts content on top of background in stack order */
text-align: cente;
}
</style>
</head>

<body>

<div id="one">
<div class="content">
????
</div>
</div>

<div id="middle_column">
<h1>Hello billyboy</h1>
</div>

<div id="two">
<div class="content">
????
</div>
</div>

</body></html>
----------------------------------------
We Brits do things differently, but we still get shot at!
[Oct 2, 2008 7:36:48 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male billyboy
Advanced Member
Member's Avatar


Joined: Sep 3, 2005
Post Count: 2206
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

Mac, you weren't the only one that wondered what use doing that would be. wink At least the way you've done it, the content sits inside each column and you've got the basis for a three column layout.
----------------------------------------
Quiquid latine dictum sit altum viditur
[Oct 2, 2008 8:51:38 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

Well, guess what..?

It don't work, with a footer that is. I'm still having a go at this, but when I put too much text in the middle, which is the background part, it (the text) goes right on past the footer.

Not only that, but both faked side columns get left behind so that there is an almighty whitey area exposed.

Should have know something like this was going to happen. Oh well, back to the drawing. sad

Still, it was a good ride while it lasted, even up until the dreaded equalizing columns moment. cool
----------------------------------------
We Brits do things differently, but we still get shot at!
[Oct 2, 2008 9:14:17 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

Well, there goes another one into my 3-col graveyard...

http://www.macrankin.co.uk/web_projects/layouts/grail_hunting/bb3-col_bgs.html

Unfortunately, putting too much text into any one of these columns will leave the other two columns behind. You can have a footer but, again divs being divs will just flow on past anything in their way.
----------------------------------------
We Brits do things differently, but we still get shot at!
[Oct 2, 2008 10:40:40 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male ewwatson
Advanced Member
Member's Avatar

United States
Joined: Dec 19, 2007
Post Count: 1285
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

You know, the first time I looked at the original 2-way spit background, I thought, yeah that's really neat, but what could you use it for, until of course you stepped in with your code corrections.

Erm, billyboy, this is probably still not going to be of any use, but anyway from your code I've slightly mutilated it -- in ways I always do, and have come up with this just in the last 10 minutes or so...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
html, body {
height: 100%;
background-color: #FFF;
}
body {
margin: 0;
padding: 0;
background: transparent; /*right bg */
font-size: small;
text-align: center;
}
#one { /*left bg */
position: absolute;
width: 18%;
height: 100%;
margin: 0 auto 0 0;
text-align: center;
background: #F60;
}

#middle_column {
position: absolute;
width: 64%;
height: 100%;
margin: 0 0 0 18%;
font-family: verdana;
font-size: 1em;
background: #FFF;
}

#two { /*left bg */
position: absolute;
width: 18%;
height: 100%;
margin: 0 0 0 82%;

background: #090;
}

.content {
position: relative;
z-index: 1; /* puts content on top of background in stack order */
text-align: cente;
}
</style>
</head>

<body>

<div id="one">
<div class="content">
????
</div>
</div>

<div id="middle_column">
<h1>Hello billyboy</h1>
</div>

<div id="two">
<div class="content">
????
</div>
</div>

</body></html>


Without testing - from the looks of it that wouldn't work in IE6 anyways. You'd only get 100% height of the view port and that's it - no more. There are ways though (for the other browsers) to keep your footer from climbing up. Just use a clearing div (with no positioning) and give it the desired height to clear everything - that should work.
----------------------------------------
Eric :~)
Knowledge is Power
[Oct 2, 2008 11:03:40 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male MacRankin
Advanced Member
Member's Avatar


Joined: Dec 18, 2005
Post Count: 368
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

I was wondering about the viewport, and why the background wasn't stretching all the way as I had hoped.

Anyway, have a look at one of my earlier 3-col attempts. It works, but only if the controlling column is the middle one...

http://www.macrankin.co.uk/web_projects/layou...nting/test4grails_03.html

You know, I think I'm done with this trying to re-invent the wheel. From now on, I'm just going to concentrate on what works. smile
----------------------------------------
We Brits do things differently, but we still get shot at!
[Oct 2, 2008 11:40:03 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male ewwatson
Advanced Member
Member's Avatar

United States
Joined: Dec 19, 2007
Post Count: 1285
Status: Offline
Reply to this Post  Reply with Quote 
Re: CSS 2 color background

McRankin

Disclamer (without testing): try adding bottom:0; and left:0; to each column. Then feed height:999em; to each column for IE6 only. And the previous mentioned clearing div. How's that play?

Edit - "won't try to reinvent the wheel" nonsense, that's called "playing" and it's the "best" way to learn!
----------------------------------------
Eric :~)
Knowledge is Power
----------------------------------------
[Edit 2 times, last edit by ewwatson at Oct 2, 2008 11:51:32 AM]
[Oct 2, 2008 11:44:54 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 13   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread