How to create a header/ footer navbar like in this page?

Discussion in 'CSS' started by hitech24, May 24, 2012.

0
  1. #1
    Suggest me some css and maybe some html code to create a full width header/footer navbar like the black navbar in this site. Lessjunk.orgI would like the links to be centered too like the site i showed.
     
    Last edited: May 24, 2012
    hitech24, May 24, 2012 IP
  2. sooryaglare

    sooryaglare Greenhorn

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    two div with full width and text-align center will do the trick.

    <div id="header"> content of header here</div>
    Code (markup):
    and css will be
    
#header{
width:100%;
text-align:center;
background:#000;
color:#fff;
}
    Code (markup):
     
    sooryaglare, May 25, 2012 IP
  3. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #3
    In this case, you could even have used a class, and repeat the same one twice ;) This, however, won't work if you don't use CSS reset, or add this to body {} :
    margin: 0 auto;

    The reason behind this is that body has a default margin that goes from 5 to 8 pixels, depending of the doctype chosen.
     
    wiicker95, May 25, 2012 IP
  4. Dronoid

    Dronoid Greenhorn

    Messages:
    23
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    23
    #4
    You can easily add hover effect . Put CSS definitions into HEAD section : 

    <head>
<style>

body { margin:0 }  /* get rid unwanted frame around header */

#header 
{ 
height:60px; 
background:#333; 
text-align:center /* aligning your hyperlinks to the center */
}    

#header a
{ 
color:#f50; /* color of the text links within #header element */
font:bold 12px/60px Tahoma; /* text will be bolded, has size of 12px, line of height equals 60px ( in practise this is often using for vertical centering )  */
padding:5px 10px; /* this is expanding collision area around text, 5px vertically and 10px in horizontal */
}    

#header a:hover { color:#fff; }  /* the text will change color to white while is hovered */

</style>    
</head>
    HTML:
    and here is an HTML part 

    <body>
<div id="header">
    <a href="#">first option</a>
    <a href="#">second option</a>
    <a href="#">third option</a>
</div>
..... rest of your page ...
..... here could be a header   .....
</body>
    HTML:
    The very same rules apply to the footer
     
    Dronoid, May 25, 2012 IP