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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Background help

  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Background help

    I am desiging a site and I discovered that I like the background to this site. My question is, How can I get a background similar to this? Is it a simple html code, or is it a graphic linked to the site?

    If it is a code, could I get a little help from anyone on the code?

    Thanks,
    Vapor

  • #2
    New to the CF scene
    Join Date
    Aug 2005
    Location
    I live at home...normally though sometimes at work
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your link may need to be looked at again...

    the site linked just has a plain background...? please explain in more detail.

    I guess its one page in particular off the link rarther than the home page..?

    Cheers

    Mike

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    No,

    The homepage does not have a plain background.
    It has a gray colored background with a box that has black strips and a darker gray on top.

    How do you create that?

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Right-click -> View Source

    It's a 3-column table, with CSS classes applied to each cell. So: not images. HTML.

    Try this if you're still confused. It's ugly code but it works. Well, in IE.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <style type="text/css">
    body{
    margin:0;
    padding:0;
    }
    .sidecolumn{
    background-color:#990000;
    }
    .middlecolumn{
    background-color:#000099;
    }
    </style>

    </head>

    <body>

    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr>
    <td class="sidecolumn" width="10%">&nbsp;</td>
    <td class="middlecolumn" width="80%" align="center" valign="middle">Content blah blah</td>
    <td class="sidecolumn" width="10%">&nbsp;</td>
    </tr>
    </table>

    </body>
    </html>

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    The site uses tables but its just as easy in CSS.

    give your background a mid grey background

    then make a second container approx 95% in width with a black background and a 1px pale grey border

    Then inside there make a 60% wide box thats darker than your main page grey and lighter than black and thats where your content goes.

    Code:
    <html>
    <head>
    <style>
    body{
    background-color:#666;
    }
    
    #container{
    border:1px solid #CCC;
    width:95%;
    background-color:#000;
    margin:auto;
    }
    
    #main{
    background-color:#333;
    width:60%;
    padding:5px;
    margin:auto;
    
    }
    </style>
    </head>
    <body>
    <div id = "container"><div id = "main">&nbsp;</div></div>
    </body>
    btw, I made the colours up

  • #6
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Thank you very much! That is all that I wanted! I will tweek the code around a bit to fit my needs.

    Thanks again!

  • #7
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    NancyJ,

    I have a question.

    In the last code that you posted, how can I pull that colored bar down and place text on top of it like the example site I posted.

    I can't seem to figure it out.

    THanks

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try z-index:0; for the bottom part, and z-index:1; for the top portion. I think this is what you are asking about.

  • #9
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    ? I don't understand

  • #10
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I figured out how to resize the color portion of the box but I can not for the life of me figure out how to place text on TOP of the colored portions. It either puts my text above or below.

    Any help?

  • #11
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    Quote Originally Posted by Vapor
    NancyJ,

    I have a question.

    In the last code that you posted, how can I pull that colored bar down and place text on top of it like the example site I posted.

    I can't seem to figure it out.

    THanks
    not sure I understand what you're asking?
    To type on top of the middle bar, just type in the #main div and set the color: to something readable

  • #12
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Sorry about that, my description skill lack desire somethings. What I was asking was how to resize that bar. I did figure that out, but what I can not figure out is how to place text on top of the background. It either places the text above or below the background that has been created. The background does me no good if it is not behind the text.

    Here is the code:

    Code:
    <html>
    <head>
    
    <style>
    body{
    background-color:#666;
    }
    
    #side1{
    border:1px solid #CCC;
    height: 90px;
    background-color:#000;
    margin:auto;
    }
    
    #main{
    background-color:#333;
    width: 88px;
    height: 1000%;
    padding:5px;
    margin:auto;
    }
    
    </style>
    </head>
    <body>
    <font color="red">
    <div id = "side1"><div id = "main">&nbsp;</div></div>
    </font>
    </body>
    </html>
    Now where do I insert the text to be on top?
    Last edited by Vapor; 08-30-2005 at 11:26 PM.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Replace &nbsp; with your text.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I did that but then when I do it starts resizing my colored background to conform to my text. I want the background to stay locked in place but it wont do that.

    I know there has to be a way.

    ...but how?

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It doesn't resize.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    <style>
    body{
    background-color:#666;
    }
    
    #side1{
    border:1px solid #CCC;
    height: 90px;
    background-color:#000;
    margin:auto;
    color:#FF0000;
    }
    
    #main{
    background-color:#333;
    width: 88px;
    padding:5px;
    margin:auto;
    }
    
    </style>
    </head>
    <body>
    <div id="side1"><div id="main">This is text</div></div>
    </body>
    </html>
    If you put in more text than its width then yeah it might resize in height.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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