Menu
Community /Pin to ProfileBookmark
@cootheadFeb 15.2009 — #Hi there aaron.martinas,
you will never get it to work like that. :eek:
Have a look at this example, it may suit your requirements, well almost. ?
[i]coothead[/i]@cootheadFeb 15.2009 — #Hi there aaron,
Well, you did not mention that in your original post, you naughty boy. ?
If I had been aware of that requirement, I would have offered you this example for your consideration...
[i]coothead[/i]
[RESOLVED] help framing a table with 4 divs
okay, im licked. ive been trying to get a table to sit in the center of 4 divs that “frame” it.
[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” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title></title>
</head>
<body style=”height: 100%”>
<div id=”outside” style=”border: 1px dashed black; width: 95%; background-color: gray; margin-left: auto; margin-right: auto;”>
<div id=”top” style=”border: 1px solid yellow; background-color: red; height: 5px;”></div>
<div id=”left” style=”border: 1px solid orange; background-color: red; width: 5px; height: 100% float: left”></div>
<div id=”right” style=”border: 1px solid orange; background-color: red; width: 5px; float: right”></div>
<div style=”display: inline; width: 100%”>
<table cellpadding=”0″ cellspacing=”1″ border=”0″ width=”100%” style=”background-color: green”>
<tbody>
<tr>
<td style=”background-color: lightgreen”>cell information</td>
</tr>
<tr>
<td style=”background-color: lightgreen”>cell information</td>
</tr>
<tr>
<td style=”background-color: lightgreen”>cell information</td>
</tr>
<tr>
<td style=”background-color: lightgreen”>cell information</td>
</tr>
</tbody>
</table>
</div>
<div id=”bottom” style=”border: 1px solid yellow; background-color: red; height: 5px;”></div>
</div>
</body>
</html>
that code gets me close, but the left and right divs just arent playing right. i cant get them to be a hieight of 100%, and to get them to force the table to sit between them.
any help? ive included a picture if the description above doesnt help
Sign in
to post a comment5 Comments(s) ↴
0
@cootheadFeb 15.2009 — #Hi there aaron.martinas,you will never get it to work like that. :eek:
Have a look at this example, it may suit your requirements, well almost. ?
[color=navy]
<!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=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#outside {
width: 95%;
margin:auto;
border:1px dashed #000;
}
#inner {
padding:5px;
border:2px solid #ff0;
background-color:#f00;
}
#table1 {
width:100%;
border:2px solid #ff0;
background-color:#008000;
}
#table1 td {
background-color:#90ee90;
}
</style>
</head>
<body>
<div id="outside">
<div id="inner">
<table id="table1" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
[/color][i]coothead[/i]
0
@cootheadFeb 15.2009 — #Hi there aaron,[color=navy]the framing was because I need to use custom backgrounds in each of the four "frame" divs[/color] [/quote]
Well, you did not mention that in your original post, you naughty boy. ?
If I had been aware of that requirement, I would have offered you this example for your consideration...
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#outside {
width:95%;
margin:auto;
border:1px dashed #000;
}
#top {
height:10px;
margin:5px 5px 0;
background-image:url(anim4.gif);
border:1px solid #008000;
font-size:0; /* this is required by IE 6 */ <br/>
}
#inner_left {
margin-left:5px;
padding-left:10px;
border-left:1px solid #008000;
background-image:url(anim1.gif);
background-repeat:repeat-y;
}
#inner_right {
margin-right:5px;
padding-right:10px;
border-right:1px solid #008000;
background-image:url(anim2.gif);
background-repeat:repeat-y;
background-position:right top;
}
#table1 {
width:100%;
border-right:1px solid #008000;
border-left:1px solid #008000;
border-collapse:collapse;
}
#table1 td {
background-color:#90ee90;
border-bottom:1px solid #008000;
}
#table1 #no_border {
border-bottom:0;
}
#bottom {
height:10px;
margin:0 5px 5px;
border:1px solid #008000;
background-image:url(anim5.gif);
font-size:0; /* this is required by IE 6 */
}
</style>
</head>
<body>
<div id="outside">
<div id="top"></div>
<div id="inner_left">
<div id="inner_right">
<table id="table1"><tbody><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td>cell information</td>
</tr><tr>
<td id="no_border">cell information</td>
</tr></tbody></table>
</div><!-- end #inner_right -->
</div><!-- end #inner_left -->
<div id="bottom"></div>
</div><!-- end #outside -->
</body>
</html>
[/color][i]coothead[/i]