I'm having major issues trying to get a sites menu and links to look right.
dev.c4media.co.uk
what i want is the menu to be between the two green lines i.e. center of the table td.
OK i know tables are bad etc but i'm reading up on
CSS but this website needs to be up by the weekend.
How do i get it working? I have no idea where i'm going wrong. Also i tried a few things with dreamwaever and no matter what it looks like in there it looks nothing like it when i upload it tp the web.
Here's the code.
- HTML: Select all
<!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>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF"><div align="center">
<table width="950" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="22" width="17"><img src="images/Home_01.gif" alt="01" /></td>
<td background="images/Home_02.gif"> </td>
<td width="7" background="images/Home_03.gif"> </td>
<td width="71" background="images/Home_04.gif"> </td>
<td width="651" background="images/Home_05.gif"> </td>
</tr>
<tr>
<td height="113" background="images/Home_06.gif"> </td>
<td colspan="3" background="images/Home_07.gif"> </td>
<td background="images/Home_10.gif"> </td>
</tr>
<tr>
<td height="45" background="images/Home_11.gif"> </td>
<td background="images/Home_12.gif"> </td>
<td background="images/Home_13.gif"> </td>
<td background="images/Home_14.gif"> </td>
<td background="images/Home_15.gif" class="title"><div align="right">HOME</div></td>
</tr>
<tr>
<td height="442" background="images/Home_16.gif"> </td>
<td valign="top" background="images/Home_17.gif">
<div id="container">
<ul id="navlist">
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="thecottages.html">THE COTTAGES</a></li>
<li><a href="thearea.html">THE AREA</a></li>
<li><a href="booking.html">BOOKING</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="comments.html">COMMENTS</a></li>
<li><a href="links.html">LINKS</a></li>
<li><a href="contacts.html">CONTACT US</a></li>
</ul>
</div>
</td>
<td background="images/Home_18.gif"> </td>
<td colspan="2" align="left" valign="top"><div id="text"><p>Pentre Bach House and its three cottages are set in three acres of land overlooking Cardigan Bay, with dramatic Cader Idris and its fellow mountains outside the back door.</p>
<p>This is a great place for spending the days inhaling lungfuls of briny air on the beach, climbing hills and playing games in the great outdoors, followed by evenings around the supper table and in front of the fire with books and films. There's a large field for games, a willow den for the children and a table tennis room. </p>
<p>The nearest beach, ten minutes' walk away, is pebbly, and there are two excellent sandy beaches within a 15 minutes drive in either direction.
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> <p><br />
The main house (Pentre Bach house) was built in 1868 so comes with a sense of history. <br />
It is elegantly furnished inside, while the emphasis in the cottages is on cosiness and comfort.
<p>Within Snowdonia's dramatic scenery, on the edge of the friendly village of Llwyngwril (600 yards), on the A493 between Dolgellau and Tywyn. Four hours from London. Llwyngwril has a shop, post office, café, pub and railway station.<br />
</p></p></p></div></td>
</tr>
<tr>
<td><img src="images/Home_20.gif" /></td>
<td><img src="images/Home_21.gif" /></td>
<td><img src="images/Home_22.gif" /></td>
<td colspan="2"><img src="images/Home_23.gif" /></td>
</tr>
<tr>
<td height="41" background="images/Home_24.gif"></td>
<td background="images/Home_25.gif"> </td>
<td background="images/Home_26.gif"> </td>
<td colspan="2" align="right" valign="top" background="images/Home_27.gif"><p>Pentre Bach Holiday Cottages. Llwyngwrill, Near Dolgellau, Wales. LL37 2JU. <br />
Tel: 01341 250294 Fax: 01341 250885 E-mail: <a href="<A href="mailto://info@pentrebach.com">info@pentrebach.com</a">mailto://info@pentrebach.com">info@pentrebach.com</a> </p>
</td>
</tr>
</table>
</div>
</body>
</html>
and the
css
- HTML: Select all
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
}
#container {
width: 204px;
}
ul#navlist
{
display: block;
text-align: center;
list-style-type: none;
position: relative;
}
#navlist li {
list-style-type: none;
background-color: #228822;
color: #FFFFFF;
border: .2em solid #FFFFFF;
font-weight: 600;
text-align: center;
padding: .3em;
margin-bottom: 0.59em;
left: auto;
}
#navlist li a {
list-style-type: none;
background-color: #228822;
color: #FFFFFF;
text-decoration: none;
font-weight: 600;
text-align: center;
padding: .3em;
margin-bottom: 0.59em;
left: auto;
}
#text {
padding-left: 15px;
padding-right: 15px;
}
Also on this page
http://dev.c4media.co.uk/thearea.html the activites link should be the same size as the menu on the left.
Hope someone can get me out of a jam while i learn
CSS again (been over 6months since i toched a website
)