Making it so you can click around navigation bar?

Question

While I was making my navigation bar for my site, I wondered how I'd make every nav in a box so you can click around the instead of having to click on the letters. I've seen this done without making a div for each navbar. This is what i'm talking about:

This is the html I use for the navigation bar:

    <div class="Nav">
        <h2><center><strong>Blitz</strong></center></h2>
        <ul>
            <li><a href="index.php">Home |</a></li>
            <li><a href="forums.php">Forums |</a></li>
            <li><a href="#">Blog |</a></li>
            <li><a href="#">About us |</a></li>
            <li><a href="#">Info </a></li>
        </ul>
    </div>



This is the css I was using: 

/*CSS script*/

body{
margin:0;
padding:0;

}


.infobox h5{
    margin:0 auto;

}

.infobox p{
    font-size: 17px;
}


.siteoffering h2{
    margin:0 auto;

}

.mainpage{
margin:0 auto;
width:75%;
height:auto;
background:#1CFFED;

}

.Nav{
margin:0 auto;
width:75%;
height:auto;
background:#A7EAFC;
overflow:auto;
border-bottom: 2px solid black;
}

.Nav ul li{
list-style:none;
float:left;
}

.Nav a{
    margin-right:20px;
    margin-left:20px;
    color:black;
    text-transform:uppercase;
    text-decoration:none;
    font-family: Arial sans-serif;
    font-weight: bold;
}



.Nav a:hover{
color:blue;
text-decoration:underline;
}

Where's your CSS so far? You need to have tried doing some CSS works and not just the HTML. Meanwhile, your images don't give a true representation of what you want done. — OmniPotens, Aug 27 '15 at 15:25
possible duplicate of [How do I make the whole area of a list item in my navigation bar, clickable as a link?](http://stackoverflow.com/questions/3074454/how-do-i-make-the-whole-area-of-a-list-item-in-my-navigation-bar-clickable-as-a) — abaldwin99, Aug 27 '15 at 15:28

hungerstar · Accepted Answer · 2015-08-27T15:40:43.547

That's usually done through line-height, display: block|inline-block and padding. Or a mix of on the anchor element <a>.

Here's one example:

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="forums.php">Forums</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Info</a></li>
</ul>

ul, li {
    list-style:none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    border-left: 1px solid #ccc;
}
li:first-of-type {
    border: 0;
}
li a {
    display: inline-block;
    padding: 15px;
    line-height: 40px;
}

jsFiddle: http://jsfiddle.net/1q32s584/1/

P.S. I noticed you are using depreciated markup, specifically the <center> tag.

score 0 · Answer 2 · answered Aug 27 '15 at 15:25

0

If you want to add padding to your links, you can use this CSS:

a {
  display: block;
  padding: 5px 10px;
}

answered Aug 27 '15 at 15:25

benjarwar

1,794
1
13
28

Making it so you can click around navigation bar?

2 Answers2