My Community

Tutorial 6 Creating A Navigation Bar With Links

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 6 Creating A Navigation Bar With Links
« on: November 05, 2014, 11:23:17 AM »
<html>
<head>
<title>Navigation Bars</title>
</head>
<style type="text/css">

* {
   padding: 0;
   margin: 0;
}
   
nav {
      background-color:black;
      height: 50px
}

nav ul {

}

nav ul li {
   list-style-type: none;
   width: 118px;
   float: left;
   border-right: 1px solid #CCC;
   text-align: center;
}

li a {
      text-decoration: none;
      color: white;
      line-height: 50px;
      display: block;
}

li a:hover {

   background-color: yellow;
   color: purple;
}

   
body {
    background-color: blue;
}

p {
   text-align: center;
   font-size:200%;
   font-face:Times New Roman;
}


h1 {
   text-align: center;
   font-size:200%;
}

a{

   color: red;
}

#main { padding: 0 6em 6em 6em;
   position: relative;
   background-image: url('hollywood.jpg');
    }
   
#content { background-color: white; }
</style>
<body>


<h1><FONT COLOR="yellow">Obsessed LA</FONT></h1>



<div id="main">
<nav>
   <ul>
      <li><a href="home.html">Home[/url]</li>
      <li><a href="about.html">About[/url]</li>
      <li><a href="sports.html">Sports[/url]</li>
      <li><a href="music.html">Music[/url]</li>
      <li><a href="fashion.html">Fashion[/url]</li>
      <li><a href="news.html">News[/url]</li>
      <li><a href="politics.html">Politics[/url]</li>
      <li><a href="food.html">Food[/url]</li>
                <li><a href="yogapants.html">Yoga Pants[/url]</li>

   </ul>
</nav>

<div id="content">


</div><!-- content -->


</div><!-- main -->
</body>

</html>   
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Creating A Navigation Bar With Links
« Reply #1 on: November 05, 2014, 11:34:20 AM »
In order to create a Navigation Bar With Links You need the CSS and HTML of a website.  The css involves a nav {  } bracket with curly braces.  Then you need to make a nav ul {   } because the links for your navigation bar will appear in an unordered list.  A nav ul li {} is also needed because your links appear in an <li></li> bracket.

After that you make a <nav> bracket with a <ul> bracket and then you make <li>home.html</li> brackets with links inside the brackets like the one seen above.  You keep making as many brackets as you want.  After that post a closing unordered list bracket like this </ul>.  And then you want a closing bracket for your navigation bar </nav>.

You may need to adjust the width of the navigation bars in the nav ul li {} in css depending on how many links you post.  You can also change the navigation bar.  The main content thing does let you use a background image just like I showed you in lesson 5 of HTML.  The other features like the #main and #content pages were from lesson 5 of CSS.

#main { padding: 0 6em 6em 6em;
   position: relative;
   background-image: url('hollywood.jpg');
    }
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Creating A Navigation Bar With Links
« Reply #2 on: November 05, 2014, 11:36:31 AM »
Lesson 7 for HTML, CSS, and Javascript involves making your own slideshow.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.