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 4 of 4

Thread: Colour Block?

  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Colour Block?

    Im trying to make a bar which extends across the page, since it is just a single bar i dont want to tile an image, i just want to specify the colour, height and % width and stick that code in.

    Would any one be kind enough to tell me what i should be doing, im a little confused, i tried making a div with those specs but i didnt get anywhere.

    Regards,

    James

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    if you use a div (by default it is a block-level element) it will be 100% wide and as wide as it's containing element.

    something like:

    Code:
    #bar {
    background: #000;
    height: 10px;
    }
    Code:
    <div id="bar"></div>
    should accomplish what you need.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Great that worked! I have another question though if someone could also help me with that. How can i define the left and right margines for the bar, so there is a gap between the bar and the wall of the website?

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    #bar {
    background: #000;
    height: 10px;
    margin: 0 10px;
    }
    margin goes like most other properties: top, right, bottom and left. since I'm giving the top and bottom both margin of 0 an dleft and right margin of 10px then I can use more shorthand:

    Code:
    margin: 0 10px 0 10px;
    
    /* is shortend to */
    
    margin: 0 10px;
    see if that works for you.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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