Ccs in html page round table edges without 4 corner pics

rachel38 · December 20, 2010, 5:02am

Looking for help in creating the following pic below with ccs in a html page, i have tried and cannot figure out how.

http://www.dreadfulzombie.com

I have been trying to insert the ccs into the <head> instead of a file.

I have looked up so many websites on ccs and tables its crazy, trying to make this simple and work corectly with Firefox/Explorer etc…

-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;

i have had a hard enuff time with basic nested html tables, but getting it into ccs, more difficult.

Trying to create Table 1 with text that will wrap around Table2 inside of Table1 with both table edges being rounded.
Without having to create 4 rounded edge pics or 1 top / 1 bottom rounded pic’s.

Anybody out there that can help create this please?

ralphm · December 20, 2010, 5:12am

Hi rachel38, welcome to SitePoint.

CSS3 rounded corners won’t work in IE, but is easy to do in supporting browsers. Could you post the html and css that you are using? Then we can show how to do it.

rachel38 · December 20, 2010, 6:18am

I am just learning ccs and know some html trying this, seems difficult. Since it wont work in IE, i am trying to use the images in ccs then.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div align="left">
<table width="500" cellpadding="5" cellspacing="0" border="0" style="background-color: #565656" class="borderless">
<tr>
<td width="725" valign="top"> 
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #565656" class="borderless">
<tr>
<td align="center">
<p>
<br /> 
<h1><font color="#1C008E" style="font-size:17px;"><strong><u>text, text, text, text, text, text, text, text, text</u></strong></font></h1>
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text.</font>
<br />
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text</font>
<br /><br />
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text</font>
<br /><br /><br /><br /><br /><br /><br /><br />
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text text text text text text text text text text</font>
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text text text text text text text text text text</font>
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text text text text text text text text text text</font>
<br />
<font color="#FFFFFF" style="font-size:16px;">text, text, text, text, text, text, text, text, text text text text text text text text text text text text text text text text text</font>
</p>
</td>
</tr>
</tr>
</table>
<td width="225" valign="top"> 
<table width="225" cellpadding="0" cellspacing="0" border="0" style="background-color: #9C084A" class="borderless">
<tr>
<br /><br /><br />
<td align="center">
<p>
<br />
&nbsp; &nbsp; <font color="#FFFF00" style="font-size:15px;"><SPAN style="BACKGROUND-COLOR: #339966"><strong>&nbsp; text text text text text &nbsp;</strong></span></font>&nbsp; &nbsp;
<br /><br />
&nbsp; &nbsp; <font color="#FFFF00" style="font-size:15px;"><SPAN style="BACKGROUND-COLOR: #339966"><strong>&nbsp; text text text text text &nbsp;</strong></span></font>&nbsp; &nbsp; 
<br /><br />
&nbsp; &nbsp; <font color="#FFFF00" style="font-size:15px;"><SPAN style="BACKGROUND-COLOR: #339966"><strong>&nbsp; text text text text text &nbsp;</strong></span></font>&nbsp; &nbsp; 
<br /><br />
&nbsp; &nbsp; <font color="#FFFF00" style="font-size:15px;"><SPAN style="BACKGROUND-COLOR: #339966"><strong>&nbsp; text text text text text &nbsp;</strong></span></font>&nbsp; &nbsp; 
<br /><br />
&nbsp; &nbsp; <font color="#FFFF00" style="font-size:15px;"><SPAN style="BACKGROUND-COLOR: #339966"><strong>&nbsp; text text text text text &nbsp;</strong></span></font>&nbsp; &nbsp; 
<br /><br />
&nbsp; &nbsp; <font color="#FFFF00" style="font-size:15px;"><SPAN style="BACKGROUND-COLOR: #339966"><strong>&nbsp; text text text text text &nbsp;</strong></span></font>&nbsp; &nbsp;
<br /><br /> 
</p>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
*****************************************
trying to put this together and im getting confused.
*****************************************
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style type="text/css"> 
/*<![CDATA[*/  
.roundcont {
    width: 250px;
    background-color: #f90;
    color: #fff;
}
.roundcont p {
    margin: 0 10px;
}
.roundtop { 
    background: url(images/corners/tr.gif) no-repeat top right; 
}
.roundbottom {
    background: url(images/corners/br.gif) no-repeat top right; 
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}
/*]]>*/
</style>
  
  
</head>
<body>

<div class="roundcont">
   <div class="roundtop">
     <img src="tl.gif" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />
   </div>

   <p>text text text text text text text text text
    text text text text text text text text text text
    text text text text text text text text text text
    text text text text text text text text text 
    text text text text text text text text text text
    text text text text text text text text text text 
    text text text text text text text text text text
    text text text text text text text text text text 
    text text text text text text text
   </p>
  
   <div class="roundbottom">
     <img src="bl.gif" alt="" 
     width="15" height="15" class="corner" 
     style="display: none" />
   </div>
</div>    
</body>
</html>

Im not sure how to get the text in table 1 to wrap under table 2.

heres the links to what the code above looks like:
http://www.dreadfulzombie.com/indexa.html

http://www.dreadfulzombie.com/indexb.html

which gives me http://www.dreadfulzombie.com/indexc.html

dresden_phoenix · December 20, 2010, 6:47am

I like your domain name!!

That being said, I HOPE you aren’t using tables for layout…

