css tree list

membuat menu tree dengan css setidaknya membutuhkan 3 jenis gambar
branch branc head lalu pipe



<html><head><title>css cheat</title>
<style type='text/css'>
.itinerary, .itinerary ul {
 list-style-type:none;
 background-image:url(pipe.png);
 background-repeat:repeat-y;
 margin:0;
 padding:0;
}
.itinerary ul {
 margin-left:12px;
}
.itinerary li {
 margin:0;
 padding: 0 12px 0 28px;
 background-image:url(branch.png);
 background-repeat:no-repeat;
 line-height: 1.5;
}
.itinerary li.branchend {
/* matches background color of */
/* parent element or page */
background-color: #fff;
background-image: url(branchend.png);
}
</style>
<body>
<ul>
 <li>Morning Sessions
 <ul>
 <li>Troubleshooting IE6</li>
 <li>Object Oriented CSS</li>
 <li>Fluid Typography</li>
 <li>Tomorrow's CSS3 Today</li>
 </ul>
 </li>
 <li>Afternoon Sessions
 <ul>
 <li>Web Form Elements</li>
 <li>Flexible Layouts</li>
 <li>Coding Layouts</li>
 <li>Future CSS &amp; Markup</li>
 </ul>
 </li>
</ul>
</body>
</head>

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s