46 users online (0 members and 46 guests)  


  Results 1 to 8 of 8

Related

  1. Side by side html tables    Forum: HTML Forum
    Replies: 7
  2. Replies: 2
  3. Replies: 3
  4. how to make a error border    Forum: HTML Forum
    Replies: 2
  5. Replies: 5
  1. #1
    Mofogirl's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2003
    Posts
    2

    How do I make a horizontal border on only one side

    How do I make a horizontal border not an <hr> but in the opposite direction...

  2. #2
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Re: How do I make a horizontal border on only one side

    Do you mean a vertical border? It depends on what it's bordering. A table? DIV element?
    DIVs are the easiest:
    Code:
    <div style="border-width:0 1px 0 0;border-color:#000000;"> 
    for the border on the right of the DIV element
    </div>
    <div style="border-width:0 0 0 1px;border-color:#000000;">
    for the border on the left of the DIV element
    </div>
    This gives you a vertical black border one pixel wide on the right (or left) of a DIV.
    Seeing some code would be helpful. Can you provide a link or a piece of your code so we can better help you?

  3. #3
    Mofogirl's Avatar
    New User

    Status
    Offline
    Join Date
    Oct 2003
    Posts
    2

    Re: How do I make a horizontal border on only one side

    It didn't work I out it on my site but it still didn't work

  4. #4
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking Re: How do I make a horizontal border on only one side

    Without seeing any code, it's hard to determing what isn't working.

    Here's something I whipped up to demonstrate what I was talking about:
    Code:
    <html>
    <head>
    <title>Div Borders Demo</title>
    
      <style>
    div {width:200px;height:150px;}
    
      </style>
    
    </head>
    
    <body>
    
    <div style="border-right: medium solid #000000;">
    border on right<pre style="float:right;">-------></pre>
    </div>
    
    <div style="border-left:medium solid #000000;">
    <pre style="float:left;"><-------</pre>border on left
    </div>
    
    </body>
    </html>
    This is only one way of doing it. You might be looking for something completely different. That's why we prefer to see some code. (I can't give you directions to your closest variety store without knowing what part of town you're in.

  5. #5
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: How do I make a horizontal border on only one side

    Quote Originally Posted by Android
    I can't give you directions to your closest variety store without knowing what part of town you're in.
    lol, quote of the month material

    D

  6. #6
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Re: How do I make a horizontal border on only one side

    I re-read your original question and I may have mis-understood (or not)
    Maybe this is what you're looking for?
    Code:
    <html>
    <head>
    <title>Div Borders Demo2</title>
    </head>
    <body>
    <br />
    <!--This DIV creates the horizontal line.--> 
    <div style="width:200px;border-bottom: medium solid #000000;"></div>
    <!--This DIV is your content.....-->
    <div style="position:absolute;top:30px;margin-left:220px;">
    <pre><---------horizontal border run the opposite way</pre>
    </div>
    <!--This DIV is your content....-->
    <div style="position:absolute;top:100px;margin-left:10px;">
    <pre>horizontal border run the other opposite way------></pre>
    </div>
    <!--This DIV creates the horizontal line-->
    <div style="position:absolute;top:100px;left:450px;width:200px;border-bottom: medium solid #000000;">
    </div>
    </body>
    </html>
    This makes a horizontalline on either side of a line of text.
    Oh, oh, oh, I think I've thought of another way of doing this!
    Good thing we're not busy here at work......

  7. #7
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Re: How do I make a horizontal border on only one side

    How's this?
    Code:
    <html>
    <head>
    <title>Div Borders Demo3</title>
    </head>
    <body>
    <div style="padding-left:220px;">
    <pre><-------Horizontal Line to the left</pre>
    </div>
    <div style="position:absolute;top:20px;width:200px;border-bottom: medium solid #000000;">
    </div>
    <br />
    <pre>Horizontal Line to the right--></pre>
    <div style="position:absolute;top:70px;left:260px;width:200px;border-bottom: medium solid #000000;">
    </div>
    </body>
    </html>
    There are several ways to do this........now I'm going to try it with tables.....

  8. #8
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Re: How do I make a horizontal border on only one side

    Using tables:
    Code:
    <html>
    <head>
    <title>Simulating HRs</title>
    </head>
    <body>
    <table>
    <tr>
    <td style="width:200px;text-align:top;">
    <br>
    <hr style="color:#000000;">
    </td>
    <td>
    <pre><--------horizontal line here</pre>
    </td>
    </tr>
    <tr>
    <td style="width:200px;text-align:top;">
    <br>
    <hr style="color:#000000;">
    </td>
    <td>
    <pre><--------horizontal line here</pre>
    </td>
    </tr>
    <tr>
    <td style="width:200px;text-align:top;">
    <br>
    <hr style="color:#000000;">
    </td>
    <td>
    <pre><--------horizontal line here</pre>
    </td>
    </tr>
    <tr>
    <td>
    <pre>horizontal line here-------></pre>
    </td>
    <td style="width:200px;text-align:top;">
    <br>
    <hr style="color:#000000;">
    </td>
    </tr>
    </table>
    </body>
    </html>
    Wish for sure I know what you wanted.........



Tags for this Thread