holy rollovers batman!

lmorales

05-30-2012, 03:36 PM

I have a test site up at cortesenterprises.com/test/index.html

The goal is to have an image pop up in the middle of the page upon rolling over the logos, something happened where the left side works ( although the images shift a bit, im not sure why) but the right side works all funky or not at all..

I have validated it in dreamweaver but none of the errors Im getting make sense..
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>Cortes Entertainment Companies</title>
<link rel="icon"
type="image/ico"
href="images/favicon.ico"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23435708-4']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

<body>
<div id="container">

<img src="images/cortes.jpg" width="1000px" id="panel" />
<div id="content">
<div class="column1">

<script language="Javascript"></script>
<ul class="work">
<li> <a href="http://www.overdrivedirect.net" target="_blank" border="0" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)">
<img src="images/overdrive.jpg" width="200px"/></a>
</li>
<div id="Style"><img src="images/overhov.png" /></div>

<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style4',1)" onmouseout="ShowPicture('Style4',0)">
<img src="images/honeys.jpg" width="230px" /></a>

<div id="Style4"><img src="images/honeyhov.png" /></div>
</li>
<li> <a href="http://www.dtentertainmentdistrict.com" target="_blank" border="0" onmouseover="ShowPicture('Style5',1)" onmouseout="ShowPicture('Style5',0)">
<img src="images/district.jpg" width="200px"/></a>

<div id="Style5"><img src="" /></div>
</li>
<li> <a href="http://www.blackumbrellacocktails.com" target="_blank" border="0" onmouseover="ShowPicture('Style6',1)" onmouseout="ShowPicture('Style6',0)">
<img src="images/black.jpg" width="200px"/></a>

<div id="Style6"><img src="images/blackhov.png" /></div>
</li>
<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style7',1)" onmouseout="ShowPicture('Style7',0)">
<img src="images/brick.jpg" width="200px"/></a>

<div id="Style7"><img src="images/brickhov.png" /></div>
</li>
<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style8',1)" onmouseout="ShowPicture('Style8',0)">
<img src="images/trend.jpg" width="200px"/></a>

<div id="Style8"><img src="images/trendhov.png" /></div>
</li>

</ul>
</div>

<div class="column3">
<script language="Javascript"></script>
<ul class="work">
<li> <a href="http://www.62music.com" target="_blank" border="0" onmouseover="ShowPicture('Style2',1)" onmouseout="ShowPicture('Style2',0)">
<img src="images/62.jpg" width="250px"/></a>
</li>
<div id="Style2"><img src="images/62hov.png" /></div>

<li> <a href="http://www.terrace390.com" target="_blank" border="0" onmouseover="ShowPicture('Style3',1)" onmouseout="ShowPicture('Style3',0)">
<img src="images/terrace.jpg" width="250px"/></a>

<div id="Style3"><img src="images/terracehov.png" /></div>
</li>
<li> <a href="http://www.americanmudder.com" target="_blank" border="0" onmouseover="ShowPicture('Style9',1)" onmouseout="ShowPicture('Style9',0)">
<img src="images/mudder.jpg" width="200px"/></a>
<div id="Style9"><img src="images/mudderhov.png" /></div>
</li>
<li><a href="http://www.mooseheadmedia.com" target="_blank" border="0" onmouseover="ShowPicture('Style10',1)" onmouseout="ShowPicture('Style10',0)"><img src="images/moose.jpg" width="200px" /></a>
<div id="Style10"><img src="" /></div>
</li>
<li> <a href="#" target="_blank" border="0" onmouseover="ShowPicture('Style11',1)" onmouseout="ShowPicture('Style11',0)">
<img src="images/pub.jpg" /></a>
</a>
<div id="Style11"><img src="" /></div>
</li>

</ul>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer"><span id="footer_text"><img src="images/footer_logo.png" />Cortes Entertainment and Hospitality Group
©<a href="http://www.cortesenterprises.com"> Cortes Enterprises</a> 2011 • World Headquarters • Orlando, FL•• 1.877.888.9001 </span></div>
</div>
</body>
</html>

