Help
I'm trying to do my college assignment but am stuck on a few bits and need some help please. I've uploaded what I've done so far to here
I've got a problem with the header no adjusting the way I'd like it to as shown in the attached image.
Also, I created an image rollover for the buy and sell tabs, but it's not working properly. I have an image with darker arrows for the sell link and the same for the buy link. So there are 4 images on total. The rollover only seems to change for the sell image and it's doing it when the mouse is over the buy button too. I don't know how to fix it if anyone can help?!
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" xml:lang="en" lang="en">
<head>
<title>Welcome to Mannerings Estate Agents - independent estate agent with offices throughout Surrey, Hampshire and Berkshire</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="images/buyhover.jpg";
}
function mouseOut()
{
document.getElementById("b1").src ="images/buy.jpg";
}
function mouseOver()
{
document.getElementById("b2").src ="images/sellhover.jpg";
}
function mouseOut()
{
document.getElementById("b2").src ="images/sell.jpg";
}
</script>
</head>
<body>
<div id="wrappera">
<div id="wrapperb">
<div id="header">
<div id="logoleft">
<img src="logos/logo1.gif" alt=""/>
</div>
<h1>Welcome to www.mannerings.co.uk</h1>
<div id="logoright">
<img src="logos/logo1.gif" alt=""/>
</div>
</div>
<div id="navbar">
<table>
<tr>
<td>
<a href="index.html">Home</a>
</td>
<td onmouseover="showmenu('properties')" onmouseout="hidemenu('properties')">
Properties<br />
<table class="menu" id="properties">
<tr><td class="menu"><a href="index.html">Detached</a></td></tr>
<tr><td class="menu"><a href="index.html">Semi-detached</a></td></tr>
<tr><td class="menu"><a href="index.html">Terraced</a></td></tr>
</table>
</td>
<td>
<a href="index.html">Search</a><br />
</td>
<td>
<a href="index.html">Feedback</a><br />
</td>
</tr>
</table>
</div>
<div id="main">
<h1>
When it comes to moving you deserve an estate agent that is going to work very hard on your behalf. Mannerings is committed
to making the moving process as stress free as possible.
</h1>
<p>
We are an independent company with offices throughout Surrey, Hampshire and Berkshire. Mannerings take pride in their reputation
for providing a personal and professional service with a unique approach to marketing property. It is a testament to our
performance and commitment to customer service that 75% of our business is derived from existing clients and their
recommendations.<br/><br/>
Whether you are looking to buy or rent, sell or even find a mortgage, our helpful staff will be happy to assist you whatever
your needs may be.
</p>
<div id="buyorsell">
<a href="index.html">
<img border="0" alt="" src="images/buy.jpg" id="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
<a href="index.html">
<img border="0" alt="" src="images/sell.jpg" id="b2" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</div>
</div>
<div id="footer">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body{
text-align:center;
font-family:arial;
background-image:url("backgrounds/bg1.jpg");
}
#wrappera {
margin:0 auto;
width: 85%;
text-align:left;
background:#a695a6;
}
.center{
margin:auto;
width:70%;
}
#wrapperb {
margin:0 4%;
padding:1% 0;
}
#header{
background:#382137;
height:100px;
}
#header img{
width:100px;
height:100px;
}
#header h1{
margin:3% 0 0 12%;
float:left;
color:#ffffff;
width:auto;
}
#logoleft{
float:left;
}
#logoright{
float:right;
}
#navbar{
clear:both;
margin:20px 0;
background:#382137;
height:20px;
font-size:12px;
padding:5px 25%;
color:#ffffff;
}
#navbar table{
border:0;
background-color:#382137;
width:480px;
height:20px;
text-align:center;
}
#navbar table table{
width:120px;
margin:0 40px;
text-align:left;
}
#navbar a{
color:#ffffff;
text-decoration:none;
font:bold
}
#navbar a:hover{
color:#a695a6;
}
#navbar td.menu{
background:#382137;
}
#navbar table.menu{
font-size:100%;
position:absolute;
visibility:hidden;
}
#main{
background:#867385;
padding:0 0 0.5% 0;
}
#main h1{
margin:0 40px;
padding:10px 0 0 0;
font-size:18px;
font-weight:strong;
}
#main p{
margin:0 40px;
padding:10px 0 0 0;
}
#buyorsell{
background:#ffffff;
margin:40px;
padding:5px 0;
text-align:center;
}
#buyorsell img{
border:0;
padding:15px 30px;
}
#footer{
clear:both;
background:#382137;
}
Any help would be much apreciated!
Thanks
Kerstey
Attached File(s)
-
header problem.JPG (235.24K)
Number of downloads: 1
