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 wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Margins with different colors from body background

Status
Not open for further replies.
utoyo

utoyo

Technical User
Mar 5, 2005
123
US
Is there a way to set the background of a margin when the margin is defined in the body tag? For example, if the background color set in the body tag is black, can the margins be set to white?

Thanks in Advance.
 
Sort by date Sort by votes
It depends on your DOCTYPE, I'd say (as to whether you can use the HTML element or not)... although it might work with any DOCTYPE - I've just not tried:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-language" content="en">
	<title>Margin test</title>
	<style type="text/css">
		html {
			margin: 0px;
			padding: 0px;
			background-color: #000000;
		}
		body {
			margin: 20px;
			padding: 0px;
			background-color: #FFFFFF;
		}
	</style>
</head>

<body>
	This is some content&hellip;
</body>
</html>

Although depending on the result you want for content shorter than the browser window, you might find using borders better:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-language" content="en">
	<title>Margin test</title>
	<style type="text/css">
		html, body {
			margin: 0px;
			padding: 0px;
			background-color: #FFFFFF;
		}
		body {
			border: 10px solid #000000;
		}
	</style>
</head>

<body>
	This is some content&hellip;
</body>
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
The margin is pushing your content away and exposing what's behind it. Padding allows the color of the box you're content resides in expand beyond the content, sort of.

If it's just the 'margin' area you are looking to have colored differently then a thick border would be the route to take.

V
 
Upvote 0 Downvote
Another way would be:

Code: 
<body style="background:black">
<div style="background-color:white;padding:20px;">
<div style="background-color:black;color:white">
Text In Here
</div>
</div>
</body>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
336
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
463
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top