PDA

View Full Version : HTML / CSS Image Menu



supermonkey122
Jul 16th, 2009, 08:05 PM
Hello All,

My first post here!

I have a basic menu that someone made for me a few years back. It works perfectly, but I am now trying to adjust it for a new site.

The images on the old menu were all equal length, but one image is longer on the new one and I cannot get the images to display corretly. I have tried all type of positioning and specifying sizes but can't get it to work. It seems to be beyond me. Any pointers would be greatly appreciated!

Here is the original code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--this is a DTD - it's important!-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>how-to-pass.info</title>


<style type="text/css">
body {
behavior:url("cssh.htc");
}
#homemenu ul { /* all lists */
cursor: default;
padding: 0;
margin: 0 auto;
list-style: none;
width:768px;
position: relative;
}
#homemenu ul li { /* all list items */
float: left;
position:relative;
width: 192px;
height:33px;
background-image:url(images/homeb.jpg);
}
#homemenu ul li#a1 {
background-image:url(images/a1b.jpg);
}
#homemenu ul li#a2 {
background-image:url(images/a2b.jpg);
}
#homemenu ul li#b1 {
background-image:url(images/b1b.jpg);
}
#homemenu ul li#b2 {
background-image:url(images/b2b.jpg);
}
#homemenu ul li#c1 {
background-image:url(images/c1b.jpg);
}
#homemenu ul li#c2 {
background-image:url(images/c2b.jpg);
}

#homemenu ul li:hover img {display:none;}
#homemenu ul li:hover ul li img {display:block;}
#homemenu ul li ul li:hover img {display:none;}
#homemenu ul li:hover, #homemenu ul li:hover ul li {
display:block;
cursor:pointer;
}
#homemenu ul li ul { /* second-level lists */
display: none;
position: absolute;
top: 33px;
left: 0;
}

#homemenu ul li:hover ul, #homemenu ul li.over ul { /* lists nested under hovered list items */
display: block;
}
img {border:0;}

/* These position the menus relative to their headings. The widths should be the same as
the actual width of your menu - ie. if you have two menu items - 384px */
#homemenu ul #home2 {
left:0;
width:192px;
}
#homemenu ul #home3 {
left:0;
width:192px;
}
#homemenu ul #home4 {
left:0px;
width:192px;
}

</style>



</head><body>
<div id="homemenu">
<ul>
<li><img src="images/home.jpg" alt="" />
<ul id="home1">
</ul>

</li>

<li><img src="images/home.jpg" alt="" />
<ul id="home2">
<li id="a1"><a href="#"><img src="images/a1.jpg" alt="" /></a></li>
<li id="a2"><a href="#"><img src="images/a2.jpg" alt="" /></a></li>
</ul>
</li>

<li><img src="images/home.jpg" alt="" />
<ul id="home3">
<li id="b1"><a href="#"><img src="images/b1.jpg" alt="" /></a></li>
<li id="b2"><a href="#"><img src="images/b2.jpg" alt="" /></a></li>
</ul>
</li>

<li><img src="images/home.jpg" alt="" />
<ul id="home4">

<li id="c1"><a href="#"><img src="images/c1.jpg" alt="" /></a></li>

<li id="c2"><a href="#"><img src="images/c2.jpg" alt="" /></a></li>
</ul>
</li>

</ul>
</div>




<br><br>



</body>
</html>



Here is the new code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--this is a DTD - it's important!-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>how-to-pass.info</title>

<style type="text/css">
body {
}
#homemenu ul { /* all lists */
cursor: default;
padding: 0;
margin: 0 auto;
list-style: none;
width:768px;
position: relative;
}
#homemenu ul li { /* hover images here */
float: left;
position:relative;
background-image:url(homeH.png);
height:29px;
width:108px;
}
#homemenu ul li#home {
float: left;
background-image:url(homeH.png);
height:29px;
width:108px;
}
#homemenu ul li#roof {
float: left;
background-image:url(roofH.png);
height:29px;
width:108px;
}
#homemenu ul li#floor {
float: left;
background-image:url(floorH.png);
height:29px;
width:108px;
}
#homemenu ul li#timberframe {
float: left;
background-image:url(timberframeH.png);
height:29px;
width:147px;
}
#homemenu ul li#other {
float: left;
background-image:url(otherH.png);
height:29px;
width:108px;
}
#homemenu ul li#contact {
float: left;
background-image:url(contactH.png);
height:29px;
width:108px;
}

