SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Vertical rule

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am going to be designing a site that requires a black vertical line separating a sidebar on the left hand side and the main content. I have been trying for two years (dumb, huh) to figure out how this is done. My understanding is that I need to draw a rule and insert it as a graphic. Is there an easier way to do this in HTML?

    I appreciate your feedback!
    Joanne Glasspoole
    www.glasspoole.com

  2. #2
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this in the body of a page and then mess around with it.

    <center>
    <table BORDER=0 CELLPADDING=0 WIDTH="98%" >
    <tr>
    <td BGCOLOR="#FFFFFF" width="100%">*
    <center>
    <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" >
    <tr>
    <td VALIGN=TOP WIDTH="149">*
    <center>
    <table BORDER=0 CELLSPACING=0 CELLPADDING=5 WIDTH="100%" >
    <tr>
    <td VALIGN=TOP height="286" width="100%">
    <center>
    </center>
    </td>
    </tr>
    </table>
    </center>
    </td>
    <td VALIGN=TOP WIDTH="1" BGCOLOR="#000000"><img SRC="spacer.gif" BORDER=0 height=1 width=1></td>
    <td VALIGN=TOP width="609">*
    <center>
    </center>
    </td>
    </tr>
    </table>
    </center>
    </td>
    </tr>
    </table></center>
    <center>
    </center>

    Spacer.gif is simply a 1x1 pixel gif file with nothing in it. Deamweaver seems to call this transparent.gif when it makes it.

  3. #3
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Youc an use the example above and it will work (although make sure that you insert quotation marks around ALL attributes such as border="0").

    However, you don't really need a spacer gif to do the trick, and they do tend to confuse alternative browser such as speech ones.

    What you can do is create a table with 3 columns, make the middle column about 3/4 pixels wide (or depending how wide oyu want your vertical line) and then change the background color.

    You should experiement in as many ways as possible as this si the only true way to learn.

  4. #4
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Nicky

    However, you don't really need a spacer gif to do the trick, and they do tend to confuse alternative browser such as speech ones.

    What you can do is create a table with 3 columns, make the middle column about 3/4 pixels wide (or depending how wide oyu want your vertical line) and then change the background color.

    So in my example if you take out the <img SRC="spacer.gif" BORDER=0 height=1 width=1> and increase the table width to 3 you should get a black line. In IE you do but in netscape you don't. I was under the impression in Netscape you had to have something in the table and that is why the 1x1 pixel gif is used. Could you show a simple code as you suggest to create the vertical line that works in Netscape?

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky...gthorley is correct...you have to have SOMETHING to fill the table cell or the cell collapses in NS. Putting a &nbsp; won't work if you want really thin lines as it is one full character space.

    jglasspoole...

    try this code

    <table>
    <tr>
    <td>
    content here
    </td>
    <td width="1"><img src="clear.gif" width="1" height="1" border="0"></td>
    </tr>
    </table>

    That is the most basic table structure you can have that will give you what you need. You can adapt it from there. (clear.gif is the same thigng as spacer.gif beign a 1x1 pixel transparent GIF)

    here is a link to download the clear.gif. Just right click and save as.

    http://www.oursmallgroup.com/images/clear.gif
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole I can't get a line to show in your simple structure is something missing.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback! I was able to get gthorley's code to work in IE but not Netscape. (Does anybody else hate Netscape as much as I do?!!!)

    Creole, I couldn't get your code to work either.
    Joanne Glasspoole
    www.glasspoole.com

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sheesh...everyone's a critic...maybe if I would have put a background color in the table cell like this:

    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td>
    content here
    </td>
    <td width="1" bgcolor="#000000"><img src="clear.gif" width="1" height="1" border="0"></td>
    </tr>
    </table>

    so solly cholly
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget: you will need to make an actual GIF image. Otherwise, some users may get a place holder instead.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah...westmich, in my second to the last post, I gave a link to clear.gif for them to download.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also I believe the cellpadding="0" is a must if you want a thin line.

  12. #12
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this is going to sound a little rediculous, but after 20 minutes of looking at the same pages over and over I have lost hope of finding the answer on my own. I can't seem to figure out how to post a new question, only reply to existing threads. Can anyone help me? Thank you

    Dominique

  13. #13
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you want to post a new thread, you must go to the forum page that lists all the threads and then click on "New Thread".

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole, your solution works great! Thanks!!!
    Joanne Glasspoole
    www.glasspoole.com

  15. #15
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very cool...I am glad that it worked out for you...

    cheers
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •