|
Posted by Jeff on 06/18/06 18:25
Hey
I'm creating a web page. I created the web page using a table ( the left
column is for a menu, right column is for ad, the centre column is for site
content)... The left and right column's width is set to be 200px... Before I
added the <ul> block into the web page this really worked -> the left and
right column's width was 200px when I tested it.. so far everything works...
But my problem starts after I added the <ul> block. Now the left and right
column take up almost the entire width of the table, the centre column
becomes a little block in the centre of the table.
I want to use this <ul> block and the width of left/right column to be
200px...
What am I doing wrong here?
Here is my code (the files are separated with "***************"):
index.php
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link href='css/general.css' rel='stylesheet' type='text/css' />
<link href='css/menu.css' rel='stylesheet' type='text/css' />
</head>
<body>
<table width="100%" border="1">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">
<ul id="top_menu">
<li><a href="">TEST 1</a></li>
<li class="first"><a href="">TEST 2</a></li>
<li><a href="">TEST 3</a></li>
<li><a href="">TEST 4</a></li>
<li><a href="">TEST 5</a></li>
<li><a href="">TEST 6</a></li>
<li><a href="">TEST 7</a></li>
<li><a href="">TEST 8</a></li>
</ul>
</td>
</tr>
<tr>
<td width="200">
<table width="100%" border="1">
<tr>
<td>TEST A</td>
</tr>
<tr>
<td>TEST B</td>
</tr>
<tr>
<td>TEST C</td>
</tr>
</table>
</td>
<td>A</td>
<td width="200">B</td>
</tr>
<tr>
<td colspan="3">C</td>
</tr>
</table>
</body>
</html>
***************
general.css
body {
background-color:#99CCCC;
}
a:link {
text-decoration:none;
}
***************
menu.css
ul#top_menu, ul#top_menu li {
list-style:none;
float:left;
margin:0;
padding:0;
}
/* ul#top_menu {
background-color:#00FFCC;
}*/
ul#top_menu li a {
border-color:#0099FF;
list-style:none;
border-width:1px 1px 1px 0;
border-style:solid;
display:block;
padding:3px;
}
ul#top_menu li.first a {
border-color:#0099FF;
background-color:#CCCC00;
list-style:none;
border-width:1px 1px 1px 0;
border-style:solid;
display:block;
padding:3px;
}
[Back to original message]
|