CSS - Help With Horizontal List Navigation In Mozilla

I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs.

As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that.

Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/

This is the solution I found - lwptsa . org/newsite/dropdown . html

But I am unable to get the dark blue to continue to the end of the container.

** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg

I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B).

Hopefully this makes sense. My style sheets a

No drop-down menu, but working spacing and white separating lines (id - navigation):
lwptsa . org/newsite/
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#navigation
{
	font-size:small;
	float: left;
	width: 1024px;
	background: #002664;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */

}

#navigation li a
{
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { color: #a3d869; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu):
lwptsa . org/newsite/dropdown . html
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#menu ul
{
  font-family: Arial, Verdana;
  font-size:small;
  margin: 0;
  padding: 0;
  list-style: none;}

#menu ul li
{
  display: block;
  position:	relative;
  float: left;}

#menu li ul { display: none; }

#menu li a
{
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #002664;
  margin-left: 1px;
  white-space: nowrap;}

#menu ul li a:hover {   background: #00693e; }

#menu li:hover ul {
  display: block;
  position: absolute;
}

#menu li:hover li {
  float: none;
  font-size: 11px;
}

#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Any and all help welcome. I'm trying to redesign the look and information of the PTA's website.

a.

I'm a CSS novice, struggling to understand the nuances of some open source CSS I'm using for a site.

The main horizontal navigation has an extra item at the end of the row and I can't figure out why. Can you help me get rid of it?

Here is my include for the navigation:

<ul>
<li><a href="/index.shtml">Home</a></li>
<li><a href="/about.shtml">About</a></li>
<li><a href="/ultreyas.shtml">Ultreyas</a></li>
<li><a href="/weekends.shtml">Weekends</a></li>
<li><a href="/FAQs.shtml">FAQs</a></li>
<li><a href="/servant_community.shtml">Servant Community</a></li>
<li><a href="/resources.shtml">Resources</a></li>
<li><a href="/stay_in_touch.shtml">Stay in Touch</a></li>
<li><a href="/donate.shtml">Donate</a></li>
</ul>

Here is the CSS:
/*----------------------------*/
/* 2.4 - Navigation - Level 2 */
/*----------------------------*/
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(64,134,204); font-weight: bold;}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

I'd like "Donate" to be the last item, but there is another empty box appearing to the right of it.

Much obliged,

Laurie

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

Hi,
I need some help with understanding why netscape is rendering list items differently to IE

The Embedded (Dreamweaver-wizard-created) style sheet looks like this:
Code:

<style type="text/css">
<!--
.bul-mnu-lst {
	font-family: "Trebuchet MS", "Andale Mono", "Arial Unicode MS", "Eras Medium ITC", "Microsoft Sans Serif";
	font-size: 80%;
	line-height: 140%;
	color: #666666;
	list-style-position: inside;
	display: list-item;
	font-weight: bold;
	vertical-align: text-top;
	list-style-image:  url(hme_imgs/bullits/dottedArrw_bul.jpg);
	list-style-type: none;
}
-->
</style>

the HTML using the sheet looks like this:
Code:

<div id="activitiesMnu" style="position:absolute; width:218px; height:186px; z-index:1; left: 17px; top: 227px; visibility: visible;">
        <p class="bul-mnu-lst">&nbsp;&nbsp;football</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;rugby</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;tennis</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;badminton</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;swimming</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;squash</p>
        <p class="bul-mnu-lst">&nbsp;&nbsp;volley-ball</p>
</div>

The problem is, Netscape based browsers are ignoring the, line-height: attribute or just misinterpreting it and using what looks like double spacing between lines. This is causing the layer to overlap other page items and looks aweful.

In I.E, it looks as expected. i've tried changing to percentages instead of pixels for the value as heard percentages are best

Also tried, list-style-position from 'outside' to 'inside' values and, list-style-image: to non and used a default preset setting (square) bullet-style.

- but the problem persists.

any suggs??

Hi,

I'm trying to make a horizontal list using li tags. I got the text to align horizontally but the bullet icons I want to use (or even when I try with the default bullets) don't appear.

Can anyone help me out with this? Here's the code :


Code:

#onlineToolsNav ul {
	margin-top: 0px;
	margin-bottom : 0px;
	margin-left : 5px;
	padding: 0px;
	line-height: 25px;
	white-space: nowrap;
	display : inline;
}