#homemenu ul li:hover img {display:none;}
#homemenu ul li:hover ul li img {display:block;}
#homemenu ul li ul li:hover img {display:none;}
#homemenu ul li:hover, #homemenu ul li:hover ul li {
display:block;
cursor:pointer;
}
#homemenu ul li ul { /* second-level lists */
display: none;
position: absolute;
top: 29px;
left: 0;
}

#homemenu ul li:hover ul, #homemenu ul li.over ul { /* lists nested under hovered list items */
display: block;
}
img {border:0;}

/* These position the menus relative to their headings. The widths should be the same as
the actual width of your menu - ie. if you have two menu items - 216px */
#homemenu ul #home1 {
float: left;
left:0;
width:108px;
}
#homemenu ul #roof2 {
float: left;
left:0;
width:108px;
}
#homemenu ul #floor3 {
float: left;
left:0px;
width:108px;
}
#homemenu ul #timberframe4 {
position: static;
left:0px;
width:147px;
}
#homemenu ul #other5 {
float: left;
left:0px;
width:108px;
}
#homemenu ul #contact6 {
float: left;
left:0px;
width:108px;
}

</style>



</head><body>
<div id="homemenu">
<ul>
<li><img src="home.png" width="108" height="29" alt="" />
<ul id="home1">
</ul>

</li>

<li><img src="roof.png" width="108" height="29" alt="" />
<ul id="roof2">
</ul>
</li>

<li><img src="floor.png" width="108" height="29" alt="" />
<ul id="floor3">
</ul>
</li>

<li><img src="timberframe.png" width="147" height="29" alt="" />
<ul id="timberframe4">
</ul>
</li>

<li><img src="other.png" width="108" height="29" alt="" />
<ul id="other5">
<li id="others"><a href="#"><img src="others.png" width="169" height="74" alt="" /></a></li>
</ul>
</li>

<li><img src="contact.png" width="108" height="29"alt="" />
<ul id="contact6">
</ul>
</li>

</ul>
</div>




</body>
</html>



Thank you for your help!

supermonkey122
Jul 16th, 2009, 11:45 PM
Right, I've attempted to re-write the menu based on the suckerfish code, but I'm still unable to position the images... I'm sure it's something really simple! Thanks



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head><title>New Menu</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#1 {
position:relative; left:0px;
}
#2 {
position:relative; left:108px;
}
#3 {
position:relative; left:216px;
}
#4 {
position:relative; left:324px;
}
#5 {
position:relative; left:371px;
}
#6 {
position:relative; left:409px;
}

#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>


<ul id="nav">

<li id="1"><a href="#"><img src="home.png" width="108" height="29" border=0 alt="" /></a>
</li>

<li id="2"><a href="#"><img src="roof.png" width="108" height="29" border=0 alt="" /></a>
</li>

<li id="3"><a href="#"><img src="floor.png" width="108" height="29" border=0 alt="" /></a>
</li>

<li id="4"><a href="#"><img src="timberframe.png" width="147" height="29" border=0 alt="" /></a>
</li>

<li id="5"><a href="#"><img src="other.png" width="108" height="29" border=0 alt="" /></a>
<ul>
<li><a href="#"><img src="others.png" width="169" height="74" border=0 alt="" /></a></li>
</ul>
</li>

<li id="6"><a href="#"><img src="contact.png" width="108" height="29" border=0 alt="" /></a>
</li>
</ul>

</body>

</html>

supermonkey122
Jul 18th, 2009, 08:29 AM
success!

have found the line, cant believe i didn't see it before, but then I am a css newbie...



width: 10em; /* width needed or else Opera goes nuts */


The comment suggests thought that opera users may experience difficulty. Please could some one advise how I can get round this?

Thanks!

_Aerospace_Eng_
Jul 18th, 2009, 08:32 AM
FYI IDs should not begin with a number.