Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ccs table code in a html page help

    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ken2112,
    Try it like this -
    Code:
    <!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.

    ..
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    with png pics instead

    since it doesnt work with IE, i tried to accomplish this with .png pics, it didnt quite come out right.

    Code:
    <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>
    Last edited by ken2112; 12-20-2010 at 09:46 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Maybe you can copy this rounded corner demo.

    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 -
    Code:
    <!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>
    Last edited by Excavator; 12-20-2010 at 10:11 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •