How do I format my navigation bar in HTML and CSS? - css

Question

I'm a relative newcomer to web design - after learning the basics a while ago (and promptly forgetting them), I started reading about it a few months ago. I've begun to make my own web pages in order to test and improve my skills, but I'm having issues with getting my navigation bar to display properly. The HTML code for my navigation bar is as follows:
<div class="nav">
<ul class="nav">
<li class="nav"><a class="nav" href="#">Home</a></li>
<li class="nav"><a class="nav" href="#">Coffee</a></li>
<li class="nav"><a class="nav" href="#">Food</a></li>
<li class="nav"><a class="nav" href="#">Catering</a></li>
<li class="nav"><a class="nav" href="#">About</a></li>
<li class="nav"><a class="nav" href="#">Contact</a></li>
</ul>
</div>
<!--Navigation bar.-->
The CSS code for the pertinent elements (div, ul, li & a) is all listed below:
div{
border: 2px;
border-radius: 3px;
margin: 0 auto 60 auto;
padding: 10px;
width: 980;
}
/*BASIC DIV ELEMENT.*/
/*LINKS.*/
a{
color: #545454;
font-family: lucida grande, lucida sans, sans-serif;
font-size: 14px;
text-decoration: none;
}
a:hover, a:active {
color: #191919;
}
/*LINKS.*/
/*NAV BAR*/
a.nav:link{
background-color: #D7C5CC;
color: #191919;
display: inline-block;
padding: 15px;
text-align:center;
width: 90px;
}
a.nav:hover{
color: #191919;
background-color: #EDD9DF;
}
li.nav{
float: left;
}
ul.nav{
display: center;
margin: 0 auto 0 auto;
}
/*NAV BAR*/
I'm an absolute beginner when it comes to writing HTML and CSS code, so apologies if that was poorly done. I'm having trouble with the navigation bar on two fronts:
I can't get the corners of the navigation bar to round properly. I've previously altered ul.nav and li.nav to have "border-radius: 10;" as an attribute - both to no avail.
I can't get the navigation bar to center properly on my page (I'm testing it in Chrome). Every other div centers perfectly; and I've tried editing the "display" and "float" attributes to no effect.
I've searched through many similar posts on Stackoverflow, but none of the answers seemed to get the desired result.
EDIT: My goal is to have a continuous (where all of the buttons are "connected") navigation bar where only the outermost corners are rounded. For example:
http://cssmenumaker.com/menu/indented-horizontal-menu

Answer 1

All you need is to add this CSS:
ul.nav li:first-child a {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
ul.nav li:last-child a {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Here is a jsFiddle if that helps too.
Also, if you want an exact copy of the example you gave a link to, then here's that jsFiddle.

Answer 2

Please check this: jsFiddle.
To add a border-radius, I added the following CSS:
a.nav:link {
border-radius: 10px;
}
To center the navigation menu, I added the following CSS:
ul.nav{
text-align: center;
}
I also removed the float: left property assigned to li.nav and added this new CSS to it:
li.nav{
display: inline-block;
}

Answer 3

well in first time your class is invalide because you apply the same in differents levels, if you have a css properties for your class this properties maybe will have conflicts or not work.
in this case my recomendation is:
<nav>
<ul class="navbar">
<li class="nav-item selected">Home</li>
<li class="nav-item">Coffee</li>
<li class="nav-item">Food</li>
<li class="nav-item">Catering</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<style>
nav{
position:fixed;
}
.nav-item{
color: #000;
border: 1px solid blue;
background-color: rgba(255, 255, 255, .6 )
}
.nav-item:hover
{
background-color: rgba(0, 255, 255, .6 )
}
.selected{
color: #058;
border: 1px solid red;
background-color: rgba(255, 0, 255, .6 )
}
nav: is html5 item to make navigation bars
class {
navbar: there is the ensamble of items, use for set general options, distribution, for all items in navbar.
nav-item: is for create options for every sngle item, is posible create effects.
selected: other class for marked a selected item, is possible use many class in the same item, only need write a space, with javascript is possible set or delete a class, in this this case
<script>
$(".nav-item").click(function(){
$(".nav-item").removeClass("selected");
$(this).className = $(this).className + "selected";
});
</script>
this function change the class selected to the item clicked.
}
the style is only an uggly example