Nav Bar

[Korey]

Could someone teach, or show me how to make a navigator bar for my websites.
Ik how to make a simple <div> </div> one I think.

 

[Snappy]

<div class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</div>

CSS

.navbar li {
display:inline;
}

or you could use the HTML5 tag <header>
</header>
That css is guessing you want a horizontal nav bar

 

[Sysode]

Come on man, we're not just going to spoonfeed you the stuff you need to know, you'll never learn. You'll need to start learning out these tags: ul, li, ol (preference based) and even <nav> if you want.

Anyway, through a quick Google search of 'css nav tutorial' I got these:

• You must be registered for see links
  
  
• You must be registered for see links
  
  
• Or, if you prefer videos...
  You must be registered for see links

There are plenty of videos/tutorials and so on. Just do a simple google search and ask for help once you get stuck.

@JonSnow - I would avoid doing that, a list-item (<li>) needs to be a child element of a <ul> in order to be valid. Like so..

<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>

 

[Snappy]

Come on man, we're not just going to spoonfeed you the stuff you need to know, you'll never learn. You'll need to start learning out these tags: ul, li, ol (preference based) and even <nav> if you want.

Anyway, through a quick Google search of 'css nav tutorial' I got these:

• You must be registered for see links
  
  
• You must be registered for see links
  
  
• Or, if you prefer videos...
  You must be registered for see links

There are plenty of videos/tutorials and so on. Just do a simple google search and ask for help once you get stuck.

@JonSnow - I would avoid doing that, a list-item (<li>) needs to be a child element of a <ul> in order to be valid. Like so..

<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>

ahaha shit I forgot that!

 

[Markshall]

Or you could of course use the HTML 5 <nav> tag.

 

[TheRealMoonman]

Nav Bar CSS and HTML using what Markshall said -
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">WATEVER</a></li>
<li><a href="#">WATEVER</a></li>
<li><a href="#">WATEVER</a></li>
<li><a href="#">WATEVER</a></li>
<li><a href="#">WATEVER</a></li>
<li><a href="#">WATEVER</a></li>
</ul>

1. <a href="#" id="pull">Menu</a>

</nav>
CSS -

body {
background-color: #watevercolor;
}

CSS -
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2pxsolid#283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px1px0px#283744;
}
nav li a {
border-right: 1pxsolid#576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
Sorry if this is a bit messy for some people but i use this Navigation style alot and it works fine
If you can make this look simpler thats even better