http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FList_Style%2FLI
HTML/CSS/List Style/LI - История изменений
2026-04-05T15:20:46Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/List_Style/LI&diff=5632&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/List_Style/LI&diff=5633&oldid=prev
Admin: 1 версия
2010-05-26T08:17:08Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add different background image for each LI==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<style type="text/css" media="screen"><br />
#divID #recipe {<br />
list-style: none;<br />
}<br />
<br />
#divID #recipe li {<br />
padding: 10px 50px;<br />
margin-bottom: 6px;<br />
border-bottom: 1px solid #ccc;<br />
}<br />
<br />
#divID #one {<br />
background: url(img/ol_1.gif) no-repeat 6px 50%;<br />
}<br />
<br />
#divID #two {<br />
background: url(img/ol_2.gif) no-repeat 2px 50%;<br />
}<br />
<br />
#divID #three {<br />
background: url(img/ol_3.gif) no-repeat 3px 50%;<br />
}<br />
<br />
#divID #four {<br />
background: url(img/ol_4.gif) no-repeat 0px 50%;<br />
}<br />
<br />
#divID #five {<br />
background: url(img/ol_5.gif) no-repeat 6px 50%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="divID"><br />
<ol id="recipe"><br />
<li id="one">this is a test. </li><br />
<li id="two">this is a test. </li><br />
<li id="three">this is a test. </li><br />
<li id="four">this is a test. </li> <br />
<li id="five">this is a test. </li><br />
</ol><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Add list background image==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Lists</title><br />
<style type="text/css" media="screen"><br />
<br />
#fig1_1 ul {<br />
list-style: none;<br />
} <br />
#fig1_1 li {<br />
background: url(bull.gif) no-repeat 0 50%;<br />
padding-left: 17px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="fig1_1"><br />
<ul><br />
<li>Apples</li><br />
<li>Spaghetti</li><br />
<li>Green Beans</li><br />
<li>Milk</li><br />
</ul><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Add style to an anchor in a LI tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Add style to an anchor in a <LI></title><br />
<style type="text/css"><br />
li a {<br />
text-decoration: none;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<ul id="navigation"><br />
<li class="warning"><a href="http://www.wbex.ru">A</a></li><br />
<li><a href="http://www.wbex.ru">B</a></li><br />
<li><a href="http://www.wbex.ru">C</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Alignment of list items==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Alignment of list items</title><br />
<style type="text/css"><br />
p {<br />
margin: 0.75em 0 0 1.5em; <br />
padding: 0;<br />
width: 33em;<br />
border: 1px dotted black;<br />
}<br />
ul {<br />
list-style-type: square;<br />
list-style-position: outside;<br />
margin: 0.75em 0 0 0; <br />
padding: 0 0 0 1.5em;<br />
width: 34.5em;<br />
border: 1px dashed black;<br />
}<br />
ul.indent {<br />
margin: 0.75em 0 0 1.5em; <br />
width: 33em;<br />
}<br />
li {<br />
margin: 0.75em 0 0 0;<br />
border: 1px dotted black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<ul><br />
<li>L.</li><br />
<li>L.</li><br />
</ul><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<ul class="indent"><br />
<li>L.</li><br />
<li>L.</li><br />
</ul><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Alignment of list items with margin==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Alignment of list items</title><br />
<style type="text/css"><br />
p {<br />
margin: 0.75em 0 0 1.5em; <br />
padding: 0;<br />
width: 33em;<br />
border: 1px dotted black;<br />
}<br />
ul {<br />
list-style-type: square;<br />
list-style-position: outside;<br />
margin: 0.75em 0 0 0; <br />
padding: 0 0 0 1.5em;<br />
width: 34.5em;<br />
border: 1px dashed black;<br />
}<br />
ul.indent {<br />
margin: 0.75em 0 0 1.5em; <br />
width: 33em;<br />
}<br />
li {<br />
margin: 0.75em 0 0 0;<br />
border: 1px dotted black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<ul><br />
<li>L.</li><br />
<li>L.</li><br />
</ul><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
<ul class="indent"><br />
<li>Li.</li><br />
<li>Li.</li><br />
</ul><br />
<p> this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. <br />
this is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Define class for <LI> to set its font weight to bold==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Define class for LI to set its font weight to bold</title><br />
<style type="text/css"><br />
.warning {<br />
font-weight: bold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul id="navigation"><br />
<li class="warning"><a href="http://www.wbex.ru">A</a></li><br />
<li><a href="http://www.wbex.ru">B</a></li><br />
<li><a href="http://www.wbex.ru">C</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline centred list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Untitled Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
ul,li{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
text-align:center;<br />
white-space:nowrap;<br />
}<br />
li{<br />
display:inline;<br />
position:relative;<br />
white-space:nowrap;<br />
}<br />
li a.last{border-right:1px solid #CFD3E2;}<br />
a {<br />
border-left:1px solid #CFD3E2;<br />
font-family: Arial;<br />
font-size: 11px;<br />
text-decoration: none;<br />
font-weight: bold;<br />
color: #4D9DDC;<br />
padding:4px 10px;<br />
line-height:21px;<br />
}<br />
* html a {<br />
padding:2px 10px;<br />
display:inline-block;<br />
line-height:17px<br />
}<br />
* html a {<br />
height:1%;<br />
}<br />
a:hover{<br />
color: #FFAD2B;<br />
border-bottom:2px solid red;<br />
padding-bottom:2px;<br />
}<br />
* html a:hover {<br />
padding-bottom:0px;<br />
}<br />
#wrapper {<br />
background-color: #F3F4F5;<br />
border: solid 1px #BFCCD7;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>Inline centred list</h1><br />
<div id="wrapper"> <br />
<ul><br />
<li><a href="#">Log in</a></li><li><a href="#">Register</a></li><li ><a class="last" href="#">Help</a></li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==li after==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li:after {<br />
content: ", "; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>Database</li><br />
<li>Privacy</li><br />
<li>Best</li><br />
<li>Whatever</li><br />
<li class="last">Make One</li><br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI background: url(search.gif) no-repeat;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
list-style: none;<br />
}<br />
li {<br />
padding: .3em 0 1em 40px;<br />
background: url(search.gif) no-repeat;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI: before: "\00BB \0020"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0 0 0 1em;<br />
text-indent: -1em; <br />
}<br />
li {<br />
width: 33%;<br />
padding: 0;<br />
margin: 0 0 0.25em 0;<br />
}<br />
li:before {<br />
content: "\00BB \0020"; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI border top: 1px solid black==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li {<br />
border-top: 1px solid black;<br />
padding: .3em 0;<br />
}<br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
border-bottom: 1px solid black; <br />
list-style: none;<br />
width: 36%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==li.className:after==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li.last:after {<br />
content: ".";<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>Database</li><br />
<li>Privacy</li><br />
<li>Best</li><br />
<li>Whatever</li><br />
<li class="last">Make One</li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
list-style: none;<br />
}<br />
li {<br />
padding: .3em 0 1em 40px;<br />
font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;<br />
background: url(search.gif) no-repeat;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI margin:25em 0==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0 0 0 1em;<br />
text-indent: -1em; <br />
}<br />
li {<br />
width: 33%;<br />
padding: 0;<br />
margin: 0 0 0.25em 0;<br />
}<br />
li:before {<br />
content: "\00BB \0020"; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI padding: .3em 0==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li {<br />
border-top: 1px solid black;<br />
padding: .3em 0;<br />
}<br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
border-bottom: 1px solid black; <br />
list-style: none;<br />
width: 36%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==LI width: 33%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0 0 0 1em;<br />
text-indent: -1em; <br />
}<br />
li {<br />
width: 33%;<br />
padding: 0;<br />
margin: 0 0 0.25em 0;<br />
}<br />
li:before {<br />
content: "\00BB \0020"; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Nested LI tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Nested lists</title><br />
</head><br />
<body><br />
<h2>Pizzas</h2><br />
<ul><br />
<li><br />
<h3>B</h3><br />
<ul><br />
<li>S.</li><br />
<li>C.</li><br />
<li>B:<br />
<ul><br />
<li>M</li><br />
<li>M</li><br />
<li>S</li><br />
</ul><br />
</li><br />
<li>T.</li><br />
<li>R.</li><br />
</ul><br />
</li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Right-aligned bullets==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br />
<title>Right-aligned bullets</title><br />
<style type="text/css"><br />
ul, li<br />
{<br />
padding:0;<br />
margin:0;<br />
}<br />
ul li<br />
{<br />
list-style:none;<br />
background: url(bullet-reversed.gif) no-repeat right center;<br />
padding-right:20px;<br />
text-align:right;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>This is a list item</li><br />
<li>This is a list item </li><br />
<li>This is a list item</li><br />
<li>This is a list item </li><br />
<li>This is a list item</li><br />
<li>This is a list item </li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set display to inline to a LI under a UL in DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#navsite ul li {<br />
list-style: none;<br />
margin: 0; <br />
display: inline; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navsite"><br />
<h5>Site navigation:</h5><br />
<ul><br />
<li><a href="">Home</a></li><br />
<li><a href="">About</a></li> <br />
<li><a href="">Archives</a></li><br />
<li><a href="">Writing</a></li><br />
<li><a href="" id="current">Speaking</a></li> <br />
<li><a href="">Contact</a></li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Shading border for list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
div {<br />
padding: 10px;<br />
margin-bottom: 15px;<br />
border: 2px solid black;<br />
}<br />
LI {<br />
margin-top: 0px;<br />
margin-bottom: 10px;<br />
padding-right: 5px;<br />
background-color: gold;<br />
padding-top: 5px;<br />
padding-bottom: 5px;<br />
border-left: 1px solid gray;<br />
border-right: 2px solid black;<br />
border-top: 1px solid gray;<br />
border-bottom: 2px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div> <br />
<ul><br />
<li>Normal List</li><br />
<li>Normal List</li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Tab like list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
<br />
list-style: none;<br />
border-bottom: thin solid black;<br />
height: 21px;<br />
}<br />
li {<br />
text-align: center;<br />
float: left;<br />
margin: 0 10px;<br />
border: thin solid black;<br />
width: 100px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li><a href="http://www.google.ru">Google</a></li><br />
<li><a href="http://www.yahoo.ru">Yahoo</a></li><br />
<li><a href="http://www.ebay.ru">Ebay</a></li><br />
<li><a href="http://www.wrox.ru">Wrox</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Three level list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Creating better-looking lists</title><br />
<style type="text/css" media="screen"><br />
ul {<br />
list-style-type: none;<br />
background: red;<br />
}<br />
ul ul {<br />
background: yellow;<br />
border-left: 1px dotted #aaaaaa;<br />
padding: 10px;<br />
}<br />
<br />
ul ul ul {<br />
background: none;<br />
border-left: 0;<br />
}<br />
<br />
li {<br />
text-transform: uppercase;<br />
padding-left: 20px;<br />
font-weight: bold;<br />
color: #666666;<br />
}<br />
<br />
li li {<br />
text-transform: none;<br />
background: url(list-square.gif) 0 2px no-repeat;<br />
font-weight: normal;<br />
color: #333333;<br />
}<br />
li li li {<br />
background: url(square.gif) 0 2px no-repeat;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>List - 1.1<br />
<ul><br />
<li>List - 2.1</li><br />
<li>List - 2.2<br />
<ul><br />
<li>List - 3.1</li><br />
<li>List - 3.2</li><br />
<li>List - 3.3</li><br />
</ul><br />
</li><br />
<li>List - 2.3</li><br />
</ul><br />
</li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Using padding to control the list item indent==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style-type: square;<br />
list-style-position: outside;<br />
width: 33em;<br />
padding: 0.5em;<br />
border: 1px solid black;<br />
margin: 0.75em 0 0 1.5em;<br />
}<br />
ul.one {<br />
padding-left: 0;<br />
}<br />
ul.two {<br />
padding-left: 1em;<br />
}<br />
ul.three {<br />
padding-left: 1.5em;<br />
}<br />
li {<br />
padding: 0;<br />
margin: 0;<br />
border: 1px dashed black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul class="one"><br />
<li>Li Europan lingues es membres del sam familie.</li><br />
</ul><br />
<ul class="two"><br />
<li>Li Europan lingues es membres del sam familie.</li><br />
</ul><br />
<ul class="three"><br />
<li>Li Europan lingues es membres del sam familie.</li><br />
</ul><br />
</body><br />
</html><br />
</source></div>
Admin