#onlineToolsNav li {
	display: inline;
	list-style-image: url(onlineArrow.jpg);
	list-style: url(onlineArrow.jpg);
}

#onlineToolsNav li:before {
	content: url(onlineArrow.jpg);
	}
	
#onlineToolsNav li.first:before {
	content: " ";
	}

  <div id="onlineToolsNav"> 
    <ul>
      <li><a href="link1.html">link1</a></li>
      <li><a href="link2.html">link2</a></li>
      <li><a href="link3.html">link3</a></li>
      <li><a href="link4.html">link4</a></li>
      <li><a href="link5.html">link5</a></li>
      <li><a href="link6.html">link6</a></li>
    </ul>
  </div>

Thanx
Olografix

I think I have the basics down to making my ul navigation list display as a nav bar. The rules I am using are Code:

div#navigation
{
   background: #7799aa;
   color: #ffffff;
   margin: 4px 0 0 0;
}
   div#navigation ul { list-style-type: none; margin: 0; padding: 8px; }
      div#navigation ul li { margin-right: 50px; width: 200px; display: inline; }
      div#navigation ul li a { color: #ffffff; width: 400px; }
      div#navigation ul li a:hover { background: #255599; }

and the corresponding html Code:

<div id="navigation">
      <ul>
         <li><a href="/" title="The Company">Company</a></li>
         <li><a href="/" title="Our Solutions">Projects</a></li>
         <li><a href="/" title="What We Do">Services</a></li>
         <li><a href="/" title="Contact Us">Contact</a></li>
         <li class="last"><a href="/" title="What people are saying">Testimonials</a></li>
      </ul>
   </div> <!-- navigation -->

Now, the problem is that I am trying to make the links seem like "buttons" or blocks. I cannot get them to a) have a width; or b) expand to the width of the list item (which I cannot give a specified width to either).

I am still working with the design in firefox so I haven't ventured into getting it to work in IE. The XHTML is completely valid as is the rest of the stylesheet. I can post more if necessary, but does anyone have a bone?

Hi ppl
I'm trying to figure out how to do the following list, with CSS



Is there any way that the boxes can accomodate themselves based on the width of their container's space?

I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so...

Thanks

I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do.

I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha.

My HTML looks like this:

Code:

<li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub pos1">
			<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
				<div class="border b1"></div>
					<div class="base div1">
					<h4>August 2005</h4>
					<p>August 29</p>
                          <p>New school division office will be in Weyburn</p>
                         <ul>   
				<li><a href="#url">Section 1</a></li>
				<li><a href="#url">Section 2</a></li>
				<li><a href="#url">Section 3</a></li>
			</ul>
					</div>
					</div>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>

and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this:

Code:

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}

Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point.

Is there any way to add a horizontal scrollbar to a SELECT listbox that works in both Mozilla and IE? I have a mutiple-select enabled box with about 50 items, only displaying 10 rows, and some of the rows are really wide because the text is very lengthy. I'd like to add a horizontal scrollbar to the SELECT box in addition to the vertical scrollbar.

Here's what I've tried - I'm running Windows XP and testing with Firefox 1.0 and IE 6.0.2.

a) Adding various overflow styles, like overflow:scroll and overflow-x:scroll. None of these cause the horizontal scrollbar to show up.

b) Adding the mozilla "-moz-scrollbars-horizontal" style, which doesn't add it even in Mozilla.

c) Surrounding the SELECT inside a DIV tag, with scrollbars. This works, and IE is even smart enough to remove the vertical scrollbars on the SELECT listbox if I make it tall enough to show all choices at once. However, in Mozilla, the vertical scrollbar stays visible even when it's not needed. So in this case I end up with two vertical scrollbars - one for the SELECT and one for the DIV. I tried various things to disable the Mozilla vertical scrollbar but that didn't work either.

So basically I'm looking for a way to either:

a) Add a horizontal scrollbar to a SELECT that works in both browsers.

b) Or, a way to disable the vertical scrollbar in the SELECT object in Mozilla Firefox, so that I can use the DIV trick.

Any clues?

