CSS - Colouring Just The Bullett Of A List...how?

Hi,

Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side?

/Hubba Bubba

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

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.

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?

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?

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

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>

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

Hi all

I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS?

Cheers.

Hi,

Can anyone please help with formatting a list?

In the simple list below, I would like;
1) The main list items should always be positioned at top 0px, left 90px of it's container (done)
2) Nested list items should be hidden (done)
3) The nested item that belongs to the "selected" list item, should be visible (done)
4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this)
5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top)

Many thanks for any pointers,

Cheers,
Mark

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</title>
</head>

<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>

<div id="container"><div style="clear:both"></div>

<ul>	
<li class="selected">item 1
	<ul>
	<li>Nested item 1</li>
	</ul>
</li>
<li>item 2
	<ul>
	<li>Nested item 2</li>
	</ul>
</li>
<li>item 3
	<ul>
	<li>Nested item 3</li>
	</ul>
</li>

<div style="clear:both"></div>
</div>


</body>
</html>

Hello,

I have created a CSS Sprite containing the many different list bullets, in a vertical form. I have then defined the different li styles. This all works, however, the bullet background is showing the other bullet styles when the li spans more than one line. It's probable best if I show you what I mean:

http://snkhan.co.uk/origami.php

The corresponding CSS is:

Code:

#content ul {margin: 0 0 20px 0; padding: 0;}
#content li {list-style: none; background: url(../images/list.png) no-repeat scroll 0px -34px; padding-left: 20px;}

and

Code:

#community > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;} 
#music > li {background: url(../images/list.png) no-repeat scroll 0px -16px !important;} 
#twitter > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;}

Is there anyway I can prevent the li background showing more than 16px x 16px at a time?

Thank you for your time.

Hi all

I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS?

Cheers.