CSS - Css Navbar

ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif.

what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css.

should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated.

www. cooperworkskilns.com

The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it.

This isn't working in IE. Lol, its created a rather interesting stairstep effect.

Is there a way to make it span evenly across the page without adjusting the width of each <li>?


Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line.

#navbar ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navbar li { margin: 0 0 0 0; }

#navbar a
{
float:left;
display: block;
text-align:center;
color: #000;
background-color: #FFF;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

#navbar a:hover
{
background-color: #003366;
color: #FFF;
border-top: 1px solid #fff;
border-left: 0px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

Hello,

This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway...

I finally got my buttons to work! It's time for the Smirnoff!

But my button are still giving me ...!

Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking...

Everything checks out with W3C except my buttons. Here's the html:
Code:

<div>
<span id="navcontainer1" class="button1">
<ul>
<li>
<a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span>

<span id="navcontainer2" class="button2">
<ul>
<li>
<a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer3" class="button3">
<ul>
<li>
<a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer4" class="button4">
<ul>
<li>
<a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a>
</li>
</ul>
</span> 

<span id="navcontainer5" class="button5">
<ul>
<li>
<a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li>
</ul>
</span></div>

Don't laugh...they work! Here's the stylesheet:
Code:

.button1 {
position: relative;
bottom: 100px;
right: 40px;
}

#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}

#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}

.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}

#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}

.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}

#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}

.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}

#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}

.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one. 
left: 520px;
}

#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}

#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}

W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!)

I was just thinking if they could somehow "validate" then maybe they would be more predictable.

Any suggestions?
Thanks

I'm very new to CSS, and I'm learning to use div tags for my layout. My navbar is a div within my header div, and it's not lining up the way I'd like. Here's a link for an example:

www . cooperworkskilns . com

The Home button should be at the bottom left of the header.

Here's the pertinent css:

#header{
margin:0px 0px 10px 0px;
padding:0px;
width: 700px;
height: 125px;
border-bottom: 1px solid #666;
background-image:url(../img/header.gif);
}

#navbar{
margin:0px 0px 0px 0px;
padding:0px;
width: 700px;
}

Hi all,

I'm pretty new to CSS and html, and I've run into a problem with a navbar I've created for a website. I want the navbar to extend the length of the content on each page, but I can't seem to set it for that. All I've been able to do so far is get it to fit the content of the navbar itself (too small), or set the height for a higher number of pixels than I need on most of the pages. This lets me accommodate the content on my lengthiest page, but it leaves the others with a lot of white space on the screen.

Could someone please take a look at the code and help me? Bolded line is the problem, but setting it to a percentage doesn't work, either. Thank you for answering what's probably painfully obvious!:

#navigation {
background: #CCCCCC;
float: left;
width: 18%;
height: 750px;
border-right: #990033 2px solid;
border-left: #990033 2px solid;
font-family: arial, sans-serif;
line-height: 150%;
background-image: url (navbar.jpg);
background-repeat: repeat-y;
}
#navigation ul{
list-style: none;
background-color: #CCCCCC;
padding: 5px;
margin: 0px;
text-align: left;
}
#navigation li a {
display: block;
color: #000000;
text-decoration: none;

Thanks to the forum I've worked out a prior issue but 2 remain in regards to the secondary navigation bar.

1. Width - If I use a value of 25% for the pages with 4 sub-links (i.e. "The Music" main) it spans the full width of the right column but in IE6 it pushes the box below it down abot 10px. In OP7, NS6, NS7 & Mozilla1.7 it displays properly.

2. a:hover - I can't seem to figure how to make the hover effect respond to mousing over all parts of the box. It only activates when hovering over the text portion. Works properly in the main-nav but not for the sub-nav (note - this is also ONLY IE related). Really not important unless it is an easy fix.


I have tested this site in IE6, NS6.2, NS7.1, OP7.5, Moz1.7. I know v4 browsers are a lost cause but if you could confirm success/failure in others I would appreciate it.

Regards,
Golem2

Arg, I want a simple, yet clean and cool looking navbar. I am using a modified style from oswd.org and it has something like this:

(solid line)
------------|Linkone|----|Linktwo|----|Linkthree|----------

like that with boxes around the links. I like it but if I add to many links and then view it with a very small resolution it doesn't look so good. It all splits up onto different lines and there is still only one solid line. I know a good bit about CSS so what do you think I should try? Tabs? Just a plain old simple line of lines that have color and stuff?

