Forum Moderators: open
<!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" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>The html page</title>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles/heaphy.css">
</head>
<body>
<div id="logo"><img src="images/logo.png" width="998" height="92"></div>
<div id="topleft"><img src="images/topleft.jpg" width="189" height="23"></div>
<div id="home"><img src="images/home-tnav.gif" width="80" px height="23"px></div>
<div id="services"><img src="images/tools-tnav.gif" width="90" px height="23"px></div>
<div id="Tutorials"><img src="images/guides-tnav.gif" width="90" height="23"></div>
<div id="Templates"><img src="images/templates-tnav.gif" width="90" height="23"></div>
<div id="resources"><img src="images/resources-tnav.gif" width="90" height="23"></div>
<div id="onlinetools"><img src="images/tools-tnav.gif" width="90" height="23"></div>
<div id="contact"><img src="images/contact.gif" width="90" height="23"></div>
<div id="Topright"><img src="images/topright.jpg" width="189" height="23"></div>
</body>
</html>the style sheet.
body {
background-color: #bcbcbc;
border-style: none;
color: #070706;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.75em;
line-height: 1.2em;
margin: 0px;
padding: 0px;
text-align: justify
}
a:link {
color: #0b0bd3;
text-decoration: underline
}
a:hover {
color: #41d36f;
text-decoration: underline
}
h1 {
font-family: Times, "Times New Roman", serif;
font-size: 2em;
font-weight: bold;
text-align: left
}
h2 {
font-family: Times, "Times New Roman", serif;
font-size: 1.5em;
font-weight: bold;
text-align: left
}
h3 {
font-family: Times, "Times New Roman", serif;
font-size: 1.4em;
font-weight: bold;
text-align: left
}
h4 {
font-family: Times, "Times New Roman", serif;
font-size: 1.3em;
font-weight: bold;
text-align: left
}
h5 {
font-family: Times, "Times New Roman", serif;
font-size: 1.2em;
font-weight: bold;
text-align: left
}
#logo {
height: 92px;
left: +0px;
position: absolute;
top: +0px;
visibility: visible;
width: 998px;
z-index: 1
}
#topleft {
bottom: +115px;
height: 23px;
left: +0px;
position: absolute;
right: +189px;
top: 92px;
visibility: visible;
width: 189px;
z-index: 2
}
#home {
height: 23px;
left: +189px;
position: absolute;
top: 92px;
visibility: visible;
width: 80px;
z-index: 3
}
#services {
bottom: +115px;
height: 23px;
left: +269px;
position: absolute;
right: +359px;
top: 92px;
visibility: visible;
width: 90px;
z-index: 4
}
#Tutorials {
bottom: +115px;
height: 23px;
left: +359px;
position: absolute;
right: +449px;
top: 92px;
visibility: visible;
width: 90px;
z-index: 5
}
#Templates {
bottom: +115px;
height: 23px;
left: +449px;
position: absolute;
right: +539px;
top: 92px;
visibility: visible;
width: 90px;
z-index: 6
}
#resources {
height: 23px;
left: +539px;
position: absolute;
top: 92px;
visibility: visible;
width: 90px;
z-index: 7
}
#onlinetools {
height: 23px;
left: +629px;
position: absolute;
top: 92px;
visibility: visible;
width: 90px;
z-index: 8
}
#contact {
bottom: +115px;
height: 23px;
left: +719px;
position: absolute;
right: +809px;
top: 92px;
visibility: visible;
width: 90px;
z-index: 9
}
#Topright {
bottom: +115px;
height: 23px;
left: +809px;
position: absolute;
right: 998px;
top: 92px;
visibility: visible;
width: 189px;
z-index: 10
}
End should be: "92" />
>>>>> height="23"px
That px doesn't go there
alt on images doesn't break a layout.
Jes is right, CSS you should specify PX as the unit, but there is really no reason to have height and width attributes on the image elements themselves.
Within the CSS section, you are specifying "+" value units which is unnecessary - for example:
bottom: +115px;should read:
bottom: 115px;
