CSS - Using Css To Display A List

Hi

I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript.

here is the structure,
Code:

<ul id="nav">
										                                            <li  class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>

</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>

<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
                                                                                    <li  class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>

here is my all related css,

external css file,
Code:

#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0  0; width:100%;}

/* All Levels */
#nav li { text-align:left; }


#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}

/* 0 Level */
#nav li { clear:both; position:relative;  display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left;  padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }

#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}


#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}

/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }

#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }

/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }

/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }


#nav li ul { display:none; }
#nav li:hover ul{display: block; }


#nav ol {  margin-left:5px; margin-bottom:10px;  }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif);  font-size:12px; font-weight:normal;    }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }

inline css code to overwrite the default behavior for target page

Code:

ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover  {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}

ul#nav ol li a { padding:0px;  }
ul#nav ol li  { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol {  border:#ccc 1px solid; padding-bottom:30px;  }

I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem.

In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards.

any help is much appreciated I am really stuck with this.

Hi,

I have an OL list (the numbered one) and the horz gap between the list item
number (as automatically generated by OL) and the text of the LI is too big
(according to client). Looks fine in FF but is bigger alright on IE (ahem
naturally .....)

I've played with the CSS for both the OL & LI styles even setting all
margins and paddings to 0 but without effect on the gap.

Is there any way to style that gap? Code below.

Kevin

<ol class="most_read">
<li class="most_read_li">Apples</li>
<li class="most_read_li">Oranges</li>
</ol>



.most_read {
text-align:left;
color:#808080;
font-size:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
margin-left:30px;
padding:0px;
margin-top:5px;
}


.most_read_li {
margin-bottom:7px;
margin-right:7px;
}

Hi

I am creating a navigation bar using unsorted list and CSS.
I have given my CSS and HTML code here


Code:

#navcontainer 
{
width: 200px;
margin-top:150px; 
}

#navcontainer ul#navlist
{
width:200px;
clear:left; 
text-align:left; 
margin-left:0; 
padding-left:0; 
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;

}

#navcontainer ul#navlist li
{
margin-left:0; 
padding: 0px;
display: block;
list-style:none; 
border-bottom: 1px solid gray;
}

#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}

  a.linkText {
    padding: 10px;
    display: block;

    color : #444444;
    font-family : arial;
    font-size : 11px;
    font-weight : bold;
    text-decoration : none;
    height:25px;

    }
    a.linkText:link {
    color : Aqua;
    /* you can define other styles if necessary */
    }
    
    a.linkText:visited {
    color : Maroon;
    /* you can define other styles if necessary */
    }
    
    a.linkText:hover {
    color : Blue;
    }
    
    
    
    </style>
</head>
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li><a class="linkText" href="#">Item One</a></li>
        <li><a class="linkText" href="#">Item two</a></li>
        <li><a class="linkText" href="#">Item three</a></li>
        <li><a class="linkText" href="#">Item four</a></li>
        <li><a class="linkText" href="#">Item five</a></li>
    </ul>
</div>

The problem is, when I select the next list item, previously selected list item should come to the original color.

Is there any way I can achieve this? Your guidence will be appreciated. Many thanks

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

Please look at the location list on the right side of this page -
http://certified.tmhdesign.com

My designer sent me a layout that has each location in a list and seperated by dots that DO NOT go the whole distance of the ul/li.

As you can see I am close but they are not laying out the same in IE and Firefox. IE is closer to what I am after but without the big gap

Hi! Another new-to-CSS dabbler here. Not entirely sure what I'm doing, but I get by. I'm working on a site for a paper (making the switch from tables to proper CSS so bear with me) and I can't get the nav bar to cooperate.

i31.tinypic.com/wbvzoh . png

One of these things is not like the others... And I can't for the life of me figure out why or what would be causing it bar some well-known CSS issue with nav bars that I am not yet privy to.

Code for the bar is as follows:

CSS
Code:

#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #e0edc9;
color: #25733e;
width: 780px;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 0px;
/* matches link padding except for left and right */
padding-top: 0px;
}

#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #25733e;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #adc38a;
color: white;
}

#navcontainer #active { border-left: 1px solid #fff; }

HTML
Code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">HOME</a></li>
<li><a href="#">RECENT</a></li>
<li><a href="#">AD INFO</a></li>
<li><a href="#">ARCHIVES</a></li>
<li><a href="#">PAY A BILL</a></li>
<lj><a href="#">CONTACT</a></li>
</ul>
</div>

Any ideas?

Im having trouble putting together a subnavigation list on my website, I am trying to create four sections each of which has a different color to it, and i can get almost everything to work except the subnavigation background color. I have tried white and transparent, but i think the parent element is somehow interfering with the css. any help would be appreciated. Here is my code


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<style type="text/css">
ul.nav
	{margin:0;
	padding:0;
	display:block;
	width:100px;
	list-style-type:none;}
ul.nav li, ul.nav li a, ul.nav li a:active, ul.nav li a:visited, ul.nav li a:hover, ul.nav li.home a:hover, ul.nav li.work a:hover, ul.nav li.for_clients a:hover, ul.nav li.contact a:hover
	{font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#CCCCCC;
	color:#666666;
	line-height:30px;
	width:100px;
	list-style-type:none;
	text-decoration:none;
	font-size:10px;
	font-weight:bold;
	padding-left:10px;}
	
