SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Vertical Rules?

  1. #1
    SitePoint Member Casual Imp's Avatar
    Join Date
    Jul 2002
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Rules?

    I often see web sites with dotted vertical lines on their pages and know you can control the look and feel of the horizontal rule to be dashed. Is there any CSS or HTML code that can control vertical lines or should I do that graphically? Thanks in advance.

  2. #2
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here ya go:
    Code:
    <style type="text/css">.verticalLineOnTheLeft {
      border-left: 1px solid #000000;
    }
    </style>
    
    <div class="verticalLineOnTheLeft"><p>The text in this box
    will have a vertical line to the left.</p>
    
    <p>Here is some more text to pad things out a bit.</p>
    
    <p>You could also add a height: 200px property to the CSS for a 200 pixel high box.</p>
    </div>

  3. #3
    SitePoint Enthusiast Decoy's Avatar
    Join Date
    May 2002
    Location
    UK
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skunk, Is that for a dashed or solid vertical line?

  4. #4
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Decoy
    Skunk, Is that for a dashed or solid vertical line?
    Thats for a solid line, replace "solid" with "dotted" or "dashed" for the relevant effect. (NS 6.x and IE5.5+)

  5. #5
    SitePoint Member Casual Imp's Avatar
    Join Date
    Jul 2002
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet!

    Thanks Skunk. Now, I'm assuming you could just define the height of this in a table seperate from the text to make it look more spaced with cellspacing or cellpading. I'll experiment with this.

  6. #6
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do, but if you're going to use tables you may as well just define that style on one of the table cells with <td class="verticalLineOnTheLeft">. Tables aren't trendy any more so I suggest playing with CSS on its own to get the effect you want

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, using tables is a way.
    But I just recently say this site:

    http://www.eric-clapton.co.uk/ecla/

    It's the Eric Clapton Lyric Archive.

    Very beautiful layout if I say so myself

    My question: Is this also done with tables? (the lines I mean). From his html it seems he's using some sort of style... so I really wonder how he did that...

    I thought about mailing, but figured not to bother the webmaster.

    If anybody knows...

    (not asking for the full code, but if anybody knows how, just point me in the right direction and I'll figure the rest out myself

  8. #8
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm happy to say that there isn't a single table on that entire site

    The key to the lines appears to be this bunch of code:
    Code:
    <div class="line" id="v1"><img src="" alt=""/></div>
    <div class="line" id="v2"><img src="" alt=""/></div>
    <div class="line" id="v3"><img src="" alt=""/></div>
    <div class="line" id="v4"><img src="" alt=""/></div>
    <div class="line" id="v5"><img src="" alt=""/></div>
    <div class="line" id="h1"><img src="" alt=""/></div>
    <div class="line" id="h2"><img src="" alt=""/></div>
    <div class="line" id="h3"><img src="" alt=""/></div>
    <div class="line" id="h4"><img src="" alt=""/></div>
    <div class="line" id="h5"><img src="" alt=""/></div>
    Which is styled using the following rules:
    Code:
    div#v1     { top:   0px; left:  20px; height: 412px; width:   1px; }
    div#v2     { top:  60px; left: 209px; height: 282px; width:   1px; }
    div#v3     { top:  81px; left: 267px; height: 448px; width:   1px; }
    div#v4     { top:  20px; left: 581px; height:  40px; width:   1px; }
    div#v5     { top:  39px; left: 740px; height: 328px; width:   1px; }
    
    div#h1     { top:  19px; left:  20px; height:   1px; width: 626px; }
    div#h2     { top:  60px; left:  20px; height:   1px; width: 720px; }
    div#h3     { top:  81px; left: 209px; height:   1px; width: 531px; }
    div#h4     { top: 341px; left:  20px; height:   1px; width: 248px; }
    div#h5     { top: 362px; left:  20px; height:   1px; width: 248px; }
    
    div.line { background-color: white; }

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks!

    That turned out not to be so difficult after all...

    And the real beaut of it is you don't even have to use any gif's or anything, which was what I fist thought he did...

    I know I'm gonne play around whith this a lot


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
  •