A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

This is a basic web development tutorial on styling a primary navigation using HTML and CSS.

As always, the code will be in the show notes.

Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

 

/* HTML */

<nav id=”nav”>    

   <ul>

      <li></li>

     <li></li>

   </ul>

</nav>

 

/* Navigation */

#nav {
padding-top: 205px;
margin-left: 105px;
}
#nav ul li{
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
/*border-bottom: 3px solid #ffbf00;*/
border-top: 5px solid #fff;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.6em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
border-top: 5px solid #7c765b;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}

Podcast: Play in new window | Download (Duration: 17:19 — 15.9MB)

Subscribe: Apple Podcasts | Android | Email | RSS