Click to See Complete Forum and Search --> : bullet points and sitemaps


chesswill
10-06-2005, 03:53 AM
I want to add some smaller bullet points to my site map within the main bullet points. I could do this with <ul><ul> etc but the w3 validator rejects this. I have tried to give the <ul>'s a class to get the effect but it does not add an extra bullet. Can you suggest a way to do this that is valid html: this is my code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<title>Gordon Engraving Ltd: Sitemap</title>

<meta name="Rating" content="General">
<meta name="Language" content="en">
<meta name="distribution" content="Local">
<meta name="Classification" content="perspex">
<meta name="Author" content="wtgunther">
<meta name="DESCRIPTION" content="Gordon Engraving Ltd, Canterbury, Kent, UK, established 1968 manufacturing and supplying display cases perspex, Perspex sheets cut, brass engraving, sizing rings, polycarbonate machine guards, engraved plaques, small business signs, engraved metal nameplates, magnetic vinyl signs, stencils to business, trade and public. From schools, hospitals, architects, council, police, fire brigade, manufacturers, sports clubs">
<meta name="KEYWORDS" content="Perspex sheets cut Canterbury, Perspex sheets cut, perspex acrylic Canterbury, sizing rings Kent, polycarbonate machine guards, www.gordonengraving.co.uk" >
<META name="revisit-after" content="14 days">
<META name="ROBOTS" content="ALL">
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">


<link type="text/css" rel="stylesheet" href="style.css">



</head>
<body>

<p class="cntrp"><img src = "logo1.jpg" title="image of Gordon Engraving Ltd logo"alt="GordonEngraving" ></p>


<br>
<h2>Sitemap</h2>



<ul>
<li> <a href="index.html">Homepage</a></li></ul>
<ul><li> <a href="Perspex.html">Plastics</a></li></ul>
<ul class="indented1"> <li> <a href="Perspex/part.html">Perspex display cases</a></li>
<li> <a href="Perspex/bish.html">Shop window displays</a></li>
<li> <a href="Perspex/posdisplays.html">Point of sale displays</a></li>
<li> <a href="Perspex/bkstand.html">Bookstands and lecterns</a></li>
<li> <a href="Perspex/profiles.html">Profile cutting</a></li>
<li> <a href="Perspex/des.html">Perspex awards</a></li>
<li> <a href="Perspex/eqboxes.html">equipment dispensing boxes</a></li>
<li> <a href="Perspex/flholder.html">leaflet holders made to order</a></li>
</ul>
<ul>
<li> <a href="Signs.html">Signs</a></li></ul>
<ul class="indented1"> <li> <a href="Signs/nun.html">Exterior hospital signs</a></li>
<li> <a href="Signs/mont.html">Exterior school signs</a></li>
<li> <a href="Signs/luck.html">Interior signs</a></li>
<li> <a href="Signs/nasons.html">Vehicle graphics</a></li>
</ul>
<ul>
<li> <a href="engraving.html">Engraving</a></li></ul>
<ul class="indented1"> <li> <a href="opla.html">Ceremonial plaques</a></li>
<li> <a href="engraving/opla.html">Easel and curtains</a></li>
<li> <a href="engraving/fifty.html">Ceremonial plaques</a></li>

<li> <a href="engraving/opla.html">Ceremonial plaques</a></li>
<li> <a href="engraving/selsted.html">School plaques</a></li>
<li> <a href="engraving/cherrycot.html">Wood engraving</a>
<li> <a href="engraving/dishwash.html">Electrical switches</a></li>
<li> <a href="engraving/panel.html">Control panels</a></li>
<li> <a href="engraving/keyfob.html">Keyfobs</a></li>
</ul>
<ul>
<li> <a href="SizingRings.html">Fruit sizing rings</a></li></ul>
<ul>
<li> <a href="stencils.html">Stencils</a></li></ul>

<p class="cntrp"><img src = "logo1.jpg" title="image of Gordon Engraving Ltd logo" alt="GordonEngraving"></p><br>

<h2 class="cntrp">Telephone: 01227 766229</h2>


<hr>

<p>
<a href="http://validator.w3.org/check?uri=referer"><img border="0"
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</p>




</body>
</html>

Fang
10-06-2005, 05:40 AM
Do you mean for the nested lists:
.indented1 {
list-style: square; /* or an image */
}

Placing a background image in the li is another way of doing it.

chesswill
10-06-2005, 05:43 AM
yes for nested lists. Please explain your answer?

Fang
10-06-2005, 06:47 AM
I assume you require an image next to list items.

ul { /* outer items */
list-style: none url(outer-bullet.gif);
}
.indented1 { /* inner items */
list-style: none url(inner-bullet.gif);
}

chesswill
10-06-2005, 07:55 AM
Can I copy the code into my style sheet?

Fang
10-06-2005, 07:57 AM
Help yourself.