Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Question Set margins on background?

    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.

    Code:
    <html>
    <head>
    <title>New Design</title>
    <STYLE TYPE="text/css">
    <!--
    @import url(company.css);
    H1 { background color: #330000; color: orange; font-family: impact }
    P { background: #330000; font-family: courier }
    -->
    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?

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    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

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry didn't actually preview the code before, but what I said kind of goes anyway - did you mean something like so ?

    Code:
    <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.
    Last edited by mark87; 06-01-2005 at 12:18 AM.

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    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!

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lol ah ok, good good, glad you got it sorted. Next time perhaps try to be a bit more detailed in what you want.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •