SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Overlib

  1. #1
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlib

    A site I'm maintaining uses this: overlib

    Forgive me for being wrong, but can I not do all of this with CSS?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes with a few limitations
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 12345</title>
    <style type="text/css">
    *{padding:0;margin:0;}
    
    .con{margin:100px;}
    
    .con a{
    position:relative;
    padding:0 10px 0 10px;
    text-decoration: none;
    width:180px;
    z-index:100;
    }
    
    .con a:hover{background:#ffffff;}
    
    .con a span{display:none;}
    
    .con a:hover .a ,.con a:hover .b{
    padding:0 10px 0 10px;
    display:block;
    position:absolute;
    top:-20px;
    left:0px;
    text-decoration: none;
    width:150px;
    background:#eaeaea;
    cursor:pointer;
    color:#0000ff;
    z-index:100;
    }
    
    .con a:hover .b{top:-50px;left:40px;}
    
    </style>
    </head>
    <body>
    
    <div class="con">
    
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Doc 1<span class="a">I am the best doc</span><span class="b">&nbsp;</span></a>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Doc 2<span class="a">No I am better</span><span class="b">&nbsp;</span></a>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Doc  3<span class="a">The Greatest I am</span><span class="b">&nbsp;</span></a>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    <a href="##">Doc  4<span class="a">Buger of I Im the greatest</span><span class="b">&nbsp;</span></a>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I suppose the only real limitation is the 'mouse following' functionality.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes and you need (white space) space around your (stating points)


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
  •