LinuxQuestions.org
Latest LQ Deal: Latest LQ Deals
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 02-19-2008, 07:49 PM   #1
dla-nor
LQ Newbie
 
Registered: Jan 2007
Distribution: FC9, eee-xubuntu r3, RHEL 4, RHEL 5
Posts: 17

Rep: Reputation: 0
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 { cursorointer; }
</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]
 
Old 02-21-2008, 02:43 PM   #2
trevelluk
Member
 
Registered: Nov 2003
Location: Bristol, UK
Distribution: Debian Lenny, Gentoo (at work)
Posts: 388

Rep: Reputation: 32
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.
 
Old 02-21-2008, 06:30 PM   #3
dla-nor
LQ Newbie
 
Registered: Jan 2007
Distribution: FC9, eee-xubuntu r3, RHEL 4, RHEL 5
Posts: 17

Original Poster
Rep: Reputation: 0
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!
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
LXer: HTML Dog: The Best-Practice Guide to XHTML and CSS LXer Syndicated Linux News 0 12-04-2006 09:33 PM
XHTML & CSS: internal/external stylesheets and their compatibility with old browsers ayteebee Programming 2 10-09-2006 04:14 PM
CSS/XHTML combined tags possible? Hosiah Programming 2 09-27-2006 11:03 PM
Help with XHTML/CSS rendering in IE vharishankar General 14 09-03-2006 06:07 AM
XHTML/CSS question: how to draw a curved box for a sidebar vharishankar General 5 08-04-2005 09:32 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 10:55 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration