CSS - Navbar With Mouseover Using Ul And Li.

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

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

Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS.

Here's my CSS for the navbar formatting:
Code:

#navbar ul { 
		margin: 10px auto auto auto; 
		padding: 6px; 
		list-style-type: none; 
		text-align: left; 
		background-color: #000;
		font-family: arial;
        } 

#navbar ul li {  
		display: inline; 
		font-family: arial;
        } 

#navbar ul li a { 
		text-decoration: none; 
		padding: .2em 1em; 
		color: #ffffff; 
		background-color: #000000; 
		font-family: arial;
        } 

#navbar ul li a:hover { 
		color: #000000; 
		background-color: #ffffff; 
		font-family: arial;
        } 

And here's the code I have in the body of my HTML that adds each of the items to the navbar:
Code:

<div id="navbar"> 
	<ul> 
		<li><a href="index.html">Home</a></li> 
		<li><a href="gallery.html">Gallery</a></li>
		<li><a href="irc.html">IRC</a></li>
		<li><a href="about.html">About</a></li>		
		<li><a href="contact.html">Contact</a></li> 
	</ul> 
</div>

Anyone have any ideas on how I would do this?

Thanks.

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.

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!

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

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

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?

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;

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

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!

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

new to the world of css and now working on a shell for a website I'm doing.

here is the css
PHP Code:
 html, body{ 
 margin:0; 
 padding:0; 
 }
 
h1, h2, h3, h4, h5, h6 {
 color: #bf9060;
}

img {
    padding-bottom: 2px;
}
 
#pagewidth{ 
 width:100%; 
  min-width: 500px; 
  
} 
 
#header{ 
 height:88px; 
 width:100%; 
 background:#ccae8f; 
 background-image: 
 url("/images/pillowback3.jpg");
 background-repeat: repeat-x;
 }
#navcontainer
{
margin: 0;
padding: 0;
height: 25px;
width: 100%;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;

}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #ffffff;
width: 125px;
height: 18px;
border: 1px solid #ccae8f;
padding: 0;
margin: 0;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #806c59;
}

#navcontainer a:active
{
background: #806c59;
color: #ffffff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
} 





and the list
PHP Code:
<div id="navcontainer">
            <ul id="navlist">
            <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li>
            <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li>
            <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li>
            <li><a href="/products/index.php" title="See our full line of Products">Products</a></li>
            <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li>
            <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li>
            </ul>
            </div> 





as you can see i'm using px to style the size of the elements, but that isn't very liquid

Guys,

In IE, when I hover over a folder menu, the text in its sub-menu is missing.

The entire navbar works fine in both Firefox and Chrome. Any suggestions?

HTML PART:

Quote:
<!-- Start of Navbar header -->
<div id="header">
<div id="lgo"><a href="index.html"><strong>RIVER rafting</strong></a></div>
<ul class="menu">
<li><a href="index.htm" id="m1" class="act">home</a></li>
<li><a href="locations.htm" id="m2">Locations</a>
<ul id="me2">
<li><a href="locations.htm">Hiranandani</a></li>
</ul>
</li>
<li><a href="corporateevents.htm" id="m3">Corporate Events</a>
<ul id="me3">
<li><a href="corporateevents.htm#activities">Activities</a></li>
<li><a href="corporate-events/locations.htm">Outbound Locations</a></li>
<li><a href="corporate-events/goals.htm">Goals</a></li>
</ul></li>
<!-- <li><a href="index-3.html" id="m4">news</a></li> -->
<li><a href="equipmentsales.htm" id="m5">Equipment Sales</a>
<ul id="me5">
<li><a href="equipment-sales/markers.htm">Paintball</a></li>
<li><a href="equipment-sales/atvs.htm">ATVs</a></li>
<li><a href="equipment-sales/zorbing.htm">Zorbing</a></li>
</ul>
</li>
<li><a href="aboutus.htm" id="m6">About Us</a>
<ul id="me6">
<li><a href="about-us/contactus.htm">Contact Us</a></li>
<li><a href="aboutus.htm">About Headrush</a></li>
<li><a href="about-us/media.htm">Media</a></li>
<li><a href="about-us/corporateclients.htm">Corporate Clients</a></li>
</ul></li>
</ul>
</div>
<!-- End of Navbar -->


The CSS IS:

Code:

ul.menu {
	position:absolute;
	top:135px;
	left:0;

	width:327px;
	height:300px;
}
ul.menu li:hover > ul  {
 visibility: visible;
}
ul.menu ul {
 visibility: hidden;
 position: absolute; 
 width: 80%;
 height:80%;
 top: 1px;
}
ul.menu ul li {
 float: none;
 background-position: 0px 46px;
 font-size:0.4em;
 line-height:31px;
 padding:0 0 0 15px;
}


ul.menu ul li a:hover {
	text-decoration:underline;
}
	ul.menu li {
		width:100%;
		overflow:hidden;
		height:50px;
	}
		ul.menu li a {
			display:block;
			font-size:4.0em;
			line-height:57px;
			text-transform:uppercase;
			text-decoration:none;
			letter-spacing:0px;
			background:url(images/menu_bg.png) no-repeat top left;
			color:#000;
			padding:0 0 0 25px;
			height:53px;
			margin:-3px 0 0 0;
		}
		a#m1 {
			width:327px;
			background-position: 0 -103px;
		}
		ul#me1 {
 		top: 1px;
 		left: 40%;
		}

		a#m2 {
			width:327px;
			background-position: 0 -86px;
		}
		ul#me2 {
 		top: 45px;
 		left: 55%;			
		width:150px;
		}
		a#m3 {
			width:327px;
			background-position: 0 -6px;
		}
		
				ul#me3 {
 		left: 85%;
		top: 13px;
		width:180px;
		}
		a#m4 {
			width:327px;
			background-position: 0 -46px;
		}
		a#m5 {
			width:327px;
			background-position: 0 -6px;
		}

		
		ul#me5 {
 		left: 80%;
		top: 50px;
		width:130px;
		}
		a#m6 {
			width:327px;
			background-position: 0 -163px;
		}
		ul#me6 {
 		left: 55%;
		top: 45px;
		width:180px;
		}
		a:hover#m1, a.act#m1 {
			width:327px;
			background-position: -327px -103px;
		}
		a:hover#m2, a.act#m2 {
			width:327px;
			background-position: -327px -86px;
		}
		a:hover#m3, a.act#m3 {
			width:327px;
			background-position: -327px -6px;
		}
		a:hover#m4, a.act#m4 {
			width:327px;
			background-position: -327px -46px;
		}
		a:hover#m5, a.act#m5{
			width:327px;
			background-position: -327px -6px;
		}
		a:hover#m6, a.act#m6{
			width:327px;
			background-position: -327px -163px;
		}

Thanks

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