homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Curved table corners
phex




msg:4164024
 5:46 pm on Jul 3, 2010 (gmt 0)

Guys.

Instead of heaving a box like table on a webpage, is it possibe to curve the conners of the table using html or any other language?

 

birdbrain




msg:4164307
 1:39 pm on Jul 4, 2010 (gmt 0)

Hi there phex,

the following code will work in Firefox,Safari and Opera....


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
body {
background-color:#fee;}
#table1 {
border:2px solid #000;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
margin:50px auto;
background-color:#f96;
box-shadow: #323 60px 60px 120px;
-moz-box-shadow: #323 60px 60px 120px;
-webkit-box-shadow:#989 30px 30px 60px;
}
#table1 td {
width:324px;
height:200px;
border:1px solid #000;
border-radius:21px;
-moz-border-radius:21px;
-webkit-border-radius:21px;
text-align:center;
background-color:#fc9;
}
</style>

</head>
<body>

<table id="table1"><tr>
<td>table cell</td>
</tr></table>

</body>
</html>


This is CSS3 methodology and your guess is as good as mine as to when it will be implemented by IE.
I would definitely suggest that you do not hold your breath whilst waiting. ;)

birdbrain

rocknbil




msg:4164362
 5:48 pm on Jul 4, 2010 (gmt 0)

And thereby hangs the rub, flippin' IE . . . .

A typical method to get IE to play nicely is to create a circle image, create a div or cell exactly half the width and height of the circle, then apply the circle as a background image. For the upper left corner, it will fall into place at 0,0, but for the other three corners you tweak the background position up, down, left and right to allow the appropriate corner to show. This works with table cells or semantic elements (<div>, <p>, etc.) For the horizontal and vertical borders, you can sometimes use the border properties, but most often have to use a background image there, comprised of a single pixel, positioned top, left, right, and bottom, repeating x and y accordingly.

An example CSS, HTML is two nested divs with a top and bottom row inside the inner one, each containing the actual corner divs:


#border-top-row,#border-bottom-row {
height: 12px;
float: left;
width: 100%;
background:url(/images/black-pixel.gif) repeat-x;
}
#border-top-row { background-position: top; }
#border-bottom-row { background-position: bottom; }
#border-outer, #border-inner {
float: left;
width: 100%;
background:url(/images/black-pixel.gif) repeat-y;
padding: 0;
margin:0;
}
#border-outer { background-position: left; }
#border-inner { background-position: right; }
#tl, #tr, #bl, #br {
height: 12px;
width: 12px;
font-size: 2px;
margin:0;
padding:0;
background:url(/images/24x24-black.gif);
}
#tl { float: left; background-position: 0 0; }
#tr { float: right; background-position: 12px 0; }
#bl { float: left; background-position: 0 -12px; }
#br { float: right; background-position: -12px -12px; }

Shado




msg:4174059
 2:15 pm on Jul 21, 2010 (gmt 0)

For a lighter code I use an image the width of my div with the 2 corners rounded

Example: [subiadrafts.com ]

and then I use the following code:

<div class="whateveryouwanttonameit"></div>

.whateveryouwanttonameit {
width:780px;
height:24px;
background-image: url(image.gif);
background-repeat: no-repeat;
float: left;
}

You can flip the image and adjust the code depending on where you want to have the corners.

You can use js but I perfer not to

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved