A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML
Talking HTML · Tom Norman
Audio is streamed directly from the publisher (media.blubrry.com) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.
Show Notes
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;
}
The post A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML appeared first on Schaffen Creative.