Zymic Webmaster Forums > Building A Nav Bar Using Css.

Full Version: Building A Nav Bar Using Css.

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

k.digennaro

Apr 27 2008, 11:22 PM

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

Apr 28 2008, 04:00 AM

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

Apr 28 2008, 05:48 PM

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>


<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>


<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

Apr 29 2008, 05:55 AM

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> }

CODE

body {
color: purple;
background-image: url(http://i269.photobucket.com/albums/jj66/ihclub_hockey/HomeRepair1.gif) }

MrTouz

Apr 29 2008, 09:00 AM

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.