I've been tasked with creating a website for a friend and i'm having problems with it.

 

dev.hobbit-hosting.com

 

this is the home page of the website and i'm having a few problems with the left div that houses the menu.

As you can see the first problem is the DIV doesn't align with the footer (Page height changes a bit on each page (once i've done them))

 

Second one with the menu it should be a green button with a white boarder around it but for some reason the green background pocks out on the right of the button.

 

 

Apart from that i'm pleased with my progress since this is the first time i've tried moving from tables to CSS for layouts.

 

Here's the code.

CSS

 

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#wrapper { 
margin: 0 auto;
width: 980px;

}

#header {
background-image: url(images/css/background.gif);
width: 980px;
height: 144px;
}

#headertitle {
background-image:url(images/css/background-02.gif);
width: 980px;
height: 44px;
float:left;
}

#left {
background-image:url(images/css/background-03.gif);
background-repeat: repeat;
width: 235px;
height: auto;
float: left;
text-align: center;
font-size: 16px;
font-weight: bold;
}

#leftcontext {
padding-left: 15px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 15px;
width: 470px;
background-color:#999999;
float: left;
}

#rightconext {
width: 250px;
background-color: #00FF00;
float: right;
}

#footer {
clear: both;
background-image: url(images/css/background-05.gif);
width: 980px;
height:48px;
}

#navlist 
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;

}

#navlist li
{
display: block;
margin: 0;
padding: 0;
border: solid .25em #FFFFFF;
margin-top: 0.3em;
margin-bottom: .7em;
}

#navlist li a
{
text-align: center;
display: block;
width: 100%;
padding: .3em;
color: #FFFFFF;
text-decoration: none;
background: #3d736b;
}

ul {
margin-left: 15px;
}

img {
padding-top: 10px;
padding-bottom: 5px;
}

#logo {
margin-left: 25px;
}

 

HTML

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pentre Bach - Home Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="wrapper">
<div id="header"><img id="logo" src="images/logo2.gif" alt="logo" width="290" height="113" /></div>

<div id="headertitle"></div>

<div id="left">
<ul id="navlist">
<li><a href="index.php">HOME</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>


<div id="leftcontext">
 <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> </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> </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.</p>
 <p> </p>
<ul>
<li>Where mountains meet the sea in beautiful Snowdonia</li>
<li>Can accommodate from two up to thirty people</li>
<li>Wide range of outdoor activities on the doorstep</li>
<li>Open fires in three properties </li>
<li>Action packed week or romantic short break</li>
<li>Relax and enjoy seclusion without isolation </li>
<li>Nearest traffic lights 40miles away but we are only 2-3 hours from Birmingham and Manchester.</li>
</ul>
</div>

<div id="rightconext">
<img src="images/pb_PICTURE.jpg" alt="pbhouse" width="250" height="178" />
<img src="images/outsidepb.jpg" alt="outsidepb" />
<img src="images/villagefromhill.jpg" alt="view from hill" />
 </div>

<div id="footer"></div>


<!-- End Wrapper and body -->
</div></body>
</html>

this is the home page of the website and i'm having a few problems with the left div that houses the menu.

As you can see the first problem is the DIV doesn't align with the footer (Page height changes a bit on each page (once i've done them))

 

faux columns - run a repeating background image down the left that fakes the vertical lines.

 

Second one with the menu it should be a green button with a white boarder around it but for some reason the green background pocks out on the right of the button.

Apart from that i'm pleased with my progress since this is the first time i've tried moving from tables to CSS for layouts.

 

How about if you get rid of 'navlist li' and use 'navlist li a' to make the border as well? Something like:

 

#navlist li a
{
text-align: center;
display: block;
width: 100%;
padding: .3em;
color: #FFFFFF;
text-decoration: none;
background: #3d736b;
border: solid .25em #FFFFFF;
margin-top: 0.7em;
}

You know. It's just fine with a floating layout, but you could be using like border: 3px solid hvite; to simplify things. I like to do my layout all in pixels, but I always defines text in em.

 

Take a look at my site: 2Dropsdesign.com (In developement)

 

The main layout won't break even if you increse the text-size 10 times. I don't want to show-of any thing, but I just wanted to to know you don't have to use ems all around to keep your site relativly fluid. I find it very much easier to understand how big a pixel is. Maybe it's different for you.

Thanks for the tips will have a play later and let you know

I'm still having trouble with that left div, i tried putting a image as a reapeat background but couldn't get it to align correctly with the left div.

 

I'm going to create the rest of the site then come back to it.

but couldn't get it to align correctly with the left div.

 

Make it align correctly then. You may edit the picture 'til it aligns. That's is your only option. (Ok, maybe there's more hacks out there, but this will fix it for sure.)

Make it align correctly then. You may edit the picture 'til it aligns. That's is your only option. (Ok, maybe there's more hacks out there, but this will fix it for sure.)

 

That's what i thought put due to the fact each page is a diferent size i think i'll just fill the DIV with <p> 's for now.