CSS & HTML problems

hobbit666 · #1 (**permalink**) Jan 29th, 2008, 21:02

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">&nbsp;</td>
<td width="7" background="images/Home_03.gif">&nbsp;</td>
<td width="71" background="images/Home_04.gif">&nbsp;</td>
<td width="651" background="images/Home_05.gif">&nbsp;</td>
</tr>
<tr>
<td height="113" background="images/Home_06.gif">&nbsp;</td>
<td colspan="3" background="images/Home_07.gif">&nbsp;</td>
<td background="images/Home_10.gif">&nbsp;</td>
</tr>
<tr>
<td height="45" background="images/Home_11.gif">&nbsp;</td>
<td background="images/Home_12.gif">&nbsp;</td>
<td background="images/Home_13.gif">&nbsp;</td>
<td background="images/Home_14.gif">&nbsp;</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">&nbsp;</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">&nbsp;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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&eacute;, 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">&nbsp;</td>
<td background="images/Home_26.gif">&nbsp;</td>
<td colspan="2" align="right" valign="top" background="images/Home_27.gif"><p>Pentre Bach Holiday Cottages. Llwyngwrill, Near Dolgellau, Wales. LL37 2JU. &nbsp; &nbsp;<br />
Tel: 01341 250294 &nbsp; &nbsp; &nbsp; Fax: 01341 250885 &nbsp; &nbsp; &nbsp; E-mail: <a href="<A href="mailto://info@pentrebach.com">info@pentrebach.com</a">mailto://info@pentrebach.com">info@pentrebach.com</a> &nbsp; &nbsp;</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

)

dab42pat · #2 (**permalink**) Jan 29th, 2008, 21:15

For the first part try this

ul#navlist
{
display: block;
text-align: center;
list-style-type: none;
padding-right:10px;
padding-left:10px;
}

Hope it helps

Pat

dab42pat · #3 (**permalink**) Jan 29th, 2008, 21:24

add width: 170px; to ul#navlist
that should sort the width of the activities link

Pat

hobbit666 · #4 (**permalink**) Jan 29th, 2008, 21:33

Thanks, had enough tonight need sleep (before the baby get up)

Will try and comment tomorrow when i try it. Thanks for the quick reply

hobbit666 · #5 (**permalink**) Jan 30th, 2008, 13:39

just seems to have moved them to the right

dab42pat · #6 (**permalink**) Jan 30th, 2008, 15:37

ok try just, padding-left:15px;

hobbit666 · #7 (**permalink**) Jan 30th, 2008, 15:49

Works in FF but nor ie. What a supprise!

Another question on the comments page is there a way of disabling the scroll bar on the main site and add one to the context (Div called text in my case) part of the site.

dab42pat · #8 (**permalink**) Jan 30th, 2008, 16:18

you could try something like this on that page.

HTML: Select all

<div id="text" style="overflow: auto; width: 200px; height: 200px">

insert that where your text div starts, you will have to adjust the width and height to suit.

hobbit666 · #9 (**permalink**) Feb 11th, 2008, 10:23

i managed to solve the issue by finding one of those tutorial websites, finding a menu that had what i needed, i.e. box buttons in the center of a div.

Copied the code and moddified as needed.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Some HTML/CSS problems	mikka23	Web Page Design	3	Mar 9th, 2008 14:44
HTML repeating problems??	tails007	Web Page Design	8	Jan 18th, 2008 13:12
html menu problems	chobo	Web Page Design	14	Mar 2nd, 2004 07:47

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS & HTML problems