Help - Search - Members - Calendar
Full Version: Building A Nav Bar Using Css.
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
k.digennaro
I'm trying to get the concept down on how I would go abouts building a nav bar using CSS. Below is what I have so far. For the sake of learning, the design doesnt really matter right now. Right now I have buttons on a black background, with some text etc. Right now my nav bar looks simular to this.


I want to add a new back, but only to the nav bar, something like this.


How do I go abouts doing so?

Thanks,
Kevin

CODE
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color:white;
  background-color: #000000 }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 15;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: url(http://i269.photobucket.com/albums/jj66/ihclub_hockey/test.png) no-repeat;
  margin: 0.5em 0;
  padding: 0.3em; }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: solid }
Andrew
You would add another div tag around your navbar div tag, and put the background the same as your did for the navigation images. (make a new css element like navback{ } or something like that)

and after looking at your css i'm not sure you even have a div tag around your navigation. so if you don't just add it in like this <div class="navback"> navigation here </div>
And that should work out for you.
k.digennaro
Thanks, Ill try that.

Right now i decided to just start from scratch, and actually build my page, instead of just trying to learn. Right now I need to place my background as the background of the page. Instead of the color white, i want it to be this image. I tried to add it in, but it didnt work. wat did i do wrong?


CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>A.P Home</title>
<style type="text/css">
body {
   color: purple;
     background-image: <a href="http://s269.photobucket.com/albums/jj66/ihclub_hockey/?action=view&current=HomeRepair1.gif" target="_blank"><img src="http://i269.photobucket.com/albums/jj66/ihclub_hockey/HomeRepair1.gif" border="0" alt="Photobucket"></a> }
</style>

</head>
<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home Page</a>
    <li><a href="aboutUs.html">About Us</a>
    <li><a href="Gallery.html">Gallery</a>
    <li><a href="ContactInfo.html">Contact Info</a>
</ul>

<!-- Main content -->
<h1> A.P Home Repair</h1>

<h2><u>Our Mission</u></h2>
<p>We service, repair, and do all phases of home care. No job too small or big. You service your car on a regular basis to protect your investment. Why not do the same to your biggest investment, your home. Free estimates! Call today! 513-239-1616. Ask for Paul Huffman.</p>

</body>
</html>
Andrew
lol, don't use the whole code from photobucket!

Change
CODE
body {
   color: purple;
     background-image: <a href="http://s269.photobucket.com/albums/jj66/ihclub_hockey/?action=view&current=HomeRepair1.gif" target="_blank"><img src="http://i269.photobucket.com/albums/jj66/ihclub_hockey/HomeRepair1.gif" border="0" alt="Photobucket"></a> }


To
CODE
body {
   color: purple;
background-image: url(http://i269.photobucket.com/albums/jj66/ihclub_hockey/HomeRepair1.gif) }
MrTouz
i suggest you to make each button a separate element.

Instead of having (like the first post you made) 6 buttons next to each other (well on top of each other) just create ONE button and use it as many time as youw ant. It'll be easyer to add or remove buttons later on when you update your site.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.