|
CSS - List Within A List
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>
Similar TutorialsI have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks 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, 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 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 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 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! 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? 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. 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 I've had a good look around for a solution and I've tried applying them to no avail. I can't get the bullet lists to show in ie7 in the block on the right (they show fine in the content (on CV page) : 92 dot 48 dot 108 dot 113 /~legal Any ideas? Also, any quick design hints to improve the site? I need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div. What the hack? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>
I tried all the possible ways to obtain a list (or a list like) who must: - wrap around a floated element - have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements) I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas? The following codes gives messed up display. City lines with York. I tried float both dd and dt to left but still same. Never used definition list before. What am I doing wrong here? Code:
ul, menu, dir, dl { display: block; list-style-type: square; margin: 0; padding:0; }
dt { width:30%; }
dd { width:70%; }
<dl>
<dt>Town</dt>
<dd>York</dd>
<dt>City</dt>
<dd>New York</dd>
</dl>
I am having a problem displaying this vertical list in IE6. Here is the HTML: Code:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dashboard Quick Link</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Artifacts</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Contact</a></li>
</ul>
The list is in a div called menu which is at the top of a div called sidebar. Here is the CSS: Code:
#sidebar {
margin:0px;
padding:0px;
width:220px;
float:left;
background:url(_images/team/bg_nav.jpg) repeat-y left;
position:relative;
}
#sidebar #menu {
margin:0px;
padding:0px;
border:solid 1px #000;
}
#sidebar #menu ul {
margin:0px;
padding:0px;
list-style:none;
}
#sidebar #menu li a:link, #sidebar #menu li a:visited {
display:block;
margin:0px;
background:#2175BC;
border-left:#1958B7;
border-bottom:#90BADE;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFF;
padding:5px 0px 5px 10px;
}
#sidebar #menu li a:hover, #sidebar #menu li a:active {
background:#205268;
border-left:#1C64D1;
}
I cannot see the background color for the links in IE6. There are also vertical spacing issues and although I've read up on Holly's Hack, I don't really understand how to implement it. Any help would be greatly appreciated. Thanks a lot, Brian Here's the website example: http://www.justuskennels.net In the menu, for the IE6 & 7 issues, I'm using the whitespace fix as found he http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/ The only problem is that when I hover over "Our Dogs" and the side menu slides out, the <li> for "Our Dogs" puts the whitespace back in. So, if you roll over the menu quickly, you'll see it jump by a few pixels on the hover. If I'm not describing it well enough I'll try more, but does anyone know of a fix for the hovered <li> on the slide-out? Navigation CSS: Code: /* Navigation Menu Styling */
#menu { font-size:90%;
margin:0px 0px 0px 17px;
text-align: center;
font-weight: bold;
padding-bottom:50px;
background:none;
text-align:center;
line-height:100%;
}
#menu ul { list-style: none;
margin: 0px;
padding: 0px;
width: 150px;
}
#menu a {font-family:Verdana, Arial, Helvetica, sans-serif; display: block;}
#menu a {color:#000; text-decoration: none;}
#menu a:hover {color:#000;}
#menu li {position:relative; height:40px; line-height:40px; background:url(design/buttons.png);}
#menu li:hover {background-position:0 40px;}
#menu ul ul {position:absolute; top:0; left:100%; width:100%;}
div#menu ul ul, div#menu ul li:hover ul ul {display:none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul {display:block;}
Hey guys... Now i'm obcessed with CSS, i've def got the bug! I have a list of bullets, using <ul> and <li>. Now rather than have one column, i want two columns, spaced evenly. Now before i would just add a table, but i dont want to, as they are evil! So now i wanted to use CSS? Now currently the list is housed in a <div class='displaybox'>, with the CSS as below. So i could just add a table inside (ie 1 row, 2 cols) and then add the list elements to each side. or is it correct to use a table in this instance? Charlie I cannot get IE6 or 7 to display bullets when using a nested 2 column list. Can it be done or must I use images? Firefox, Opera and Safari work as expected. 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 |
|||||||