...

View Full Version : Need help to get a special menu W3C conform



SnakeSnoke
04-11-2009, 12:33 PM
Hi everyone,

I hope you can give me some tips how I can solve the last problem, which delays me finishing my website. I've created a simple version of my current div menu for this forum. I want to get this W3C conform/valid html.

Web-Link to the Menu (http://echizen.ec.funpic.de/example/)

index.html


<div id="menuArea">
<div id="bg1">
<a href="#"><div class="text1">Menu 1</div></a>
</div>
<div id="bg2">
<a href="#"><div class="text2">Menu 2</div></a>
</div>
</div>


style.css


body{
font: 12px tahoma, sans-serif;
}

img{
border: 0px;
}

a:link, a:visited{
color: #fff;
text-decoration: none;
}

a:hover, a:active{
font-weight: bold;
}

.text1, .text2{
margin-top: 454px;
padding: 8px;
}

.text1{
background: #000;
}

.text2{
background: #444;
}

#menuArea{
background: #8facdf;
height: 490px;
margin: 40px auto 20px auto;
width: 490px;
}

#bg1 a, #bg2 a{
height: 490px;
position: absolute;
width: 245px;
}

#bg2 a{
margin-left: 245px;
}

#bg1 a:hover{
background: url(bg1.jpg);
width: 490px;
}

#bg2 a:hover{
background: url(bg2.jpg);
}


I try to explain my requirements:
As you can see I have two divs side by side. Every div has a menu text at its bottom. Both, the div and the menu text are together a hyperlink. If you go mouseover the first div, it expands to the size of the second div and shows a background-picture. You can still mouseover the second div, even when the first div is expanded.

I know, <a href=" is not allowed arround a div. My current attempt to realize the upper menu with list styles:

Web-Link to new version of the Menu (http://echizen.ec.funpic.de/example/index2.html)

index2.html


<div id="menuArea">
<ul id="menuList">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>


style2.css


body{
font: 12px tahoma, sans-serif;
}

img{
border: 0px;
}

#menuArea{
background: #8facdf;
height: 528px;
margin: 40px auto 20px auto;
width: 490px;
}

ul#menuList{
margin: 0px;
padding: 0px;
}

#menuList li{
list-style-type: none;
}

#menuList a{
display: block;
float: left;
height: 24px;
padding-left: 20px;
padding-top: 498px;
width: 225px;
}

#menuList a:link, #menuList a:visited{
color: #fff;
text-decoration: none;
}

#menuList a:hover
{
background: #000 url(bg1.jpg) no-repeat;
color: #fff;
font-weight: bold;
}

Excavator
04-11-2009, 06:22 PM
Hello SnakeSnoke,
What you're trying to do is called a disjointed rollover. Typically you position your links and hide your rolled image in span tags that become visible on hover. Pretty easy once you've done one...
have a look at this -
<!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">
<head>
<title>My CSS Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
font: 12px tahoma, sans-serif;
background: #fc6;
}
* {
margin: 0;
padding: 0;
border: 0px;
}
#menuArea{
width: 490px;
border-top: 1px solid #fc6; /*use this to avoid UNcollapsing margin*/
overflow: auto; /*clears the floats*/
margin: 40px auto 20px auto;
background: #8facdf;
position: relative;
}
#bg1, #bg2 {
width: 245px;
height: 30px;
margin: 490px 0 5px;
display: block;
line-height: 30px;
text-align: center;
}
#bg1 {
float: left;
background: #000;
}
#bg2 {
margin-left: 245px;
background: #444
}
#bg1 span, #bg2 span {display: none;}
#bg1:hover span, #bg2:hover span{
width: 490px;
height: 490px;
position: absolute;
top: 0px;
left: 0;
display: block;
}
</style>
</head>
<body>
<div id="menuArea">
<a href="#" id="bg1">Menu 1<span><img src="http://echizen.ec.funpic.de/example/bg1.jpg" alt="sky" width="490" height="490" /></span></a>
<a href="#" id="bg2">Menu 2<span><img src="http://echizen.ec.funpic.de/example/bg2.jpg" alt="sky" width="490" height="490" /></span></a>
<!--end menuArea--></div>
</body>
</html>

Some things to know about that are used in this layout:

UNcollapsing margins (http://complexspiral.com/publications/uncollapsing-margins/)
Clearing floats (http://www.quirksmode.org/css/clearing.html)

Excavator
04-11-2009, 06:29 PM
I just noticed that bg2.jpg is a different size than bg1.jpg.
You can fix that easily, just seperate the two :hover spans and style them to fit their specific image.
Remember to fix the sizes of the images in the markup too.

SnakeSnoke
04-12-2009, 04:31 PM
Thank you very much! :-)

But there's one thing I don't understand now. After seeing your example I just changed "<div class="text ..." to "<span class="text ..." and in the CSS i added to ".text..." display: block. Now it seems like it's working how I want it and it's w3c conform. I don't use your overflow etc. at all, I just changed div to span and added display:block. If you see anything in my version which I definetly shouldn't do, please tell me.

Another thing, in your version the "area" arround the div is not a hyperlink, only the menu-text at the bottom.

If you have any idea to make a version with list style (ul li ...) please tell me.

Weblink to newest Version (http://echizen.ec.funpic.de/example/index3.html)

index3.html


<div id="menuArea">
<div id="bg1">
<a href="#"><span id="text1">Menu 1</span></a>
</div>
<div id="bg2">
<a href="#"><span id="text2">Menu 2</span></a>
</div>
</div>


style3.css


body{
font: 12px Tahoma, Verdana, Arial, sans-serif;
}

a:link, a:visited{
color: #fff;
text-decoration: none;
}

a:hover, a:active{
font-weight: bold;
}

#menuArea{
background: #8facdf;
height: 490px;
margin: 40px auto 20px auto;
width: 490px;
}

#bg1 a, #bg2 a{
height: 490px;
position: absolute;
width: 245px;
}

#bg2 a{
margin-left: 245px;
}

#bg1 a:hover{
background: url(bg1.jpg);
width: 490px;
}

#bg2 a:hover{
background: url(bg2.jpg);
}

#text1, #text2{
display: block;
margin-top: 454px;
padding: 6px;
}

#text1{
background: #000;
}

#text2{
background: #333;
}

Excavator
04-12-2009, 08:05 PM
I put demos of both versions up at http://nopeople.com/CSS/disjointed_rollover/index.html

I like your approach, I'll study it more later to see if I can get it a little more stable in IE8.
The only thing I saw was you seem to be vertically centering the .text1 and 2 with padding. A single line of text centers easily with line-height too.

SnakeSnoke
04-12-2009, 11:22 PM
I don't see any problems in IE8. I optimized the version a little more.

SnakeSnoke
04-14-2009, 10:35 AM
@Excavator
I still would like to see a version of index3 with list-style. Any ideas?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum