LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   xhtml/CSS rectangular link region (without javascript or images)? (https://www.linuxquestions.org/questions/programming-9/xhtml-css-rectangular-link-region-without-javascript-or-images-622358/)

dla-nor 02-19-2008 06:49 PM
xhtml/CSS rectangular link region (without javascript or images)?
 
I recently wrote this bit of XHTML/CSS which works exactly the way I want it to in Firefox (and some other browsers too), but of course it isn't technically valid because I put block elements inside inline elements. Any way to accomplish the same thing correctly without using images or javascript? The key point here is that there are rectangular clickable link regions which include some other elements, and which trigger rollover effects.


[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<title>Title</title>
<style type="text/css">
body { font-family:verdana,sans-serif; }
div.menuitem { float:left; text-align:center; min-width:100px; }
div.square { width:18px; height:18px; border-width:2px; border-color:#000000; border-style:solid; margin:0px auto 13px; }
a.nav { color:#000000; text-decoration:none; }
a.nav:hover div.square { background-color:#000000; }
a.nav:hover div.menuitem { text-decoration:underline; }
</style>

<!--[if IE]>
<style type="text/css">
div.menuitem { width:100px; }
a.nav:hover { cursor:pointer; }
</style>
<![endif]-->

</head>
<body>
<a href="index.html" class="nav">
<div class="menuitem">
<div class="square">
</div>
Home
</div>
</a>
<a href="contact.html" class="nav">
<div class="menuitem">
<div class="square">
</div>
Contact Us
</div>
</a>
</body>
</html>
[/HTML]

trevelluk 02-21-2008 01:43 PM
Could you maybe just replace the divs with spans, and add a "display: block" style rule for them? I think this should work, but I don't have time to test at the moment.

dla-nor 02-21-2008 05:30 PM
Ahh, very good! It didn't work at first, but then I realized I had to put everything in a div (just having an "<a " directly in the body isn't right either), and then it validated properly. Thanks!


All times are GMT -5. The time now is 12:44 AM.