CSS Forum

**tonya** · 11:56 AM

Hi gang. I am really getting to grips with my CSS layout now - thanks to ladyNRed again for all her help. But I have another doosy that is really bugging me.

Here is the live site : http://www.newberryfarm.co.uk/index.asp

The website is far from the best I have produced and the customer has from the start not been the easiest I have worked with. At a later stage I may redo the graphics and colours but at the moment I want to get the technicalities of the site working.

They wanted a main central website area but graphics around the border. Daft or not I thought it out and thought ok I create a wrapper or page area which I center.

I then split this into 3 columns the center of which will hold the main website. I then split the main area pagecenter up the way I have been doing into header, 2 column main area footer etc.

Ok sounds easy in theory in prcatice this has caused major headaches and in Firefox I can get the pageright column to display the other 3 floating pics in ie they are completely lost and come up under the rest of the site????

Please help

Laborious I know but here is the code:
Template ~

Quote:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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>Untitled Document</title>

<meta name="keywords" content="stuff " />
<meta name="description" content="stuff. " />

<link href="../Styles/Newberry-CSS-2007.css" rel="stylesheet" type="text/css" />


<link href="../Styles/Newberry-green.css" rel="stylesheet" type="text/css" />


</head>

<body>
<div id="page">

<div id="pageLeft"></div>
<div id="pageCenter">

<div id="Header"></div>
<div id="Mid">
<div id="Column1">



</div>

<div id="Column2">
<h1 class="white-h">Header</h1>


<div class="main">
main website text to go here
</div>
</div>
<div class="brclear" /> </div>
<div id="footer"></div>
<div id="footerB">
<p>bottom website links go here !! </p>
</div>

</div>
<div id="pageRight"></div>
<div class="brclear"> <br />
<p>
whatever goes here should be still in page but under three columns ! </p>

</div>
</body>
</html>

CSS script

Quote:

/* CSS Document for Newberry */
body{ background-color:#416E30;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #324A04;
margin-top:2px; }

h1{ color:#F46404; line-height: 22px; font-size: 20px; padding-left:5px; font-weight:bold;
margin-top:1px; text-align:left;}
h2{ line-height: 16px; font-size: 12px; padding-left:5px; text-align:left;}

/* setup main page content details */
#page { position:relative;
width: 904px;
margin: 0 auto;
text-align:center;}

/* 3 columns in page area that contain two graphics bars and central main area*/
#pageLeft, #pageCenter, #pageRight {float:left; }

#pageLeft {
background-image:url(../Graphics/layout-green/layout_r1_c1.jpg);
background-position:top;
background-repeat:no-repeat;
width:93px;
height:348px;}

#pageCenter { width: 718px;
text-align:center;}

#pageRight {
background-image:url(../Graphics/layout-green/layout_r5_c3.png);
background-position:bottom;
background-repeat:no-repeat;
height:400px;
width:93px;
}

#Header {
height:129px;}

#Mid {
background-position:top;
background-repeat:repeat-y;
min-height:400px;
}

#Column1, #Column2
{ float:left;
margin-top: 8px;
margin-bottom:10px;
}
#Column1 {
width: 154px;
margin-left: 6px;
padding: 2px;
text-align:left;}

#Column2 { width:525px;
padding: 0px;
margin-left: 4px;
}

#Column2 h1{ font-size:22px;}

#Column2 h2{padding-left:8px; line-height: 1.4em; font-size: 16px; text-align:left;}
#Column2 p{
padding-left:8px;
padding-right: 6px;
border: 0px;
margin-bottom:2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #324A04; /*#12344B; */
font-size:12px;
font-weight: normal;
text-align:left; }
#Column2 li { text-align:left;
font-style:italic;
font-size:12px;
font-weight:bold;
margin-right:20px;}

#Column2 a{color:#F7931D; font-weight:bold;}
#Column2 a:visited{color:#F7931D}
#Column2 a:hover{ text-decoration:underline;}

.main { background-color:#FFFFFF; border: 1px solid #75AD0A; min-height:400px;
padding-top: 6px; padding-bottom: 10px; z-index:1; }
.main p{text-align:left; }
.main h2{ text-align:left;}

.main table { font-family: Verdana, Arial, Helvetica, sans-serif;
color: #324A04; font-size:11px; border-collapse:collapse; width:280px;}
.main td {padding:5px 8px 5px 8px ; margin:10px; border: #324A04 1px solid;}

.new { color:#FF0000; font-weight:bold;}

/* ---------- table + text columns -----*/

#MainColumn1, #MainColumn2 {
float:left;
margin-left: 5px;
margin-top: 8px;
margin-bottom:5px;
z-index:2;}
#MainColumn1 { width:175px;}
#MainColumn2 { width:315px;}

#MainColumn1B, #MainColumn2B {
float:left;
margin-left: 6px;
margin-top: 8px;
margin-bottom:5px;
z-index:2;}
#MainColumn1B { width:20px;}
#MainColumn2B { width:370px; text-align:right;}

/* -------- Footer information -------- */
#footer{ height:70px;}

/* --- links underneath - Footer B--- */
#footerB { height: 100px; width:720px}
#footerB p{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF;
font-size:80%; font-weight: normal; text-align:center; height:1.4em;
padding-top:5px; padding-bottom:2px; margin-top:0px;}
#footerB a{color: #FFFFFF; text-decoration:none;}
#footerB a:visited{color: #FFFFFF; text-decoration:none;}
#footerB a:hover{color: #F7931D; text-decoration:none;}

**tonya** · 03-31-2007, 11:55 AM

Perhaps I have made a huger error in the way I went about laying this out in which case i am happy to go right back to basics - yes its a customer & that means I want to get it right of course but I also want to learn from my mistakes.

**LadynRed** · 03-31-2007, 01:07 PM

Hi Tonya,

I made a couple of changes and got it working in FF and IE. In IE you were getting float drop. I narrowed the left and right columns to 92 px each and that stopped the drop. Since you have a few pixels of green on either side of the thumbnails, you can get away with it. IE is a pain with really tight layouts. I also set #pageRight to float: right instead of left so it sticks over to the right side.

#pageLeft, #pageCenter {
float: left;
}
#pageLeft {
background: url(layout_r1_c1.jpg) top no-repeat;
width:92px;
height:348px;}

#pageCenter {
width: 718px;
text-align:center;}

#pageRight {
float: right;
background:url(layout_r5_c3.png) top no-repeat;
height:400px;
width:92px;
}

In order to make that work you have to modify your HTML just a bit to this:
<div id="pageLeft"></div>
<div id="pageRight"></div>
<div id="pageCenter">

One other suggestion -- get that table out of your layout and just use an unordered list for your menu

You can specify the background colors for each list item using classes to get the same look.

**tonya** · 03-31-2007, 08:03 PM

Hello hello LadyNred - once again you are a serious marvel.

Yes I know more tables thrown in to save me headache time. I am slowly getting rid of the menu's in my menu's (as per my layout on the ski website job & my own site http://www.tonya.me.uk ) but in this case I was being lazy. I am also thinking of doing the same with the lists of items in the products areas although since they come to me in spreadsheets the tables are easy to lift & put in.

Anyway thanks for the fix & I will work on the code tommorrow. Best wishes