Jump to content

jlhaslip

Advanced Member
  • Posts

    524
  • Joined

  • Last visited

Posts posted by jlhaslip

  1. #menu { width: 80%; margin: 0 auto; }
    #menu ul { }
    #menu ul li { float: right; display: block; text-decoration: none; }

     

    untested, but might work.

    cssplay.co.uk have some excellent horizontal nav menus.

  2. Internet Explorer 8 should be out this year some time. It [starts to) catch up to the other Browsers in terms of CSS2.1.

     

    Just finished a PDF on implementing display: table for layout in IE8/Firefox/Opera/Safari.

     

    It looks like the best thing since sliced bread to the Author. I'll give some of the ideas a run through and surely report back here with the news. Good or bad.

     

    Another Comparison page here: http://www.webdevout.net/browser-support-css

  3. Not really any 'limit' except your bandwidth will take a beating if the images are too large.

    Also, large images will be slow to load for the clients.

     

    yes, you should make room for the image on your page, otherwise the image will push content down or sideways and mess up the lay-out.

    
    

     

    Change the filename.jpg to the actual name of the image you use.

    Adjust the width and height to suit your site placement. These sizes are the size on the page. The image could be smaller or larger to start with.

  4. you missed a bunch of the css code. The code for the span, etc needs to also be in the CSS.

    
    
    
    
    
    
    
    Untitled Page
    <!--<br />/*<br />        =================================<br />        start of Tooltip css code here<br />        ================================= */<br /><br />        a.info{<br />        position:relative;           /*this is the key*/<br />        z-index:24;<br />        background-color:#e0e0e0;    /* background colour of display text */<br />        color:#000000;               /* colour of display text */<br />        border:1px dotted #999;    /* border colour */<br />        text-decoration:none;<br />        font-style:italic;<br />        }<br /><br />        a.info:hover {<br />        z-index:25;<br />        background-color:#ffff66;<br /><br />        }<br /><br />        a.info span{<br />        display: none;  /* hide the span text using this css */<br />        }<br /><br />        a.info:hover span{ /*the span will display just on :hover state*/<br />        display:block;<br />        position:absolute;<br />        top: 1.5em;<br />        left: 3em;<br />        width:15em;<br />        border:1px solid #ff0000; /* border colour */<br />        background-color:#ffff99; /* background colour here */<br />        color:#000000;         /* text colour */<br />        text-align: center;<br />        font-size: .8em;<br />        font-style:italic;<br />        z-index:30;<br />        }<br /><br />        .images {<br />        vertical-align:bottom;<br />        }<br />-->
    
    
    
    
    display textTool Tip Text Here
    
    
    

    code is based on your Demo page, but I removed the second link.

    check it out.

  5. /*
           =================================
           start of Tooltip css code here
           ================================= */
    
           a.info{
           position:relative;           /*this is the key*/
           z-index:24;
           background-color:#e0e0e0;    /* background colour of display text */
           color:#000000;               /* colour of display text */
           border:1px dotted #999;    /* border colour */
           text-decoration:none;
           font-style:italic;
           }
    
           a.info:hover {
           z-index:25;
           background-color:#ffff66;
    
           }
    
           a.info span{
           display: none;  /* hide the span text using this css */
           }
    
           a.info:hover span{ /*the span will display just on :hover state*/
           display:block;
           position:absolute;
           top: 1.5em;
           left: 3em;
           width:15em;
           border:1px solid #ff0000; /* border colour */
           background-color:#ffff99; /* background colour here */
           color:#000000;         /* text colour */
           text-align: center;
           font-size: .8em;
           font-style:italic;
           z-index:30;
           }
    
           .images {
           vertical-align:bottom;
           }
    
    
    

×
×
  • Create New...