Hi, I have a site with a horizontal menu bar that has a submenu that pops up with the top menu is hovered over. I've got everything working fine, except for one little thing; in Firefox the submenu is vertically aligned instead of horizontally. For once IE has gotten it right (or at least the way I want it) by positioning the sub menu horizontally. I can't for the life of me figure out how to get the sub menu to flow horizontally in FF. I've tried display: inline and float: left and all kinds of things but nothing seems to affect it.

My site is here

http://www.soton.ac.uk/~rollhock/new/index3.php

And the css file

http://www.soton.ac.uk/~rollhock/new/includes/style.css

If anyone is able to help I will be eternally grateful!
Thanks

Hi,

I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list.

I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this.

At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code:

div#header ul li {

	width: 20%;
	padding: 0px;
}

If the elements become four then I would set the width equals to 25% and so on.

I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list.

My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width.

Is this possible? Or I have to always set the width of the li element?

I am sorry if I am not clear enough. Thanks for any suggestions.

Regards,
Sim085

Is there any way to have horizontal list items automatically fill any given width?

for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left.

the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width?

Heya!
I am really new to html - creating my first website for uni course now.
My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one.
The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome.

this is the html:
<div id="ourproject">
<ul>
<li>OUR<br>
PROJECT
<ul>
<li><a href="index.html">Project Overview</a></li>
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="participants.html">Participants</a></li>
</ul>
</li>
</ul>
</div>

and my css:

#ourproject ul {
position:relative;
color: #FFF;
text-decoration: none;
width: 102px;
top:0px;
left:0px;
height:86px;
list-style:none;
float:left;
padding-left:20px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#ourproject ul:hover {
color:#FF9900;
border-left-color: #F90;
padding-left:20px;
}
#ourproject ul ul {
position:relative;
visibility:hidden;
z-index:2000;
background-color:#0E1221;
font-size: 12px;
width: 602px;
display: inline-block;
height: 45px;
float: left;
top:25px;
left:-23px;
}
#ourproject ul li {
display: inline-block;
margin-right:30px;
height: 25px;
float: left;
margin-top:4px;
width: 125px;
}
#ourproject ul:hover ul {
visibility:visible;
}
#ourproject ul ul li{
width:80px;
padding: 0;
text-align:left;
}

In IE9 compatibility view, the menu is distorted.


I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts.

I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed.

I hope to get some answer soon!
Please ask any more question if you need to- i will be happy to answer.
Thanks in advance.

I've got the standard <ul><li> horizontal menu, but each menu item has a space between it. I've tried wrapping the entire menu in a div with a background color, but so far I've had no luck.

Can I change the CSS to not have padding between?

also, why does a styled <hr> not appear in Firefox?


Thanks for the help!

Here is what I have in the code.

css
Code:

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

#navcontainer ul li { 
	display: inline;
}

#navcontainer ul li a
{
	text-decoration: none;
	padding: .2em 1em;
	color: #FFFFFF;
	background-color: #C0C0C0;
}

#navcontainer ul li a:hover
{
	color: #C0C0C0;
	background-color: #FFFFFF;
}

html
Code:

<div id="navcontainer">
<hr />
     <ul>
	  <li>
	     <a href="index.html">Home</a>
	   </li>
	   <li>
	     <a href="index.html">Products and Services</a>
	   </li>
	   <li>
	     <a href="index.html">Employment</a>
	   </li>
	   <li>
	     <a href="index.html">Blah</a>
	   </li>
	   <li>
	    <a href="index.html">Home</a>
	   </li>
             </ul>
</div>

Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now )

I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this?

Here's the general layout:
PHP Code:
// .main is the style for the container
// #main is the positioning of this instance of main
// .tree_menu_list is the vertical stuffs
<div class="menu" id="main">
   <ul class="tree_menu_list">
      <li><a href="index.php">Home</a></li>
      <li><a href="index.php?p=vision">Vision</a></li>
      <li><a href="index.php?p=buying">Buying</a></li>
      <li><a href="index.php?p=renovation">Building</a></li>
      <li><a href="index.php?p=selling">Selling</a></li>
      <li><a href="index.php?p=payout">Payout</a></li>
      <li><a href="index.php?p=opportunities">Opportunities</a></li>
      <li><a href="index.php?p=services">Services</a></li>
      <li><a href="images.php">Photos</a></li>
   </ul>
</div>