You can use PIE to get the rounded corners in IE. http://css3pie.com/

the rest is as easy as this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
  body{background: blue}
  #grayTable{ background: silver; width:560px;  padding:20px; overflow:auto; margin: 0 auto;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
     border-radius:15px;
  }/*margin:0 auto centers  the table, width is how wide you want it to be ( minus the padding) ;*/
  #pinkTable{ background:pink; float:right; width:100px;   margin: 0 20px 20px 20px; padding:20px;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
     border-radius:15px;
  
  }/* width:  controls how wide the pink table is.  puts space areound the area... */
  #grayTable h1{margin:0;  }
</style>
</head>

<body>

<div id="grayTable">
	<div id="pinkTable">
     	text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text 
     </div>
<h1>This is the content  for the gray table</h1>
 <p>  Note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
 <p>This is the content  for the gray table, note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
</body>
</html>

rachel38 · December 20, 2010, 7:44am

Instead of using the code that doesnt work with IE, how would i get this to work using a top .png and a bottom .png for the grey table and get the inner table to be over to the right side where text wraps around it ?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title> 
<style>
#grayTable{ background: silver; width:560px;  padding:20px; overflow:auto; margin: 0 auto;
}/* width:  controls how wide the pink table is.  puts space areound the area... */
#grayTable h1{margin:0;  } 
#table { width: 136px; background-color: #69c; }
#table-top { width: 136px; height: 20px; background-image: url(img/table-top.png); }
#table-bottom { width: 136px; height: 20px; background-image: url(img/table-bottom.png); }
</style>    
</head>
<body>
<div id="grayTable">     
<div id="table-top"></div>
<div id="table-content" style="width: 136px; height: 200; background-color: #9C084A;">some table content<br />gfgddgs
</div>
<div id="table-bottom"></div>      
<h1>This is the content  for the gray table</h1>
 <p>  Note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
 <p>This is the content  for the gray table, note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
</body>
</html>

i have this now, havent created the .png pics for the grey table, but cant seem to get thisng to work.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title> 
<style>
#grayTable { width: 560px; background-color: #69c; }
#grayTable-Top{ width:560px;  height: 20px; padding:20px; background-image: url(img/grey_table-top.png); }
#grayTable-Bottom{ width:560px;  height: 200px; padding:20px; background-image: url(img/grey_table-top.png); }
}/* width:  controls how wide the pink table is.  puts space areound the area... */

#redTable { width: 136px; background-color: #69c; }
#redTable-top { width: 136px; height: 20px; background-image: url(img/table-top.png); }
#redTable-bottom { width: 136px; height: 20px; background-image: url(img/table-bottom.png); }
</style>    
</head>
<body>
<div id="greyTable" style="width: 560px; height: 600; background-color: ##999999;"> 
<div id="grayTable-Top"></div>     
<div id="redTable-top"></div>
<div id="redTable-content" style="width: 136px; height: 200; background-color: #9C084A;">some table content<br />gfgddgs
</div>
<div id="redTable-bottom"></div>      
<h1>This is the content  for the gray table</h1>
 <p>  Note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
 <p>This is the content  for the gray table, note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<div id="grayTable-Bottom"></div>
</div>
</body>
</html>

PaulOB · December 20, 2010, 12:33pm

Hi,

Using Dresdens code (because it’s neater) you would just nest the top and bottom corners inside the floated elements. I’m assuming you are just simply capping a full width double corner in one go.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
    background: blue
}
#grayTable {
    background: silver;
    width:600px;
    overflow:auto;
    margin: 0 auto;
}/*margin:0 auto centers  the table, width is how wide you want it to be ( minus the padding) ;*/
#pinkTable {
    background:pink;
    float:right;
    width:140px;
    margin:20px;
}/* width:  controls how wide the pink table is.  puts space areound the area... */
#grayTable h1 {
    margin:0;
    padding:10px 0;
}
#pinkTable p {
    padding:0 10px
}
.tabletop, .tablebase {
    width:600px;
    height:10px;
    overflow:hidden;
    background:red url(images/tabletop.png) no-repeat 0 0;
    clear:both;
}
.tablebase {
    background:green url(images/tablebase.png) no-repeat 0 0;
}
.pink {
    background:blue url(images/tabletop2.png) no-repeat 0 0;
    width:140px;
}
.pinkbase {
    background:yellow url(images/tablebase2.png) no-repeat 0 0;
    width:140px;
}
</style>
</head>
<body>
<div id="grayTable">
    <div class="tabletop"></div>
    <div id="pinkTable">
        <div class="tabletop pink"></div>
        <p> text text text text text text text text text text  text text text text text text text text text text text text text text text text text text text text text text</p>
        <div class="tablebase pinkbase"></div>
    </div>
    <h1>This is the content  for the gray table</h1>
    <p> Note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    <p>This is the content  for the gray table, note  there is no actual container for it...: text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    <div class="tablebase"></div>
</div>
</body>
</html>

You may want an inner element in each if you want padding inside the box but I just added some padding to the existing p element instead. The bright colours are to show where you should have a different image. Also normally you wouldn’t name a class or id by its colour as that’s bad practice but in this case it helps you identify the element but should be changed to a more generic name.

Also you must use a full docytype or all bets are off.

If you want many round corners it may be easier for you to follow a tutorial that explains this in detail and Jason has a tutorial here.