I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav.

Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16

If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16

In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from
a list apart.

Here are the things I'm struggling with:

1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left.

2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area.

The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css

The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list)

Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless.

Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute.

Thanks!

I'm having trouble getting my dropdown navbar to stretch the width of the parent container. I can get it almost the right width but I have to make the width 107.16px which seems really stupid and wrong to me. But if I change it to 100% the list becomes vertical and all jacked up. Any clues on how to get it to stretch the entire width of the container?

link

Thanks!

edit:
I added the follow css to get rid of the white border at the end of the navbar. It looks good in FF but in IE there's a small gap now between the navbar & the side of the container. I'm hoping that there's a better way to do this.
Code:

#contact_nav a {border:none;} /*Removes right border on end of navbar*/

Greetings,
I am attempting to increase the space between the navigation links listed on the left column of this index page.
fop27.org/fopnet/FPT/
I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page.
I have minimal knowledge of css and would greatfully appreciate any assistance.
All the Best!

When I use a the page title as a link, to go to a category or external page, in WordPress (most recent version) the page title with a link rather than just text in the title, gets moved about 3px down in stead of staying in line with the rest.

I am using the Graphpaper Press Gridline Lite theme.
the Website is gregdelima.com
and the relevant CSS is: gregdelima.com/wp-content/themes/gridline_lite/gridline_lite/style.css

Hi guys,

Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens,

Thanks in advance,

Scott.


HTML:

Code:

<div class="navbar">
<ul id="navlist">
<li><a href="./shop">SHOP NOW</a></li>
<li><a href="index.php">HOME</a></li>
<li><a href="contact.php">CONTACT</a></li>
<li><a href="faq.php">F.A.Q.</a></li>
</ul>
</div>

CSS:

Code:

.navbar {
    font-family:Impact;
    font-size: 23px;
	text-align:center;
	height:54px;
}
.navbar li {
    list-style:none;
    display:inline;
}
.navbar a {
    width:198px;
    color:#FFFFFF;
    background:url("rollover.gif") no-repeat;
    padding:12px 10px 13px;
    margin:0 0px;
}
.navbar a:hover { 
    background-position:0 -59px;
    color:#000000;
}
.navbar a:active {
    background-position:0 -118px;
    color:#FFFFFF;
}

Displayed in IE:

URL


Displayed in FF/Safari:

URL

Hi,
I have designed a webpage for a local organization, and am having some trouble with the navbar at the top of the page. This issue only happens in Firefox, as far as I can tell. The homepage (go to radnorhistory.org) is correct, and several other pages are messed up (click on 'membership,' for example); the first link, titled "collection" shows up as a text link above the navbar and not an image. Any ideas?
-Thanks!

Hey, I am trying to edit a blogger template. What I want to do is make each drop down menu a different background color. SO like one item says 1 (hover) 2 | 3 | 4 (background is red) next to 1 is 5 (hover) 6 | 7 | 8 (background is green).

Here is the layout and an example

@ www. faketester.blogspot .com

Hi guys
I'm having trouble trying to convert a CSS navbar, which renders vertically, into an horizontal navbar.

Look, here is the HTML Code, and following, the CSS code

Code:

<div id="menutoolbar">
  <ul>
     <li><a href="link1.html">Opcion1</a></li>
     <li><a href="link2.html">Opcion2</a></li>
     <li><a href="link3.html">Opcion3</a></li>
  </ul>
</div>

The CSS Code

Code:

div#menutoolbar {
    height: auto;
    width: auto;
}
div#menutoolbar li {
    height: 21px;
    width: 32px;
    margin: 0px;
    font-family: Tahoma;
    font-size: small;
    text-align: center;
    line-height: 65px;
    list-style-type: none;
    background-image: url(http://alf.openu.ac.il/www_eng/icon/button.gif);
	 background-position: center top;
    background-repeat: no-repeat;
}
div#menutoolbar li a {
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;	 
    text-decoration: none;
}
div#menutoolbar li a:link {
    color: blue:
}
div#menutoolbar li a:visited {
    color: #900;
}
div#menutoolbar li a:hover {
    font-weight: bold;
    color: red;
}

div#menutoolbar li a:active {
	color: black;
}

Does any1 know which code I have to modify to transform this vertical toolbar into horizontal ? Or maybe to point me to an easy example for doing an horizontal set of css buttons like this example...

Thanks...