I have constructed a nav bar that, on mouseover, will trigger a popup consisting of an image and a bulleted list. I now have a lot less hair as a result of this. But, I'm a stubborn *******, or stupid (both).
I have taken advice from the smart people on this site and wrapped the popup content in <span> tags as you can see.
The problem: while the image appears ok, the popup text, along with the square bullets are all squished up in a very short single line about 50 pixels in length which is impossible to read. How do I get the bulleted list to display properly: ie. the image appears to the left, and the bulleted list alongside the image on the right.
Once again, I am requesting your help.
My code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>index2</title>
<link href="pmstyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"><p><img src="assets/img/pmassociatesltd800.jpg" width="758" height="50"></p>
</div>
<div id="nav">
<ul>
<li><a href="/" title="Home">HOME</a></li>
<li> | <a href="businessplanning.htm" title="BUSINESS PLANNING">BUSINESS PLANNING<span>
<img src="assets/img/planners.gif" width="149" height="90" class="popupimage">
<ul><li>Agriculture</li>
<li>Joint Ventures</li>
<li>Manufacturing</li>
<li>Natural Resources</li>
<li>Tourism</li></ul>
</span></a></li>
<li><a href="design.htm"> |</a> <a href="/design/" title="DESIGN SERVICES">DESIGN SERVICES<span>
<img src="assets/img/schoolpop.gif" width="150" height="90" align="left">
<ul>
<li>Commercial Administration</li>
<li>Residential>
<li>Maintenance Systems</li>
</ul></span></a></li>
<li> | <a href="/negotiation/" title="NEGOTIATION SERVICES">NEGOTIATION SERVICES<span>
<ul>
<li>Land Claim Settlements</li>
<li>Manufacturing Arrangements</li>
<li>Trust Agreements</li></ul></span></a></li>
<li> | <a href="/project/" title="PROJECT MANAGEMENT">PROJECT MANAGEMENT<span>
<ul>
<li>Education Facilities</li>
<li>Water and Sewer
<li>Environmental</li></ul></span></a></li>
<li> | <a href="/pos/" title="POS SYSTEMS">POS SYSTEMS<span>
<ul>
<li>Retail POS Systems</li>
<li>Ed's Inventory Gadgets</li></ul></span></a></li>
<li> | <a href="/contact/" title="CONTACT US">CONTACT US<span>
<ul>
<li>Office Contact Information</li>
<li>Email</li></ul></span></a></li>
</ul>
</div>
<div id="content">
<p>Lipsum sorem, blah, blah, blah. <p></p></div>
</div>
</body>
</html>
My css:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
body {
background-color: #003366;
margin:0;
padding:0;
}
div#nav {
}
div#nav ul {
list-style-type: none;
margin:0;
padding:5;
}
div#nav ul li {
display: inline;
}
nav ul li a {
background-color: #CCFFFF;
text-decoration: none;
}
a:link {
color: #66FFFF;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #FFCC66;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: underline;
}
#header p {margin:0;padding:0;}
div#content {
width: 200px;
color: #33FFFF;
padding: 10;
margin-top: 25px;
margin-left: 5px;
float: left;
}
div#nav ul li a span {
display: none;
}
div#nav ul li a:hover{border:none}
div#nav ul li a:hover span {
display: block;
margin: 10px;
padding: 5px;
position: absolute;
left: 300px;
top: 100px;
}
div#nav ul li a:hover span ul {
}
div#nav ul li a:hover span ul li {
background-image: url(assets/img/bullet.gif);
background-repeat: no-repeat;
background-position: left50%;
color: #99FFFF;
top: 60px;
position: absolute;
display: list-item;
left: 180px;
vertical-align: text-top;
list-style-position: inside;
margin: 2;
padding: 2;
}
.popupimage {
margin: 2px;
padding: 1px;
position: absolute;
}
/* CSS Document */
Bookmarks