Results 1 to 10 of 10

Thread: Is there a vertical <hr>?

  1. #1
    Join Date
    Apr 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Is there a vertical <hr>?

    Ok I need answer if there is such a thing coz I want to make a web page that has a vertical boundery.

    edit by me: I tried to use backgrounds but the problem is it appears in different browsers and window size.
    Last edited by enigma2005; 04-30-2005 at 08:00 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No. Folks have gotten creative and used, at times, a table containing a single cell containing a transparent image with its width, height and background color set to achieve the desired effect. You can display this inline or as a block element but it will not be as intuitive to use as an <HR> because of the way HTML flows on a page. The code could be something like this:

    HTML Code:
    <table style="display:inline;border-collapse:collapse;border:0"><tr>
    <td style="padding:0"><img src="transparent.gif" width="2" height="600" style="background:black">
    </td></tr></table>
    Last edited by jscheuer1; 04-30-2005 at 03:50 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by enigma2005
    Is there a vertical <hr>?
    As John said, no there isn't. However, an approach you might try in preference to that rather nasty table thing, is a simple border to the left- or right-hand side of whatever you're separating. For example,

    HTML Code:
    <style type="text/css">
      #content {
        border-left: 2px solid black;
      }
    </style>
    
    <!-- ... -->
    
    <div id="content">
      <!-- ... -->
    </div>
    If that's not sufficient information, please provide a URL to the page in question.

    Mike

  4. #4
    Join Date
    Apr 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I have tried jscheur1's script and copy/pasted it then I saw a vertical black line but I did not saw the effect of mwinter's script. Actually what I want to achieve is something like this http://www.foruma-z.com/ You see the blue boundery there, I want my www.freewebs.com/topicexpress to look like that. Well I only use Microsoft Frontpage aside from adobe photoshop coz they are the only program that I have and I only know .htm. Sorry for behaving like this coz I am still new to this stuffs and I was kinda addicted and curious to a lot of things.

    Thanks guys and waiting for more response

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Actually Mike's idea works well with your setup. Thank you BTW for using absolute url's in your source for images, it makes it so much easier to redesign the page. I am attaching a replacement for the page you provided the link for. The vertical lines are light blue, 2 pixels in width, you will be able to adjust them in this part of the style section code:

    Code:
    table.vr {
    border-collapse:collapse;
    border-left:2px solid lightblue;
    border-right:2px solid lightblue
    }
    The other entries in the style section were to make things look as I guessed, from your example page, that you wanted them to. I made some changes to the HTML code, as well as more style entries, to make the lines run all the way up and down the page. Some padding and margins were added in the style section to maintain your original look after collapsing the table borders to get the vertical lines to butt up against your menus and other horizontal blue content.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok I used it but I did not get the desired effect. I pasted these codes:
    <table style="table.vr {
    border-collapse:collapse;
    border-left:2px solid lightblue;
    border-right:2px solid lightblue
    }"><tr>
    <td style="padding:0"><img src="transparent.gif" width="2" height="600" style="background:black">
    </td></tr></table>
    not really sure if I got the whole thing right.

    This is the result http://www.freewebs.com/topicexpress/test2.htm Well I only use one table for this page that is 63% width.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I redid the whole page, it is attached as a .zip file to my previous post. Click on tex.zip up ^^there^^ to download it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Apr 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OMG! This is awesometastic. Two Thumbs Up. Please check this link I upload the tex.htm you gave me: http://www.freewebs.com/topicexpress/tex.htm I will use it one of this day very soon. I have to bring the htm first back at home coz I am in the public paid computer cafe.

    Thanks jscheuer1. You made me dancing in happinesss. Yepeee. I will post an announcement there in my About Us! forum and I will mention your name to give you credit. I will just post the link here.

  9. #9
    Join Date
    Apr 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Bump: Ok as I have promised I will give you credits and the link is here: http://www2.phpbb-host.com/phpbb/vie...m=topicexpress

    Thank You!:-)

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by enigma2005, in Topic Express forums
    Also may I add that the site is best viewed in 1074x768 screen resolution. Enjoy the updates everyone and come back soon
    If you do a search and replace All, of width="63%" to width="636" it will look fine at all resolutions.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •