Solved

Nested List Items with different background color

Posted on 2009-05-12
5
585 Views
Last Modified: 2012-08-14
Hi Guys,
Ive been playing around with UL lists all day in CSS, I cannot figure this out, basically I want my CSS list to look like this:
http://img149.imageshack.us/img149/4061/examplecss.jpg

I want to have a nested list, but I want to be able to move the position of the list and list items, the first list should be aligned to the left with a down arrow icon for the first list item, the nested list items should have a different background color and different arrow icon, the rest of the main list items should have right facing arrow icon.

Hope you guys can help.

Thanks
Jay Eire

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

body {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	background: #666666;

	margin: 0;

	padding: 0;

}

.MyPage #container {

	width: 940px;

	height:500px;

	background-color:#000033;

	margin: 0 auto; 

}

.MyPage #SideBar

{

	width:230px;

	height:500px;

	background-color:#003333;

	float:left;

}

.MyPage #ContentArea

{

	width:710px;

	height:500px;

	background-color:#006633;

float:left;

	} 

#SideTop

{

	width:230px;

	height:2px;

	background-image: url(SideHeader.jpg);

 

}

 

#SideBar ul

{

list-style-image: url(MainArrow.jpg);

}

-->

</style></head>

 

<body class="MyPage">

 

 

<div id="Container">

	<div id="SideBar">

    	   <div id="SideTop">&nbsp;</div>

		<ul>

		  <li>Link 1</li>

			<ul>

			  <li>Sub Link 1</li>

			  <li>Sub Link 2</li>

			  <li>Sub Link 3</li>

			  <li>Sub Link 4</li>

			</ul>

		  <li>Link 2</li>

		  <li>Link 3</li>

		  <li>Link 4</li>

		<ul>

				

    </div>

    <div id="ContentArea">

    	Content Area

     </div>

	

 

 

</div>

 

 

</body>

</html>

Open in new window

ExampleCss.jpg
0
Comment
Question by:jay_eire
  • 2
  • 2
5 Comments
 
LVL 2

Accepted Solution

by:
gracemedia earned 500 total points
Comment Utility
The code snippet is your html file so copy and paste the text in your editor and save it as an html or whatever type of file you are creating. Then, take the attatched file and put it in the same folder as the HTML file and change the extention to a .js (instead of .txt)

Good Luck!
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>
 
 
 

<style type="text/css"> 

<!-- 

/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
 

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 

/* This is the selector for the main Accordion container. For our default style,

 * we draw borders on the left, right, and bottom. The top border of the Accordion

 * will be rendered by the first AccordionPanelTab which never moves.

 *

 * If you want to constrain the width of the Accordion widget, set a width on

 * the Accordion container. By default, our accordion expands horizontally to fill

 * up available space.

 *

 * The name of the class ("Accordion") used in this selector is not necessary

 * to make the widget function. You can use any class name you want to style the

 * Accordion container.

 */

.Accordion {

	border-left: solid 1px gray;

	border-right: solid 1px black;

	border-bottom: solid 1px gray;

	overflow: hidden;

}
 

/* This is the selector for the AccordionPanel container which houses the

 * panel tab and a panel content area. It doesn't render visually, but we

 * make sure that it has zero margin and padding.

 *

 * The name of the class ("AccordionPanel") used in this selector is not necessary

 * to make the widget function. You can use any class name you want to style an

 * accordion panel container.

*/

.AccordionPanel {

	margin: 0px;

	padding: 0px;

}
 

/* This is the selector for the AccordionPanelTab. This container houses

 * the title for the panel. This is also the container that the user clicks

 * on to open a specific panel.

 *

 * The name of the class ("AccordionPanelTab") used in this selector is not necessary

 * to make the widget function. You can use any class name you want to style an

 * accordion panel tab container.

 *

 * NOTE:

 * This rule uses -moz-user-select and -khtml-user-select properties to prevent the

 * user from selecting the text in the AccordionPanelTab. These are proprietary browser

 * properties that only work in Mozilla based browsers (like FireFox) and KHTML based

 * browsers (like Safari), so they will not pass W3C validation. If you want your documents to

 * validate, and don't care if the user can select the text within an AccordionPanelTab,

 * you can safely remove those properties without affecting the functionality of the widget.

 */

.AccordionPanelTab {

	background-color: #CCCCCC;

	border-top: solid 1px black;

	border-bottom: solid 1px gray;

	margin: 0px;

	padding: 2px;

	cursor: pointer;

	-moz-user-select: none;

	-khtml-user-select: none;

}
 

/* This is the selector for a Panel's Content area. It's important to note that

 * you should never put any padding on the panel's content area if you plan to

 * use the Accordions panel animations. Placing a non-zero padding on the content

 * area can cause the accordion to abruptly grow in height while the panels animate.

 *

 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel

 * Content container.

 *

 * The name of the class ("AccordionPanelContent") used in this selector is not necessary

 * to make the widget function. You can use any class name you want to style an

 * accordion panel content container.

 */

