homepage Welcome to WebmasterWorld Guest from 54.204.64.152
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Half the background one color, the other half a different color
Sgt_Kickaxe




msg:4442920
 10:14 am on Apr 19, 2012 (gmt 0)

I'm looking to split a background into two colors and am having some trouble. example: I'd like the entire left side of the screen to be black and the entire right side to be white with the split straight down the middle.

Possible using just css without images? I've had some success with gradients but it's not cross-browser friendly.

 

Paul_o_b




msg:4442978
 12:50 pm on Apr 19, 2012 (gmt 0)

Hi,

There are loads of ways you can do this depending on browsers support but here is a way that should work back to ie6 and beyond.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
html, body { height:100% }
body {
padding-right:50%;
background:#fff;
}
#outer {
background:#000;
min-height:100%;
}
* html #outer { height:100% }
.inner {
padding:1px 0;
margin-right:-100%;
position:relative;
zoom:1.0;
color:red;
}
p{padding:0 10px;margin:0 0 1em}
</style>
</head>

<body>
<div id="outer">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec sapien nec urna mollis sagittis. Suspendisse leo eros, tempus sed convallis vitae, rhoncus ut est. Nam ut orci sapien, ac vehicula quam. Mauris blandit sodales ipsum nec ornare. Curabitur sodales augue id mauris gravida mattis. Maecenas vitae dui turpis. Curabitur commodo velit ut arcu adipiscing id scelerisque velit ullamcorper. Quisque at consectetur justo. Fusce eget ipsum justo. Sed leo nisi, pulvinar at molestie id, consectetur in lacus.</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</body>
</html>




You could of course just make a very wide two tone image and repeat it centrally on the body for the same effect. Make the image about 3000px wide by about 5px high and it will cater for most everyone and still be a about a quarter of 1k so filesize is not really an issue.

lucy24




msg:4443113
 6:27 pm on Apr 19, 2012 (gmt 0)

My eyes hurt. Are you going to have the same text color running all the way across both backgrounds, or will the whole thing be structurally different, left and right?

Or did you simply say "black and white" as shorthand for "an attractive shade of blue and a slightly different but equally attractive shade of blue"? :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved