Ok, i know that the links wont work when i upload them, i'm just using this perticular file for testing cause it's faster than opening and saving to the FTP server. the site is up and for now i have just taken out the code for the onmouseover. all pics and pages that i want to do this to are under the "notable jobs" link at the main site. www.climatecontrolinc.net. I have also tried display:none, it halfway works in IE but in firefox it just flashes and the img is left about 100px more than it should be. is absolute placement different in firefox?
Arbitrator. ty for suggestions i will work on 1, 2 and 3 when done putting code back into ortonville
ortonville is up and rdy. right now i have
CODE
display:none
in for the div.transON class
here is the fully edited code i'm using now:
CODE
<html>
<body>
<head>
<title>Ortonville</title>
<link type="text/css" rel="stylesheet" href="http://climatecontrolinc.net/heading.css">
<link type="text/css" rel="stylesheet" href="http://climatecontrolinc.net/ortonvillestylesheet.css">
</head>
<div class="headingborder">
<div align=center>
<img class="logo1" src="http://climatecontrolinc.net/CCLogo.gif">
</div>
</div>
<div class="exitborder">
<div align=center>
<TABLE class="exittable">
<TR>
<TD>
<a class="exit1" href=http://climatecontrolinc.net/index.html>Home Page</a>
</TD>
<TD>
<a class="exit1" href=http://climatecontrolinc.net/aboutcc.html>About Us</a>
</TD>
<TD>
<a class="currat" href=http://climatecontrolinc.net/notable.html>Notable Jobs</a>
</TD>
<TD>
<a class="exit1" href=http://climatecontrolinc.net/crew.html>Meet the Crew</a>
</TD>
<TD>
<a class="exit1" href=http://climatecontrolinc.net/contact.html>Contact Us</a>
</TD>
</TR>
</TABLE>
</div>
</div>
<HR>
<p> · HVAC Controls at Ortonville Schools, by Climate Controls </p>
<TABLE class="w850">
<TR valign='top' align=center>
<TD class="header">Ortonville</TD>
</TR>
<TR valign='top' align=center>
<TD>
<TABLE class="w400">
<div id="posrel">
<img class="wh400" onmouseover="this.className='wh400omo'" onmouseout="this.className='wh400omo'" src="http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonmain.JPG">
</div>
<TR valign='top' align=center>
<TD class="wh200">
<a href=http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonahu1.JPG>
<img class="wh200"src="http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonahu1.JPG"><a/></TD>
</TD>
<TD class="wh200">
<a href=http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonrtu2.JPG>
<img class="wh200"src="http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonrtu2.JPG"><a/></TD>
</TD>
</TR>
<TR>
<TD class="firstdisc">AHU1</TD>
<TD class="firstdisc">RTU2</TD>
</TR>
<TR valign='top' align=center>
<TD class="wh200">
<a href=http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonunitvent.JPG>
<img class="wh200"src="http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonunitvent.JPG"><a/></TD>
</TD>
<TD class="wh200">
<a href=http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonvavs.JPG>
<img class="wh200"src="http://climatecontrolinc.net/htmljpegs/jobs/ortonville/ortonvavs.JPG"><a/></TD>
</TD>
</TR>
<TR>
<TD class="firstdisc">Unit Vents</TD>
<TD class="firstdisc">VAV's</TD>
</TR>
</TABLE>
<TD>
</TR>
</TABLE>
</body>
</html>
the ortonville.css:
CODE
p{
text-align:center;
font-weight:bold;
font-size:20px;
width:900px;
margin-left:auto;
margin-right:auto;
}
.logo2 {
width:200px;
padding:5px;
}
table{
border-collapse:collapse;
}
.w100 {
width:100%;
height:400px;
}
#posrel{
position: relative;
}
.w400{
width:400px;
}
.wh400{
position:absolute;
left:-1px;
top:-1px;
width:415px;
height:455px;
display:inline;
}
.wh400omo{
position:absolute;
left:-1px;
top:-1px;
width:415px;
height:455px;
display:none;
}
.wh200{
width:200px;
height:200px;
}
.firstdisc{
text-align:center;
font-weight:bold;
}
.header{
text-align:center;
font-weight:bold;
font-size:20px;
line-height:80px;
}
and the heading.css:
CODE
body {
text-align: center;
padding:0px;
margin:0px;
}
a img {border: none; }
.plaintxt{
font-size:15px;
font-weight:none;
text-align:left;
}
.headingborder {
width: 100%;
min-width: 900px;
width: expression(document.body.clientWidth < 900? "900px": "auto");
height:250px;
background-image:url(http://www.climatecontrolinc.net/gradimg.jpg);
background-repeat:repeat-x;
margin-left:auto;
margin-right:auto;
}
.logo1 {
display:inline;
width:300px;
margin-bottom:50px;
margin-top:20px;
}
.logo2 {
width:200px;
height:100px;
margin-top:130px;
}
.indiv{
display:inline;
}
.tac{
display:block;
width:200px;
height:240px;
}
a.tac:hover{
display:block;
width:200px;
height:240px;
background-image:url(http://www.climatecontrolinc.net/gradimgop.jpg);
background-repeat:repeat-x;
}
.novus{
display:block;
width:200px;
height:240px;
}
a.novus:hover{
display:block;
width:200px;
height:240px;
background-image:url(http://www.climatecontrolinc.net/gradimgop.jpg);
background-repeat:repeat-x;
}
.exitborder {
padding:0px;
width:900px;
margin-left:auto;
margin-right:auto;
}
.exit1{
display:block;
color:black;
padding:0px;
width:150px;
text-align:center;
text-decoration:none;
border:1px solid black;
background-color:#7FABFD;
}
a.exit1:hover{
display:block;
color:white;
padding:0px;
width:150px;
text-align:center;
text-decoration:none;
border:1px solid #7FABFD;
background-color:#0347C3;
}
.currat{
display:block;
color:white;
padding:0px;
width:150px;
text-align:center;
text-decoration:none;
border:1px solid #7FABFD;
background-color:#0347C3;
}
.w850{
width:900px;
margin-left:auto;
margin-right:auto;
}
#posrel{
position: relative;
}
This post has been edited by granaweep: 25 Jul, 2007 - 07:53 PM
| 