58 users online (1 members and 57 guests)  


  Results 1 to 7 of 7

Related

  1. Html table border    Forum: HTML Forum
    Replies: 1
  2. Unwanted border outside table    Forum: HTML Forum
    Replies: 3
  3. Border for table cell rollover    Forum: CSS Forum
    Replies: 4
  4. Replies: 5
  5. Simple Table Border    Forum: CSS Forum
    Replies: 3
  1. #1
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86

    Unhappy Table border help

    I am having trouble with making a table border(I think) so that it could match up with the four images I have. To see what I mean http://www12.brinkster.com/covertwarfare/index.asp I might be hard to see but the table that says "Ghost Recon" there are four images at each corner. How could I get the table border to connect with them? Oh wait how could it? Table borders are boxed. Right? So how would I be able to connect these images?

    Thanks in advance!

    Ywun

  2. #2
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    If you're trying to make rounded corner box to go around a list of links, it can be tricky using tables. I've done something similar using rounded corners in a div, but can't offhand remember how. You'll have to wait 'til Monday when I'm back at work. (Spending the weekend at a winery!)
    If that's not what you're trying to do, then I would suggest a link to something similar, or post a gif image of what you're trying to do.

  3. #3
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    Thanks
    Here is the URL http://www.pc-overload.com/ I got the idea from.

    Ywun

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Ywun,

    Here is the basic table formation that you will need for your four corner images...
    Code:
    <html>
    <head>
    <title>rounded corners</title>
    <style type="text/css">
    <!--
    table.one {border:none; padding: 0px; width:200px; height: 200px; position: relative; top: 10%; left: 20%;}
    td.top {border-top: 2px solid #000000;}
    td.left {border-left: 2px solid #000000;}
    td.right {border-right: 2px solid #000000;}
    td.bottom {border-bottom: 2px solid #000000;}
    td.corner {width: 25px; height: 25px;}
    img.corner {width: 25px; height: 25px}
    //-->
    </style>
    </head>
    <body>
    <table class="one" cellspacing="0">
    <tr>
    
    <td class="corner" ><img class="corner"  src="" alt="" /></td>
    <td class="top">&nbsp;</td>
    <td  class="corner"><img class="corner"  src=""  alt="" /></td>
    
    </tr><tr>
    
    <td class="left"> &nbsp;</td>
    <td >&nbsp;</td>
    <td class="right" >&nbsp;</td>
    
    </tr><tr>
    
    <td  class="corner"><img class="corner"  src="" alt="" /></td>
    <td  class="bottom">&nbsp;</td>
    <td  class="corner"><img class="corner"  src="" alt="" /></td>
    
    </tr>
    </table>
    </body>
    </html>
    coothead

  5. #5
    Ywun's Avatar
    RAPTOR

    Status
    Offline
    Join Date
    May 2003
    Location
    New Jersey
    Posts
    86
    Thanks Coothead!
    I didn't really like rounded borders, I fine with regular square borders(for now )

    Ywun

  6. #6
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    I kind of thought of that. You might also consider using a background image for the table that would supply the rounded corners.
    I've heard that CSS 3 might provide a facility for rounded corners. That would make the job alot easier.
    We'll see.........

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Android ,

    This is rounded corners using divs...
    I have attached the corner .jpgs...
    rotate it three times in an image editor and you've the complete set !! ... so you can see what it looks like
    I only made a quick one, for best result it really needs to be transparent
    Code:
    <html>
    <head>
    <title>Round Table</title>
    <style type="text/css">
    <!--
      div.container {position:relative; left:300px; top:300px; border-style: solid; border-width: 0px;}
      div.one {position:relative; left:0px; top:0px;}
      div.two {border-top: solid 1px  #aaaaaa; width:150px; position:relative; left:25px; top:-25px;}
      div.three {position:relative; left:175px; top:-45px;}
      div.four {border-left: solid 1px  #aaaaaa; border-right: solid 1px #aaaaaa; width: 200px; position:relative; left:0px; top:-49px;}
      div.five {position:relative; left:0px; top:-49px;}
      div.six {border-bottom: solid 1px  #aaaaaa; width:150px; position:relative; left:25px; top:-69px;}
      div.seven {position:relative; left:175px; top:-94px;}
    //-->
    </style>
    </head>
    <body>
      <div class="container">
      <div class="one"><img src="two.jpg" alt="" /></div>
      <div class="two"></div>
      <div class="three"><img src="one.jpg" alt="" /></div>
      <div class="four"></div>
      <div class="five"><img src="three.jpg" /></div>
      <div class="six" ></div>
      <div class="seven" ><img src="four.jpg"></div>
      </div>
    </body>
    </html>
    coothead
    Attached Images Attached Images



Tags for this Thread