SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    winnipeg
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning problem in popup text element, help

    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 */

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't do it like that because it is invalid code and won' work anyway.

    You can't put block level elements inside inline element like spans. Which means you won't be able to nest block level elements inside anchors either.

    The only way you could do this is to use inline elements as follows:

    Code:
    	<li><a href="design.htm"> |</a> <a href="/design/" title="DESIGN SERVICES">DESIGN SERVICES 
    <span> <img src="images/pmoblogo8.jpg" alt="" width="150" height="90" align="left" /> 
    	 <br />
    		Commercial Administration<br />
    		Residential<br />
    		Maintenance Systems<br />
    	 </span>
    </a>
    </li>
    Of course you could wrap all that text up in spans instead and give them a display:block to force a new line and this would also allow you to place a background image in the span to simulate the list. You would need to set up a class/id for the main span and then a class for the nested spans.

    If you want the format of nested lists then you will need to use similar code to the suckerfish menus and provide a hover action for the list element with some js.

    Hope that helps.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •