PDA

View Full Version : Divs in a Table



blackwolf
Oct 24th, 2008, 06:41 PM
I have a page HERE (http://www.blackwolf-graphics.co.uk/graphics/sthelensrlfc/thestickman.html)and this is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="shortcut icon" href="/images/favicon.ico"><link rel="icon" href="/images/animated_favicon1.gif" type="image/gif" >

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BWG | The Stickman</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
}
body {
background-image: url(/images/wolfallblack.jpg);
background-repeat: no-repeat;
background-position: top right;
background-color: #000000;
}
h1 {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:48px;
text-shadow:#999999;
}
h2 {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
color:#9BD2F1;
font-style:italic;
}#content1 {
position: absolute;
top: 120px;
right: 10px;
width: auto; }

.roundedcornr_box_559899 {
background: #9bd2f1;
}
.roundedcornr_top_559899 div {
background: url(/images/roundedcornr_559899_tl.png) no-repeat top left;
}
.roundedcornr_top_559899 {
background: url(/images/roundedcornr_559899_tr.png) no-repeat top right;
}
.roundedcornr_bottom_559899 div {
background: url(/images/roundedcornr_559899_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_559899 {
background: url(/images/roundedcornr_559899_br.png) no-repeat bottom right;
}

.roundedcornr_top_559899 div, .roundedcornr_top_559899,
.roundedcornr_bottom_559899 div, .roundedcornr_bottom_559899 {
width: 100&#37;;
height:150px;
font-size: 1px;
}
.roundedcornr_content_559899 { margin: 0 30px; height:150px;}
.style2 {color: #333333}
.style4 {
font-size: 36px;
color: #FFFF00;
}
.style5 {
color: #666666;
font-weight: bold;
}
.style7 {color: #FF0000; font-weight: bold; }
.style9 {color: #FFFFFF; font-weight: bold; }
.style10 {
color: #000000;
font-style: italic;
}
</style>
<table width="75%"><tr><td><h1>BlackWolf Graphics</h1></td></tr></table><div id="content1"><table><tr><td><h2>The Stickman</h2></td></tr></table></div>
<script src="bwg_agwm_popup_engine.js"></script>
<script type="text/javascript">
</script>
</head>
<body><hr width="100%" color="9bd2f1">
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="roundedcornr_box_559899">
<div class="roundedcornr_top_559899"><div></div></div>
<div class="roundedcornr_content_559899">
<div align="center"><img src="../../images/stickman/redstickman.png" alt="Red Stickman" width="57" height="113" /><br />
<span class="style7">Red Stickman</span><br />
<span class="style2">Suitable for Black, White, Silver, Pale Blue or Yellow surfaces<br />
<span class="style10">By far our most popular Stickman</span></span><br />
<span class="style4">&#163;1.25</span> </div>
</div>
<div class="roundedcornr_bottom_559899"><div></div></div>
</div></td>
<td>&nbsp;</td>
<td><div class="roundedcornr_box_559899">
<div class="roundedcornr_top_559899"><div></div></div>
<div class="roundedcornr_content_559899">
<div align="center"><img src="../../images/stickman/silverstickman.png" alt="Silver Stickman" /><br />
<span class="style5">Silver Stickman</span><br />
<span class="style2">Suitable for Black, Blue, Red, or other dark surfaces<br />
<span class="style10">These are Silver and not grey</span></span><br />
<span class="style4">&#163;1.25</span>
</div>
</div>
<div class="roundedcornr_bottom_559899"><div></div></div>
</div></td>
<td>&nbsp;</td>
<td><div class="roundedcornr_box_559899">
<div class="roundedcornr_top_559899"><div></div></div>
<div class="roundedcornr_content_559899">
<div align="center"><img src="../../images/stickman/whitestick.png" alt="White Stickman" /><br />
<span class="style9">White Stickman</span><br />
<span class="style2">Suitable for Black, Blue, Red, or other dark surfaces<br />
<span class="style10">Popular for:<br /> Red Cars </span></span><br />
<span class="style4">&#163;1.25</span> </div>
</div>
<div class="roundedcornr_bottom_559899"><div></div></div>
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><div align="center"><img name="PaypalButton" src="" width="100" height="32" alt="Paypal Button" style="background-color: #808080" /></div></td>
<td>&nbsp;</td>
<td><div align="center"><img name="PaypalButton" src="" width="100" height="32" alt="Paypal Button" style="background-color: #808080" /></div></td>
<td>&nbsp;</td>
<td><div align="center"><img name="PaypalButton" src="" width="100" height="32" alt="Paypal Button" style="background-color: #808080" /></div></td>
</tr>
</table>


</body>
</html> As you can see, the content is vertically centered. How would I align it to the top. I have tried "Valign" within the <tr> & <td> and tried editing the css but with no luck. I also want the blue boxes to auto adjust to the height of the highest one. If that makes sense. Sorry, I'm still learning.

Shoot2Kill
Oct 24th, 2008, 06:51 PM
DONT USE TABLES FOR LAYOUT (http://hotdesign.com/seybold/)

blackwolf
Oct 24th, 2008, 06:58 PM
Ok, so how do i get the text and image to align to the top
?

BoldUlysses
Oct 24th, 2008, 08:12 PM
Try this:


.roundedcornr_top_559899 div, .roundedcornr_top_559899,
.roundedcornr_bottom_559899 div, .roundedcornr_bottom_559899 {
width: 100&#37;;
height:30px;
font-size: 1px;
}
.roundedcornr_content_559899 {
margin: 0 30px;
text-align:center;
height:250px;
}

Take the align="center" and all presentational markup (i.e. width="100%" color="9bd2f1", etc) out of your HTML file; it belongs with the CSS. And again, tables for layout are bad design and coding practice (http://phrogz.net/css/WhyTablesAreBadForLayout.html) for a multitude of reasons.