SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any one know how to duplicate this effect?

    The effect found Wired News is what I would like to know how it is accomplished...

    If you look down the left side (black part) you will see the subsets category...how would you duplicate the effect where you have the dashed outline for the box, and then for example "Technology" as well as the link that says "more>" posistioned where it is inside the dashed line?

    Hope that makes sense...? Should be easy if you view the website.

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Looks like they just put two layers over top of each other, a simplier way is to use this:

    Code:
     <style>
     .subcat{
     	border-style: dashed;
     	border-color: #000;
     	width: 100px;
     }
     </style>
     <fieldset class="subcat"><legend>Sub Category</legend>
     Test
     </fieldset>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool,

    Thanks, I'll try it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just for completeness you could do it the long way
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    h3{
     position:absolute;
     top:-15px;
     left:30px;
     margin:0;
     padding:0 5px;
     line-height:25px;
     background:#fff;
    }
    .outer {
     position:relative;
     width:300px;
     border:1px dashed #000;
     margin-top:20px;
     padding-top:7px;
    }
    .outer p {padding:5px}
    .outer h3 a{
     line-height:20px;
     font-size:70%;
     border:1px solid #000;
     background:#ffffcc;
     text-decoration:none;
     vertical-align:top;
     padding:0 5px;
    }
    </style>
    </head>
    <body>
    <div class="outer">
    <h3>Sub Category <a href="#">More ></a></h3>
    <p>Some text for test purposes : Some text for test purposes :  </p>
    <p>Some text for test purposes : Some text for test purposes :  </p>
    </div>
    </body>
    </html>
    Paul

  5. #5
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I looked at their code and no sign of fieldset or legend.

    Paul, if you pad out your text in the example, so that there is more than 100% page height, then use the wheel on your mouse to scroll, you see the dreaded IE dashed border bug.

    BUT, no sign of it on the wired site, presumably because the boxes are too short. No sign of images used either. Or they may be using java to refresh the page to avoid the bug.

    I always wondered about this bug, because it only shows for under 2 pixels wide dashed/dotted borders. Is it possible to put another div inside one with a 2px dashed border, that overlaps the outer one's border by 1px, and would that fix the problem?

    [edit] was just looking at their page agin, this time the bug showed its orrible little head





    Trevor
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Trevor
    I always wondered about this bug, because it only shows for under 2 pixels wide dashed/dotted borders. Is it possible to put another div inside one with a 2px dashed border, that overlaps the outer one's border by 1px, and would that fix the problem?
    Your wish is my command :

    http://www.pmob.co.uk/temp/categorybox.htm

    Ipx dashed borders in ie6 that don't disappear when the mouse scoll wheel is used. (haven't bothered to check other browsers yet)

    Paul

  7. #7
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh heh

    Trevor
    PS, see the clearing div thread I posted. Now that's a good one!
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness


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
  •