SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot tragu's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any unique design tip or technique which you want to share...

    Do you have any simple tip, trick, or technique that you found useful and would like to share with sitepoint members?

    i.e - css link mouseover trick
    <style type="text/css">
    a:link{color:blue}
    a:hover{color:red}
    </style>

    How-to...
    placing the above code into your <head>and</head> will change your link color from blue to read when you mouseover it. (voila)

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, a very common thing to do with CSS now, added to that:
    css link mouseover trick - underline
    <style type="text/css">
    a:link{color:blue;text-decoration:underline;}
    a:hover{color:red;text-decoration:none;}
    </style>
    InQuE

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use this when i make tables now. usually, if you use the default function for the table tag (<table border=1), it gives a 2px border when viewed, now, its reduced to 1 by CSS style, else you have to hard-code very lots.
    easy standard-size 1px borders
    <style type="text/css">
    <!--
    .border {background-color:#000000;}
    .color1 {background-color:#FFFFFF;}
    .color2 {background-color:#CCCCCC;}
    -->
    </style>
    <table border=0 cellpadding=3 cellspacing=1 class="border">
    <tr><td class="color1">
    This is
    </td><td class="color2">
    A Test!
    </td></tr>
    </table>
    InQuE

  4. #4
    SitePoint Zealot tragu's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good trick, but doesn't work in Netscape. You could also get one pixel table border with the following simple one line of CSS. (doesn't work in Netscape too)

    <table style="border:1px solid #000000" cellspacing="0" cellpadding="2">

    You can also use this border property in <td> tags as in
    <td style="border:1px solid #000000">

    There are some other properties which gives the border to the site specified.(left, right, top & bottom)
    border-left
    border-right
    border-top
    border-bottom

    i.e -
    <td style="border-right:1px solid #000000">

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by tragu
    That's a good trick, but doesn't work in Netscape. You could also get one pixel table border with the following simple one line of CSS. (doesn't work in Netscape too)

    <table style="border:1px solid #000000" cellspacing="0" cellpadding="2">

    You can also use this border property in <td> tags as in
    <td style="border:1px solid #000000">

    There are some other properties which gives the border to the site specified.(left, right, top & bottom)
    border-left
    border-right
    border-top
    border-bottom

    i.e -
    <td style="border-right:1px solid #000000">
    I'm pretty sure that if you linked the CSS with a class, instead of using an inline style, it would work in Netscape
    Wavelan

  6. #6
    SitePoint Zealot tragu's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand what you meant by linking with class. Do you mean linking an external style sheet? Give me an example if you don't mind...

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, a class is something like:
    .class {properties;}
    and it should work in netscape, unless your netscape doesnt support <table cellspacing> and CSS {background-color}
    InQuE

  8. #8
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Speaking of mouseover tricks, now here is a trick!

    Code:
    <div class="linkslist">
    
     <a href="link1">Link 1</a>
     <a href="link2">Link 2</a>
     <a href="link3">Link 3</a>
     <a href="link4">Link 4</a>
    
    </div>
    Now without a stylesheet that will display a bit like this:
    Link 1 Link 2 Link 3 Link 4

    ...but if you add the following styles:

    Code:
    .linkslist {
     width: 135px;
     font-family: Verdana, sans-serif;
     font-size: x-small;
     border: 1px solid black;
     background: #FCF8EE;
    }
    .linkslist a {
     display: block;
     padding: 2px;
     text-decoration: none;
     background: #F5E9D3;
     margin: 1px 0px;
     color: #000078;
     font-weight: bold;
    }
    .linkslist a:hover, .linkslist a:active {
     background: #E4CCB0;
    }
    .linkslist a:visited {
     color: #006070;
    }
    You will magically transform that list of links. Obviously, I can't show you within vbulletin, but here's a sample in a temporary location (see left and right panels). How's that for separation of content and layout!
    Last edited by mmj; Oct 1, 2002 at 23:57.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff


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
  •