...

View Full Version : ccs table code in a html page help



ken2112
12-20-2010, 04:45 AM
Looking for help in creating the following pic below with ccs in a html page, i have spend countless hours 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, both tables different colors.

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?

Excavator
12-20-2010, 07:30 AM
Hello ken2112,
Try it like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#small_container {
width: 200px;
float: right;
margin: 20px 20px 10px 10px;
background: #f90;
}
#container, #small_container {
padding: 10px;
-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;
}
</style>
</head>
<body>
<div id="container">
<div id="small_container">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</p>
<!--end small_container--></div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
<br /><br />
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
<br /><br />
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
<br /><br />
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
<br /><br />
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end container--></div>
</body>
</html>

You won't see rounded corners in IE with that though. Maybe IE9 but nothing below that.

Have a look at the link about tables in my signature line.

..

ken2112
12-20-2010, 09:41 AM
since it doesnt work with IE, i tried to accomplish this with .png pics, it didnt quite come out right.



<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-bottom.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>

Excavator
12-20-2010, 09:51 AM
Maybe you can copy this rounded corner demo (http://nopeople.com/CSS%20tips/rounded%20corners/index.html).

The code you quote above has a few problems. Maybe your biggest problem is spelling, ie: #grayTable styling <div id="greyTable">
Here's yours cleaned up a little along with some comments and indentation -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #f63;
font: 100% Arial, Helvetica, sans-serif;
color: #333;
}
#greyTable {
width: 560px;
margin: 50px auto;
background: #69c;
}
#grayTable-Top {
width:560px;
height: 20px;
background: url(img/grey_table-top.png);
}
#grayTable-Bottom {
width:560px;
height: 200px;
background: url(img/grey_table-bottom.png);
}
#redTable {
width: 136px;
float: right;
margin: 20px 20px 10px 10px;
background: #9c084a;
}
#redTable-top {
width: 136px;
height: 20px;
background: url(img/table-top.png);
}
#redTable-bottom {
width: 136px;
height: 20px;
background: url(img/table-bottom.png);
}
</style>
</head>
<body>
<div id="greyTable">
<div id="grayTable-Top"></div>
<div id="redTable">
<div id="redTable-top"></div>
gfgddgs<br />
gfgddgs<br />
gfgddgs<br />
gfgddgs<br />
some table content<br />
gfgddgs<br />
gfgddgs<br />
gfgddgs<br />
gfgddgs<br />
<div id="redTable-bottom"></div>
<!--end redTable--></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
</p>
<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
</p>
<div id="grayTable-Bottom"></div>
<!--end greyTable--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum