Set margins on background?

Vapor

05-31-2005, 09:22 PM

Ok, This is hard to describe but here it goes. I have some text on top of a background, and I moved the text around so that they overlap each other a tiny bit. The problem is, I can't seem to get the background to be closer around the text. I am trying to make a title bar for my site and it looks silly because there is too much background color. I want it to fit tightly around the text.

Here is the code so you can see what I mean.

<html>
<head>
<title>New Design</title>
<STYLE TYPE="text/css">

A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }
B { font-size: 15pt; line-height: 20pt }
</STYLE>
</head>
<body bgcolor="#000033">

<P STYLE="font-size: 30pt; color: green; font-family: papyrus, serif">This is a test</P>

<P STYLE="margin-top: -52px; margin-left: 0px; color: green; font-size: 28pt; font-weight: bold; font-family: papyrus, sans-serif">Offline</P>

</html>

Can I put margins on the background?

mark87

05-31-2005, 10:10 PM

I'm not sure, but the way I'd do it if you can't, is add padding to the body ( body { padding: 20px } etc), and then have everything inside a DIV which has a height and width of 100%, and has the background set as the background you want - should work.

Vapor

05-31-2005, 11:05 PM

Could you (or anyone) please give me an example of of that? I don't quite understand how to pad it so that my background would line up with the text.

Thank you

-Vapor

mark87

06-01-2005, 12:12 AM

Sorry didn't actually preview the code before, but what I said kind of goes anyway - did you mean something like so ?

<html>
<head>
<title>New Design</title>
<style type="text/css">

@import url(company.css);

h1 { background color: #330000; color: orange; font-family: impact }
p { font-family: papyrus, sans-serif }

body { background-color: #000033 }

a { text-decoration: none }
b { font-size: 15pt; line-height: 20pt }

p.1 { font-size: 30pt; color: green }

p.2 {
margin-top: -52px;
margin-left: 0px;
color: green;
font-size: 28pt;
font-weight: bold;
}

#test { background-color: #330000; width: 280px }

</style>
</head>

<body>

<div id="test">
<p class="1">This is a test</p>
<p class="2">Offline</p>
</div>

</body>
</html>

And you shouldn't really use inline styles... :)

EDIT - Tidied it up a bit for you.

Vapor

06-01-2005, 04:54 PM

Thank you Mark87.

But actually, that is not what I wanted, but with the code you gave me I was able to tweek it the way I wanted it. In stead of changeing the width of the banner, I wanted to make it more narrow. So I just changed width to height. Thanks man!

mark87

06-01-2005, 05:17 PM

lol ah ok, good good, glad you got it sorted. Next time perhaps try to be a bit more detailed in what you want. :)