ul.nav li.home_over, ul.nav li.home a:hover
	{color:#ffffff;
	background-color:#018E9F;}
ul.nav li.work_over, ul.nav li.work a:hover
	{color:#ffffff;
	background-color:#6F0141;}
ul.nav li.for_clients_over, ul.nav li.for_clients a:hover
	{color:#ffffff;
	background-color:#FF850D;}
ul.nav li.contact_over, ul.nav li.contact a:hover
	{color:#ffffff;
	background-color:#CCE82E;}
	
ul.subnav_home
	{position:absolute;
	top:8px;
	left:118px;
	margin:0;
	padding:0;
	display:block;
	width:100px;
	list-style-type:none;
	background-color:#FFFFFF;}
ul.subnav_home li a, ul.subnav_home li a:active, ul.subnav_home li a:visited, ul.subnav_home li a:hover
	{font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#fffffff;
	color:#aaaaaa;
	line-height:30px;
	width:100px;
	list-style-type:none;
	text-decoration:none;
	font-size:10px;
	font-weight:bold;
	padding-left:0px;}
ul.subnav_home li a:hover, ul.subnav_home li.subnav_home_over
	{color:#018e9f;}

</style>


<body>

<ul class="nav">
	<li class="home_over">home</a></li>
		<ul class="subnav_home">
		<li class="subnav_home_over">philosophy</li>
		<li><a href="process.htm">process</a></li>
		<li><a href="resume.htm">resume</a></li>
		</ul>
	<li class="work"><a href="index.htm">work</a></li>
	<li class="for_clients"><a href="index.htm">for_clients</a></li>
	<li class="contact"><a href="index.htm">contact</a></li>
</ul>


</body>
</html>

Hello,

I created a menu using an unordered list and after the list I have a
div with some text:
http://www.27lamps.com/public/Menu.htm

My menu gets over the div. Why?

Thanks,
Miguel

Hi,

I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout?

I have a list in IE that works fine, but I have to make it work in NN4 as well. The problem is the big space left between the item and the left side of the body. I looked several sites, but couldn't find any answers.

You can view the actual htm at http://www.nald.ca/test/fora/test.htm
Main CSS: http://www.nald.ca/test/fora/test.css
CSS for NN4: http://www.nald.ca/test/fora/test.css

If anyone could just give me some kind of idea where I am going wrong, it would be really awesome. Thanks

Please help me style lists. This is the on area I am having a really hard time understanding.

I have a menu list in my side bar and a standard list in the content section. I keep having problems because the styles seem to be conflicting with each other.

My site is

http://www.myslavelake.com/dir/budget-2009/

Code for the menu

Code:

<ul id="navlist">
<li><a href="#">Arctic Ice Centre </a></li>
<li><a href="#">Water Conservation </a></li>
<li><a href="#">Capital Priorities</a></li>
</ul>

Code:

#sidebar ol, ul, li {
	font-size: 1.0em;
	font-weight: 600;
	text-decoration: none;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	}

#navlist ol, ul {
	padding: 5px 0px 0px 0px;
}

The main list code

Code:

#content ul {
	margin-left: 0;
	list-style-type: square;
	/*text-indent: -1em;*/
	}
#content ul li {
	font-weight: normal;
	list-style-type: square;
	font-weight: normal;
	/*text-indent: -1em;*/
	}

I am happy with the menu but would like normal list for the content section. Right know bullets are not showing up in the content section.

http://midnighttweaker.50megs.com/test.htm

Why is the list offset to the right by 40 pixels? I can't see anything in my stylesheet that would cause it. It should be right up against the left side.

And why is the left column 245px wide instead of the 205px table column I specified? I know I shouldn't use tables for non-tabular data, but I need the left column to be the same height as the right so the background can continue all the way down, and I couldn't find any CSS to do that. One table shouldn't hurt.

Hello,

I am creating a simple navigation bar using a list.
My anchor tags inside each list item have a background and margin. The problem is they are overlapping.
I then added to the li tag margin-top: 20px.
The problem is that the bottom background of the last element disappears.

I think I might doing something wrong on my styling because when I fix something, something else gets wrong.

Could someone, please, help me out?

HTML:

<ul id="wmNavigation" class="Bar">
<li>
<a title="Page1" href="http://www.name.com/page1">Page1</a>
</li>
<li>
<a title="Page2" href="http://www.name.com/page1">Page2</a>
</li>
<li>
<a title="Page3" href="http://www.name.com/page1">Page3</a>
</li>
<li>
<a title="Page4" href="http://www.name.com/page1">Page4</a>
</li>
</ul>

CSS:

ul.Bar {}

ul.Bar li
{
font: normal 1.2em Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
margin-top: 20px;
}

ul.Bar li a
{
background-color: #202020;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
}

ul.Bar li a:link , ul.Bar li a:visited {}
ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus
{
background-color: #303030;
}

Thanks,
Miguel