1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Is This Possible With CSS

Discussion in 'CSS' started by HP11, Jan 6, 2006.

0
  1. #1
    I am curious as to how you would create a vertical dotted line of a specific length with CSS. For example, I have been using: .line { border-right: 1px dotted #000000; }, which does create the desired effect to some extent.

    What I really would like is for the vertical dotted line to only be of a specific length and not the whole length of the <td>, say for example 3/4 of it and vertically centered. Is this possible with CSS?

    Thank you in advance for your help!
     
    HP11, Jan 6, 2006 IP
  2. Djohn

    Djohn Peon

    Messages:
    75
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I not aware of any ways of manipulating the actual border of a cell in the way you request. However, I suppose you could use some alternate solutions, like placing a 1px high div in the cell or use absolute positioning on a div.

    I seriously doubt the results would be great, not to mention crossbrowser compatible, but I think it could be done to some extent.
     
    Djohn, Jan 9, 2006 IP
  3. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #3
    totally possible, but probably a bit messy if your mixing css and tables. ie using tables for your layout.

    I would approach it by having a class of the required height, with the line a tiled gif in the background. Then I would change the z index so that it is layed behind your content.

    eg
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .background {
    border-left-width: thin;
    border-left-style: dotted;
    border-left-color: #0099FF;
    z-index: 1;
    height:100px;
    }
    .content {
    z-index: 2;
    padding:5px;
    }
    -->
    </style>
    </head>

    <body>

    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td height="200" valign="top"><div class="background"><div class="content">hello</div></div></td>
    <td valign="top"><div class="content">some text</div></td>
    </tr>
    <tr><td>--</td><td>--</td></tr>
    </table>
    </body>
    </html>
     
    stuw, Jan 9, 2006 IP
  4. dave487

    dave487 Peon

    Messages:
    701
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You could create an image file with the format you want and make it the background of the td using css.
     
    dave487, Jan 10, 2006 IP
  5. HP11

    HP11 Peon

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks for all the help everyone!
     
    HP11, Jan 10, 2006 IP