CSS - Horizontal List Navigation Breaks When Load Times Are Slow

Hi everyone,

I am trying to make a horizontal navigation near the top of my website. But I can't seem to make it center but AND horizontal, i've only been able to center it but not horizontal... or have it horizontal but not center.

This is my CSS so far.

Quote:
ul#nav li {
display:inline;
margin: 0 auto;
width: 100%;
text-align:center;
}

ul#nav li a {
display:block;
height:48px;
width:113px;
background: transparent url(images/nav.png);
margin: 0 auto;
text-indent:-9009px;
}
ul#nav li a:hover {background-position:0 -48px}

ul#nav li#photos a {
width:139px;
margin: 0 auto;
background-position:-113px 0;
}
ul#nav li#photos a:hover {background-position:-113px -48px}




My home link and photo link are currently centered and on top of each other in a vertical fashion with this code.

Please help!

Hi
I'm writing here after spending a few hours searching google without luck.

I bought a "mega menu" plug in for wordpress but its acting very odd.
It generally works as it should but ive found that theres something wrong with the formatting of the drop down menus.
There is an issue where line breaks do not happen at all, and most important - list items are not shown on a new line. The content all seems to flow around its self rather than being formatted.
See attached pic:
img14 .imageshack .us/img14/964/screenshot047cr .png

I did run the css and html though a validator and it spits out hundreds of errors but i think they are pretty much only shown because its css3.

I'm really curious what would cause line breaks to not appear after list items. I had thought previously it may be the css clashing with my themes css but i tried a fresh install on a really mimimal theme and the error is still there

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 have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states?

Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images.

What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it?

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

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.

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

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

Hello All,

I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it.

I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically).

I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet.

Here is the CSS:
Code:

/*- Menu Tabs E--------------------------- */

    #tabsE {
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }

    #tabsE ul {
        margin:0;
        padding:10px 10px 0 0px;
        list-style:none;
      }

    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }

    #tabsE a {
      text-align: center;
      background:url("tableftE.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }

    #tabsE a span {
      text-align: center;
      display:block;
      background:url("tabrightE.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#000;
      }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFFFFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      }

        #tabsE #current a {
                background-position:0% -42px;
        }
        #tabsE #current a span {
                background-position:100% -42px;
        }

I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary.

I truly appreciate any help you can offer.

Thanks,

Chris

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

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> 

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