Hi Rick,
I have done a bit of work and changed it a bit so here is the code I am using for the body of the template.
<body >
<div id="background">
<div id="wrap">
<div id="topsection">
<div id="topbar">
<div id="pathway"></div>
<div id="date"></div>
</div>
<div id="logo"></div>
<div id="menubar">
<div id="navbar"></div>
</div>
<div id="bottombar">
<div id="searcharea">
<div id="search"></div>
</div>
<div id="advert1">
<div id="user1"></div>
</div>
<div id="line"></div>
<div id="advert2">
<div id="user2"></div>
</div>
</div>
</div>
<div id="main_area">
<div id="left_area"></div>
<div id="middle_area"></div>
</div>
<div id="footer">
<div id="left_footer">left footer</div>
<div id="right_footer">right footer</div>
</div>
</div>
</div>
</body>
Now begin from the bottombar div. On the attached images this begins half way down the monitor immediately under the green portion where my menu will go. I have divided the bottombar div up into 4 areas (this solved the problem I was having in the original post of it not lining up correctly with a single background image across the page.
The first area contains the background image of the monitor and an area defined by a div where I will put joomlas search feature. The next is a blank area for user1 the next is an image of a line and finally another blank area for user2. If you look at the two images you will see how FF and IE7 line up the box under the monitor in different areas. Can't figure this one out.
Next problem is the bottom of the page with the footer. It displays correctly in IE7 (which probably means its wrong) and not how I want it in FF. The problem is that in FF it is going over the grey border for the wrap.
This is all the css code.
body {
background-color: #000000;
margin: 0px;
padding:0px;
text-align: center;}
#wrap {
width:790px;
height:auto;
background-color:#ffffff;
border: 4px #666666 solid;
margin-left: auto;
margin-right: auto;
}
#topbar {
width:790px;
height:18px;
margin: 0px;
background-image: url(../images/topbar.gif);
background-repeat: no-repeat;
text-align: left;}
#pathway {
float:left;
width:650px;
height:18px;
}
#date {
float:right;
width:140px;
height:18px;
}
#logo {
width:790px;
height:138px;
margin: 0px;
background-image: url(../images/logo.gif) ;
background-repeat: no-repeat;}
#menubar {
width:790px;
height:19px;
margin: 0px;
background-image: url(../images/menubar.gif);
background-repeat: no-repeat;
text-align: left;}
#navbar{
clear:both;
float:right;
height:19px;
width:470px;
}
#bottombar {
width:790px;
height:164px;
margin: 0px;
}
#searcharea {
float:left;
margin-top:0px;
width:348px;
height:164px;
background-image: url(../images/searcharea.gif);
}
#advert1 {
float:left;
position:relative;
margin-top:0px;
width:206px;
height:164px;
background-color:#ffffff;
}
#line {
float:left;
position:relative;
width:30px;
height:164px;
background-image: url(../images/line.gif);}
#advert2 {
float:left;
position:relative;
width:206px;
height:164px;
background-color:#ffffff;
}
#search {
width:200px;
height:25px;
margin-top:130px;
background-color: #cccc00;
}
#user1 {
width:200px;
height:160px;
margin-top:0px;
}
#user2 {
width:200px;
height:160px;
margin-top:0px;
}
#left_area {
text-align:left;
width:275px;
margin: auto 0px;
float:left;
padding-top:20px;
}
#middle_area {
text-align: left;
margin-left:275px;
width:515px;
}
#footer{
clear:both;
width:790px;
height:50px;
}
#left_footer{
width:275px;
height:50px;
float:left;
padding-top:15px;
text-align: center;
background-color:#8db73b;
}
#right_footer{
width:515px;
height:50px;
float:right;
padding-top:15px;
text-align: center;
background-color:#005faa;
}
Thanks for the help it is much appreciated.
Laurie
File Attachment:File name:
images.zipFile size:28134 bytes
Post edited by: laurie, at: 2007/06/27 13:39
