Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

split color screen

Status
Not open for further replies.
RedDucati748

RedDucati748

MIS
Mar 29, 2002
33
US
This may be an easy question to answer, but I can't seem to find the answer myself. I'm looking to make the screen/window two different colors, black on the left, white on the right. I want the whole thing split right down the middle 50/50.

Thanks, Red
 
Sort by date Sort by votes
Of course, put the style information into your stylesheet. I did this so you could copy and paste it into a text doc and save it as an html file to preview it.
Code: 
<html>
<head>
</head>

<body style="background: #BBB; margin: 0; padding: 0;">
<div style="padding: 0; margin: 0; float: left; background: #FFF; width: 50%; height: 100%;">
<br />
</div>
</body>

</html>
 
Upvote 0 Downvote
This is one way to do it, using styles:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="width:50%; background-color:black; float:left;">
<h1 style="color:white">White text on black background</h1>
</div>
<div style="width:50%; background-color:white; float:left;">
<h1 style="color:black">Black text on white background</h1>
</div>
</body>
</html>

You could also use a single two-column table:
Code: 
<table summary="" width="100%">
<tr>
<td width="50%" style="background-color:black">
<h1 style="color:white">White text on black background</h1>
</td>
<td width="50%" style="background-color:white">
<h1 style="color:black">Black text on white background</h1>
</td>
</tr>
</table>

The first method is preferred, the second method is easier to control.

Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
Since you have been given 3 examples for the latter, here is one for the former. It is a background image method.

bw.gif is a 1 pixel high 1600 pixel long image with half black & half white.

Try if you want the gif. I will leave it up for a couple of days.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Black and White</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {background: white url('bw.gif') center top repeat-y fixed;
</style></head><body>
<div align="center">
<h1><span style="color:white">Black &nbsp;</span> &nbsp;White</h1>
</body></html>



Clive
 
Upvote 0 Downvote
Ok, I have one follow-up question.

I'm having trouble placing an image over the split color background. I'm trying to center an image over the split background, but I'm running into problems.

Basically I want to have a background split down the middle, left side black, right side white, with a image over the background, I want the image to stay centered.

Thanks, Red
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Black and White</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {background: white url('[URL unfurl="true"]http://tubularity.com/bw/bw.gif')[/URL] center top repeat-y fixed;
</style></head><body>
<div align="center">
<h1><span style="color:white">Black &nbsp;</span> &nbsp;White</h1>
<img src="picture.jpg" alt="My Picture" />
</div></body></html>

Clive
 
Upvote 0 Downvote
Can anyone give me help or guidance regarding my additional question?
Thanks Red-
 
Upvote 0 Downvote
Ok, I feel like a real jack@#$. I scrolled down a couple times and figured I was looking at one of the original feedbacks.

Thanks CliveC.

Sorry about that Vragabond, I need to pay better attention to the details.

Thanks again, Red-

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
131
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Elements not populate the entire screen 1
Replies
1
Views
58
ChrisHirst
ChrisHirst
audiopro
  • Locked
  • Question
HTML Bookmark on touch screen 2
Replies
8
Views
100
Olaf Doschke
Olaf Doschke
audiopro
  • Locked
  • Question
Reliable screen size detection 3
Replies
13
Views
503
vacunita
vacunita
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
81
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top