I have made this webpage so far,
but I cant seem to fix the flying cells 'Navigation' and 'Affialate'.
Here is the full html/css:
<!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=ISO-8859-1"><title>TommieV's Blog</title>
<style type="text/css">
<!--
table#main {font-family: arial; border-style: none; border-width: 5px; width: 100%; background-image: none; float: none; text-align: left; vertical-align: top;}
table#main td {vertical-align:top;}
table#main tr.body td div {margin:1px;vertical-align:top;}
table#main tr.title th {border: 3px solid rgb(0, 204, 255); width: 25%; background-color: rgb(0, 255, 255); background-image: none; vertical-align: top; text-align: center;}
table#main tr.body td.side div.side {background-color: rgb(0,255,255);border: 3px solid rgb(0, 204, 255);background-image: none; text-align: center; vertical-align: bottom;}
table#main tr.body td.side {width:25%;}
table#main tr.body td.body {width:50%;}
table#main tr.body td.body div.body {text-align:left;background-color: rgb(0,255,255);border: 3px solid rgb(0, 204, 255);background-image: none;vertical-align: bottom;}
span.tommiev {font-size:18pt; font-weight: 800;}
span.date {font-size:8pt;}
span.title {font-weight: 800;}
-->
</style></head>
<body>
<div id="wrapper">
<table id="main" border="5" cellpadding="0" cellspacing="0" rules="none">
<tbody>
<tr class="body">
<td class="side">
<div class="side">
<span class="title">Navigation</span>
</div>
</td>
<td class="side">
<div class="side">
<span class="tommiev">TommieV's Blog</span><br>
</div>
</td>
<td class="side">
<div class="side">
<span class="title">Affialates</span>
</div>
</td>
</tr>
<tr class="body">
<td class="side">
<div class="side">
Link1<br>
Link2<br>
Link3<br>
Link4<br>
Link5<br>
Link6<br>
Link7<br>
Link8<br>
More<br>
</div>
</td>
<td class="body">
<div class='body'>
<span class="date">[date]</span><br>
<span class="title">Title</span><br>
Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br>
</div>
</td>
<td class="side">
<div class="side">
<!-- w --><a class="postlink" href="http://www.kahrn.net">www.kahrn.net</a><!-- w --><br>
wm161.net<br>
quiffle.net<br>
<!-- w --><a class="postlink" href="http://www.gamemaker.nl">www.gamemaker.nl</a><!-- w --><br>
forums.gamemaker.nl<br>
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!-- <!-- w --><a class="postlink" href="http://www.ultimatepronoun.com">www.ultimatepronoun.com</a><!-- w --> -->
</div>
</body></html>
See the bold part in the css part.
(I dont understand why it wont work
)
Any help would be greatly appriciated,
TommieV
It’s because it’s a DIV. The only way vertical-align works is if you have display:table (or if the element is already a table-element, such as TABLE, TR, TD, TH, and so on).
but I cant seem to fix the flying cells 'Navigation' and 'Affialate'.
Here is the full html/css:
<!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=ISO-8859-1"><title>TommieV's Blog</title>
<style type="text/css">
<!--
table#main {font-family: arial; border-style: none; border-width: 5px; width: 100%; background-image: none; float: none; text-align: left; vertical-align: top;}
table#main td {vertical-align:top;}
table#main tr.body td div {margin:1px;vertical-align:top;}
table#main tr.title th {border: 3px solid rgb(0, 204, 255); width: 25%; background-color: rgb(0, 255, 255); background-image: none; vertical-align: top; text-align: center;}
table#main tr.body td.side div.side {background-color: rgb(0,255,255);border: 3px solid rgb(0, 204, 255);background-image: none; text-align: center; vertical-align: bottom;}
table#main tr.body td.side {width:25%;}
table#main tr.body td.body {width:50%;}
table#main tr.body td.body div.body {text-align:left;background-color: rgb(0,255,255);border: 3px solid rgb(0, 204, 255);background-image: none;vertical-align: bottom;}
span.tommiev {font-size:18pt; font-weight: 800;}
span.date {font-size:8pt;}
span.title {font-weight: 800;}
-->
</style></head>
<body>
<div id="wrapper">
<table id="main" border="5" cellpadding="0" cellspacing="0" rules="none">
<tbody>
<tr class="body">
<td class="side">
<div class="side">
<span class="title">Navigation</span>
</div>
</td>
<td class="side">
<div class="side">
<span class="tommiev">TommieV's Blog</span><br>
</div>
</td>
<td class="side">
<div class="side">
<span class="title">Affialates</span>
</div>
</td>
</tr>
<tr class="body">
<td class="side">
<div class="side">
Link1<br>
Link2<br>
Link3<br>
Link4<br>
Link5<br>
Link6<br>
Link7<br>
Link8<br>
More<br>
</div>
</td>
<td class="body">
<div class='body'>
<span class="date">[date]</span><br>
<span class="title">Title</span><br>
Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br> Text<br>
</div>
</td>
<td class="side">
<div class="side">
<!-- w --><a class="postlink" href="http://www.kahrn.net">www.kahrn.net</a><!-- w --><br>
wm161.net<br>
quiffle.net<br>
<!-- w --><a class="postlink" href="http://www.gamemaker.nl">www.gamemaker.nl</a><!-- w --><br>
forums.gamemaker.nl<br>
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!-- <!-- w --><a class="postlink" href="http://www.ultimatepronoun.com">www.ultimatepronoun.com</a><!-- w --> -->
</div>
</body></html>
See the bold part in the css part.
(I dont understand why it wont work
)Any help would be greatly appriciated,
TommieV
It’s because it’s a DIV. The only way vertical-align works is if you have display:table (or if the element is already a table-element, such as TABLE, TR, TD, TH, and so on).