PDA

View Full Version : Table-less layout


Coober
07-12-2005, 11:33 AM
I am trying to put a site together using only css, no tables.

I have used the template supplied by gmcrone and made some amendments, but I am having some difficulties with the layout.

The following is a link to a jpg of the layout I am trying to achieve:

http://www.firstsite.co.za/ghJpg.jpg ('http://www.firstsite.co.za/ghJpg.jpg')
In DW, the 'masthead' div seems to overlap the 'maincontent' div. This is shown with the red outline around the div when I hover over it. I have stripped all positioning from both the masthead and maincontent divs, but to no avail. This seems to account for the navbar graphic having a gap between itself and the graphic above, when previewed in a browser. As per the layout in the link, I would like the graphic below the navbar to extend down to the bottom of the page. I tried with a 'min-height' setting, but this does not work. How can I put the picture of the house, with the quote alongside?
Below is the css, followed by the HTML:

#pagewrapper{
margin: 0 0 0 0;
width: 760px;
border-left: 1px solid #4C6E5D;
border-top: 1px solid #4C6E5D;
border-right: 1px solid #4C6E5D;
background: #FCFEDE;
}
#masthead {
left: 0;
top: 0;
width: 760;
height:176px;
}
#menubar {
background-image:url(navContentTile.gif);
background-repeat: repeat-y;
}
#mainbox {
left: 0;
top: 176px;
width: 760px;
font-size: 100%;
text-decoration: none;
list-style: none;
}
#sidebar {
float: left;
width: 110px;
}

#lowerbar {
background-image:url(navLowerTile.gif);
background-repeat: repeat-y;
min-height: 150px;
}

#maincontent {
margin: 0 0 0 120px;
}
#maincontent p {
margin: 0 0 0 0;
}
#footer {
padding: 16px 0 0 18px;
font-size: 8pt;
background-color: #FEFFF2;
border: 1px solid #000000;
}
#footer p {
margin: 0 0 3px 0;
}
h1, h2, h3 {
margin: 0px;
font-size: 1.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
text-align: left;
line-height: normal;
font-weight: normal;
}
h2, h3 {
margin: 0 0 0 0;
font-size: 1.6em;
color: #C2B992;
}
h3 {
font-size: 1.4em;
}
a:link {
color: #FCFEDE;
text-decoration: none;
}
a:visited {
color: #F1FB75;
text-decoration: none;

}
a:hover {
color: #4C6E5D;
background: #FCFEDE;
text-decoration: none;

}

.quoteText {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-style: italic;
text-align: center;
color: #415048;
vertical-align: middle;
}
.bodyText {
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
color: #576C62;
text-align: left;
}



[CODE]
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="site.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#FCFEDE">
<table align="center"> <!-- Table for centering of table in browser -->
<tr>
<td>
<div id="pagewrapper">
<div id="masthead">
topBanner.giflogoBanner.gifpicBanner.jpg
</div>
<!-- End of masthead div -->


<div id="mainbox">
<div id="sidebar">
<div id="menubar">


</p>

</p>


The Cottage (#)</p>


The Place (#)</p>


The Life (#)</p>


The Rates (#)</p>





Home (#)</p>


Contact Us (#)</p>


</div> <!-- End of menubar div -->
<div id="lowerbar">

</p>
</div> <!-- End of lowerbar div -->
</div> <!-- End of sidebar div -->


<div id="maincontent">
<p class="quoteText">&ldquo;A quiet resting place at the foot of the picturesque French Hoek and Drakenstein Mountains, in the most charming part of French Hoek, with its bracing and healthful atmosphere.&rdquo; Mr and Mrs van Hoogstraaten (1911)</p>
<p class="bodyText">Until the end of the 19th century Franschhoek was just another little village in the Cape Winelands, serving a local farming community. When phylloxera (fungus) destroyed the vineyards, Cecil John Rhodes replaced them with fruit farms and a railway line was built to connect Franschhoek to the main line in order to take the fruit to the Cape Town market. And so, in that pre-motor age, Franschhoek became in a small way, a holiday destination for Capetonians.</p>
<p class="bodyText">Built in the Cape Victorian style in 1881, the Garden House is one of the oldest houses in Franschhoek and is listed as a building of historic interest. In 1911 The Garden House was actually used as a bed and breakfast; a Mr & Mrs van Hoogstraten took lodgers in for the princely sum of 6 shillings (30p) per day or &pound;6 per month.</p>
<p class="bodyText">The Garden House is in an elevated position with breathtaking views but is just an easy ten minute walk away from the buzz, the restaurants and shops in the village. It was completely renovated in 2001 by Annette and Barry Phillips who left London to live in Franschhoek.</p>
<p class="bodyText">The original plan was for three guest rooms at the Garden House but it didn&rsquo;t work out that way and so there is just the one large guest room in the separate Cottage. A guest bedroom in the main house is made available if two couples or a party of three are travelling together. Annette and Barry have found they like it better this way, and invite you to be their private guests at the Garden House in Franschhoek. Join them on the stoep (veranda) to enjoy a sundowner and the evening views.</p>


</p>
</div>
<!-- End of maincontent div -->
</div>
<!-- End of mainbox div -->
<div id="footer">Copywright info goes here!</div>
</div> </td>
</tr>
</table>
</body>
</html>
[/CPDE]

Any ideas as to where I'm going wrong?

Thanks,

Coober

gmcrone
07-12-2005, 10:04 PM
1. Get rid of the table in your HTML (redundant)
2. in your CSS file #mainbox width should be 550 not 760
you actually don't need to set a width here anyway.

Mike...

Coober
07-13-2005, 10:36 AM
I have implemented both changes, but this does not solve the problems. A gap still appears on the left of the page, between the navbar (with the green background) and lighter green section above.
In DW, when I hover above the edge of the two divs (masthead and mainbox) it shows that the masthead div ends below the mainbox div (overlaps). This overlap is exactly the same size as the gap that appears above the navbar and I assume is the cause, but I cannot get rid of this overlap.

Get rid of the table in your HTML (redundant)

I read somewhere that this was the best way to horizonally centre a table in the browser.

Many thanks,

Coober