Navigation Bar

#1
Brandon W

Posted 01 January 2009 - 01:56 PM

Writes binary right handed and hex left handed

Members
4,828 posts

First of all, I would to apologize for my inactivity. I need to get about 3 or 4 CSS layouts done, was suppose to be done before the new year. But I got really sick and I worked heaps so I didn't get it done. I would like to get it before it's second birthday, under 2 weeks now.

I have done the hard bit of the navigation bar, but I have some questions.

Here is what it should look like;
Posted Image

This is my current code;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <title>Daily Network</title>

        <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

    <body>

      <div id="wrapper">

        <div id="navWrapper">

          <div id="navBack">

            <img src="navBan.png" alt="Nav Background" />


            <div id="navList">


              <ul id="leftList">

                <li><a href="http://www.dailyw.org">DailyW</a></li>

                <li><a href="http://www.dwtorrents.org">Torrents</a></li>

                <li><a href="http://www.dailyw.org">Image Hosting</a></li>

              </ul>


              <ul id="rightList">

                <li><a href="http://www.postgenerator.com">Post Generator</a></li>

                <li><a href="http://www.tutorials.dailyw.org">Tutorials</a></li>

                <li><a href="http://www.dailyw.org">Proxy</a></li>

              </ul>


            </div>


           </div>

        </div>

      </div>

    </body>

</html>

CSS


body {

  background-color: black;

  padding: 0px;

  color: white;

}


/* Navigation Bar */

/* Main Nav Wrapper */

div#navWrapper {

  width: 100%;

  background: url('hdB.png') no-repeat fixed top center;

}


div#navBack {

  width: 100%;

  text-align: center;

  background: url('navB.png') repeat-x;;

}


/* Nav lists */

div#navList {

  margin: 0;

  padding: 0;

}


ul#leftList {

  float: left;

  list-style: none;

  margin: 0px;

  padding: 0px;

}


ul#rightList {

  float: right;

  list-style: none;

  margin: 0px;

  padding: 0px;

}


ul#leftList li {

  display: inline;

}


ul#rightList li {

  display: inline;

}

I have tried a few things. The problem I encounter with this is I want it to be right against the edges of the window. I have tried padding and margin to body and div#wrapper.

The other problem is the list of the navigation is below all the DIV's. It's ment to be over the first one. So basically at the top of the page.

How do I fix these 2 problems please?

jQuery Selectors Tutorial - jQuery Striped Table tutorial - jQuery Events - jQuery Validation

Sorry if I don't post as often as I did, I'll try to get here as much as possible! I'm working my bum off to get this scholarship and other stuff!

#2
Xav

Posted 03 January 2009 - 01:52 PM

Writes binary right handed and hex left handed

Members
13,118 posts

You can bring the div to the front with:

z-index: -1;

I would always recommend initialising margins and paddings like this, at the very top of the CSS file:

*
{
padding: 0;
margin: 0;
border: 0;
}

This should make divs reach the edges, but if not, then try this:

position: absolute;
top: 0;
left: 0;
right: 0;

And nice to see you. :)

Jordan said:

Good members, like yourself, stick around and post for ages to come!
Mr. Xav | Blog | Forums

#3
Brandon W

Posted 03 January 2009 - 02:34 PM

Writes binary right handed and hex left handed

Members
4,828 posts

Thanks Xav :) I am going to go and do it now, I shall edit this post to tell you how it came out. Thank-you, also I believe z-index apply's only to position: absolute or position: relative.

jQuery Selectors Tutorial - jQuery Striped Table tutorial - jQuery Events - jQuery Validation

Sorry if I don't post as often as I did, I'll try to get here as much as possible! I'm working my bum off to get this scholarship and other stuff!

#4
Xav

Posted 04 January 2009 - 12:35 PM

Writes binary right handed and hex left handed

Members
13,118 posts

Welcome. ;)

Jordan said:

Good members, like yourself, stick around and post for ages to come!
Mr. Xav | Blog | Forums

#5
Brandon W

Posted 04 January 2009 - 02:24 PM

Writes binary right handed and hex left handed

Members
4,828 posts

Sorry for not making a reply mate. I only just did it now, it worked with putting the padding, margin and border to 0. So that moved the banner to the edges.

z-index did not work with either the position set to relative and absolute. Didn't work even with position not set. What I did was set the position to absolute and just set top, left and right to 0.

Thanks for your help mate, much appreciated.

jQuery Selectors Tutorial - jQuery Striped Table tutorial - jQuery Events - jQuery Validation

Sorry if I don't post as often as I did, I'll try to get here as much as possible! I'm working my bum off to get this scholarship and other stuff!

#6
Xav

Posted 06 January 2009 - 01:06 PM

Writes binary right handed and hex left handed

Members
13,118 posts

Brandon W said:

What I did was set the position to absolute and just set top, left and right to 0.

Isn't that exactly what I said? :D

You're very welcome.

Jordan said:

Good members, like yourself, stick around and post for ages to come!
Mr. Xav | Blog | Forums

#7
Brandon W

Posted 06 January 2009 - 01:41 PM

Writes binary right handed and hex left handed

Members
4,828 posts

Most probably, but I didn't understand that you ment it for that :)

jQuery Selectors Tutorial - jQuery Striped Table tutorial - jQuery Events - jQuery Validation

Sorry if I don't post as often as I did, I'll try to get here as much as possible! I'm working my bum off to get this scholarship and other stuff!