CSS
body {
margin:0px; padding:0px;
background-color:none;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}

#container {
background:none;
min-height:950px;
width:1000px;
position:relative;
margin-left: auto;
margin-right: auto;

}

/*
Logo / Menu / Panel Positioning
*/

#logo { position:absolute; top:0px; left:51px; }

#panel { position:absolute; top:0px; magin-left:auto;margin-right:auto; }

ul#menu {
margin:0px; padding:0px;
position:absolute; top:138px; left:0px;
}
ul#right_menu {
margin:0px;
padding:0px;
position:absolute;
top:138px;
right:110px;
width: 80px;
border:none;
}
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:9px;
text-transform:uppercase;
display:inline;
}
ul#menu li a, ul#right_menu li a {
text-decoration:none;
color:#000;
}
ul#menu li a:hover, ul#right_menu li a:hover {
text-decoration:none;
color:#FFF;
}

/*
Content
*/

#content {
padding-top:150px;
padding-left:0px;
margin-left:auto;
margin-right:auto;
width:1000px;
color:#666;
font-size:13px;
line-height:20px;
}
.column1 { float:left; width:250px; left:0;}

.column3 { float:right; width:270px; }

#content h2 {
font-family: Arial, Helvetica, sans-serif;
color:#999;
margin:0px 0px 20px 0px;
font-weight:normal;
}
#styledivs{width:200px;
margin-right:auto;
margin-left:auto;}

#Style {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style1 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style2 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style3 {
position:absolute;
visibility:hidden;
border:none;
padding:0px;
margin-right:500px;
top: 780px;
width:1000px;

}
#Style4 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style5 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}
#Style6 {
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style7{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style8{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style9{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style10{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

#Style11{
position:absolute;
visibility:hidden;
border:none;
padding:0px; margin-right: 500px;
top: 200px;
width: 1000px;
}

ul.work {
margin:0px; padding:0px;
}
ul.work li {
list-style:none;
margin:0px; padding:0px;
clear:both;
}
ul.work li a {
color:#FFF;
display:block;
padding:5px 0px 5px 10px;
text-decoration:none;
font-size:10px;
}
ul.work li a img {
align:center;
margin-right:20px;
margin-bottom:20px;
}
ul.work li a h4 {
color:#666;
margin:0px;
font-weight:normal;
font-size:13px;
}
ul.work li a:hover, ul.work li a:hover h4 {
color:#ffffff;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}

/*
Footer
*/
#footer {
padding:10px 50px 0px 50px;
width:899px;

color:#000;
font-size:9px;
line-height:24px;
margin-left: auto;
margin-right: auto;
}
#footer img {
margin-left: auto;
margin-right: auto;

}
#footer span {
display:block;
width:899px;
margin-left: auto;
margin-right: auto;
}

#footer span_1 {
display:block;
margin-left: auto;
margin-right: auto;
width:300px;
}
#footer a {
color:#333;
text-decoration:none;
}
#footer a:hover { color:#F00; }

/*
General Styles
*/

a img { border:0px }

chrisf

05-30-2012, 05:25 PM

It does not look like the last 4 or so images have links.

And what do you mean "works all funky"?

lmorales

05-30-2012, 05:54 PM

I was able to fix a few issues, and yes some are missing images, because I havent recieved them yet. Whats wrong is that the right column shows the rollovers on the right, rather than dead center, and I have no clueeee why. My validation is also giving me weird errors like " The tag: "a" doesn't have an attribute: "border" in currently active versions."

The tag:"div" is not allowed within: "ul" It is only allowed within: applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th.

tag: " body" allows optional closing tag. closing tag: "div" closes "body" context. Validation will proceed as if context is closed.

tag: " li" allows optional closing tag. closing tag: "a" closes "li" context. Validation will proceed as if context is closed.

lmorales