.AccordionPanelContent {

	overflow: auto;

	margin: 0px;

	padding: 0px;

	height: 200px;

}
 

/* This is an example of how to change the appearance of the panel tab that is

 * currently open. The class "AccordionPanelOpen" is programatically added and removed

 * from panels as the user clicks on the tabs within the Accordion.

 */

.AccordionPanelOpen .AccordionPanelTab {

	background-color: #EEEEEE;

}
 

/* This is an example of how to change the appearance of the panel tab as the

 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added

 * and removed from panel tab containers as the mouse enters and exits the tab container.

 */

.AccordionPanelTabHover {

	color: #555555;

}

.AccordionPanelOpen .AccordionPanelTabHover {

	color: #555555;

}
 

/* This is an example of how to change the appearance of all the panel tabs when the

 * Accordion has focus. The "AccordionFocused" class is programatically added and removed

 * whenever the Accordion gains or loses keyboard focus.

 */

.AccordionFocused .AccordionPanelTab {

	background-color: #3399FF;

}
 

/* This is an example of how to change the appearance of the panel tab that is

 * currently open when the Accordion has focus.

 */

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

	background-color: #33CCFF;

}

body  {

	font: 100% Verdana, Arial, Helvetica, sans-serif;

	background: #666666;

	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

	padding: 0;

	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

	color: #000000;

}

.twoColFixLtHdr #container { 

	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */

	background: #FFFFFF;

	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

	border: 1px solid #000000;

	text-align: left; /* this overrides the text-align: center on the body element. */

} 

.twoColFixLtHdr #header { 

	background: #DDDDDD; 

	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */

} 

.twoColFixLtHdr #header h1 {

	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

}

.twoColFixLtHdr #sidebar1 {

	float: left; /* since this element is floated, a width must be given */

	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */

	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */

	padding: 15px 10px 15px 20px;

}

.twoColFixLtHdr #mainContent { 

	margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */

	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */

} 

.twoColFixLtHdr #footer { 

	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */

	background:#DDDDDD; 

} 

.twoColFixLtHdr #footer p {

	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

	float: right;

	margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page */

	float: left;

	margin-right: 8px;

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

	clear:both;

    height:0;

    font-size: 1px;

    line-height: 0px;

}

--> 

</style>

<!--[if IE 5]>

<style type="text/css"> 

/* place css box model fixes for IE 5* in this conditional comment */

.twoColFixLtHdr #sidebar1 { width: 230px; }

</style>

<![endif]--><!--[if IE]>

<style type="text/css"> 

/* place css fixes for all versions of IE in this conditional comment */

.twoColFixLtHdr #sidebar1 { padding-top: 30px; }

.twoColFixLtHdr #mainContent { zoom: 1; }

/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

</style>

<![endif]-->

<script src="SpryAccordion.js" type="text/javascript"></script>

</head>
 

<body class="twoColFixLtHdr">

<div id="container">

  <div id="header">

    <h1>Header</h1>

  <!-- end #header --></div>

  <div id="sidebar1">

    <div id="Accordion1" class="Accordion" tabindex="0"><div class="AccordionPanel"><div class="AccordionPanelTab">Label 1</div><div class="AccordionPanelContent">Content 1</div></div><div class="AccordionPanel"><div class="AccordionPanelTab">Label 2</div><div class="AccordionPanelContent">Content 2</div></div></div><h3>&nbsp;</h3>

    <!-- end #sidebar1 -->

</div>

  <div id="mainContent"> <h1> Main Content </h1>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>

    <h2>H2 level heading </h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<!-- end #mainContent --></div><!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

<div id="footer">

    <p>Footer</p>

<!-- end #footer --></div>

<!-- end #container --></div>

<script type="text/javascript">

<!--

var Accordion1 = new Spry.Widget.Accordion("Accordion1");

//-->

</script></body></html>

Open in new window

SpryAccordion.txt
0
 
LVL 7

Author Comment

by:jay_eire
Comment Utility
Thanks for the Spry option much appreciated, but is there anyway to do this in CSS?
0
 
LVL 2

Expert Comment

by:gracemedia
Comment Utility
Remove the .JS file and edit the css in the included html file. That should give you exactly what you want. I included all the css in the file for you.
0
 
LVL 4

Expert Comment

by:Thorn007
Comment Utility
This may help you get moving. I do not recommend using the list-style-image it can be buggy. By adding padding or indenting text you can get the same effect using the background property.

Not sure how big the images are you are using so the padding and text-indent is generic. Play with it some.

Just add the code below to your CSS, you may end up having to delete some of your old code.
ul {

margin: 0;

padding: 0;

color: #FFF;

list-style: none; }
 

#SideBar ul

{

text-indent: 20px;

background: transparent url(MainArrow.jpg) no-repeat scroll 0 50%;

}

#SideBar ul ul {

background: #066 url(MainArrow.jpg) no-repeat scroll 20px 50%;

padding-left: 40px;

}

Open in new window

0
 
LVL 7

Author Closing Comment

by:jay_eire
Comment Utility
Thanks :)
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now