1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to put a colored line at the top of a web page?

Discussion in 'CSS' started by Seqqa, Jun 21, 2011.

  1. #1
    I used to own a website with a line right at the top of the website is was like 5px in height, just wondered if anybody knew the CSS code to be able to do that and be able to set the color?

    + Rep for anybody who helps!

    Thanks.
    Seqqa, Jun 21, 2011 IP
    ApocalypseXL likes this.
  2. whichwayto

    whichwayto Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Code (Text):
    1. body { border-top: 5px solid #000; }
    Replace #000 with the colour of your choice.
    whichwayto, Jun 21, 2011 IP
  3. BRUm

    BRUm Well-Known Member

    Messages:
    3,086
    Likes Received:
    61
    Best Answers:
    1
    Trophy Points:
    100
    #3
    You could use the body element, although for flexibility I'd use a separate div:

    Code (Text):
    1.  
    2. *
    3. {
    4.     padding:0;
    5.     margin:0;
    6. }
    7.  
    8. div#line
    9. {
    10.     width:100%;
    11.     border-bottom:5px solid #yourcolour;
    12. }
    13.  
    This way you could alter it's size/positioning later on down the line.
    BRUm, Jun 25, 2011 IP
  4. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,101
    Likes Received:
    101
    Best Answers:
    5
    Trophy Points:
    215
    #4
    yep that's the way to do it
    ApocalypseXL, Jun 25, 2011 IP
  5. nikywm

    nikywm Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    to remove the white space add margin-top: 0;
    Code (Text):
    1. body { border-top: 5px solid #000; margin-top: 0; }
    nikywm, Jun 26, 2011 IP