05-31-2012, 02:56 PM

Does anyone know whats going on with this page?

cortesenterprises.com/test/index.html

coothead

05-31-2012, 05:39 PM

Hi there lmorales,

you page does not validate...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.cortesenterprises.com%2Ftest%2Findex.html

Also the image hovering can be achieved with CSS...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.cortesenterprises.com/test/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Cortes Companies</title>

<link rel="icon" type="image/ico" href="images/favicon.ico">

<style type="text/css">
body {
font-family:arial,helvetica,sans-serif;
overflow-y:scroll;
}
#container {
width:1000px;
padding-top:111px;
margin:auto;
background-image:url(images/cortes.jpg);
background-repeat:no-repeat;
background-position:center top;
}
#left, #right {
position:relative;
float:left;
width:230px;
padding:0;
margin:0;
list-style-type:none;
}
#right {
float:right;
width:250px;
}
#left li,#right li{
margin:15px 0;
}
#left li img,#right li img {
position:absolute;
display:none;
}
#left li:hover img {
display:block;
left:300px;
top:15px;
}
#right li:hover img {
display:block;
right:300px;
top:15px;
}
#left li a img,#right li a img {
position:static;
display:block;
border:0;
}
#footer {
padding:90px 0 20px;
clear:both;
font-size:9px;
text-align:center;
}
</style>

</head>
<body>

<div id="container">

<ul id="left">
<li><a href="http://www.overdrivedirect.net"><img src="images/overdrive.jpg" width="200" alt=""></a><img src="images/overhov.png" alt=""></li>
<li><a href="#"><img src="images/honeys.jpg" width="230" alt=""></a><img src="images/honeyhov.png" alt=""></li>
<li><a href="http://www.dtentertainmentdistrict.com"><img src="images/district.jpg" width="200" alt=""></a><img src="#" alt=""></li>
<li><a href="http://www.blackumbrellacocktails.com"><img src="images/black.jpg" width="200" alt=""></a><img src="images/blackhov.png" alt=""></li>
<li><a href="#"><img src="images/brick.jpg" width="200" alt=""></a><img src="images/brickhov.png" alt=""></li>
<li><a href="#"><img src="images/trend.jpg" width="200" alt=""></a><img src="images/trendhov.png" alt=""></li>
</ul>

<ul id="right">
<li><a href="http://www.62music.com"><img src="images/62.jpg" width="250" alt=""></a><img src="images/62hov.png" alt=""></li>
<li><a href="http://www.terrace390.com"><img src="images/terrace.jpg" width="250" alt=""></a><img src="images/terracehov.png" alt=""></li>
<li><a href="http://www.americanmudder.com"><img src="images/mudder.jpg" width="200" alt=""></a><img src="images/mudderhov.png" alt=""></li>
<li><a href="http://www.mooseheadmedia.com"><img src="images/moose.jpg" width="200" alt=""></a><img src="#" alt=""></li>
<li><a href="#"><img src="images/pub.jpg" alt=""></a><img src="#" alt=""></li>
</ul>

<div id="footer">
Corporate Headquarters • 4700 L.B. Mcleod Rd. • Suite 4 • Orlando, FL 32811
</div>

</div>

</body>
</html>

coothead

lmorales

05-31-2012, 06:20 PM

WOAH! THAT IS AWESOME!!!! I had to do a similar site to this a while ago, and the only solution I had found was javascript, however in this application it got all buggy. Thank you SOOOO Much!!!!! How does that work though? I see the div for the hover state, but in the html how does adding an additional image at the end of the link call the properties of hover?

coothead

05-31-2012, 06:48 PM

Hi there lmorales,

this is the CSS that displays the images...
#left li:hover img {
display:block;
left:300px;
top:15px;
}
#right li:hover img {
display:block;
right:300px;
top:15px;
}

I forgot to mention that you should remove any unwanted images, as IE,
and possibly some other browsers, will display a red X for them on hover. :eek:

coothead