logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-27-2012, 05:50 AM   #1
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Question Proper Way to Write a Linked <li> Without JavaScript

Hello,

I am working on 4 icons that are styled with images and other goodies as you see here: devDOTottercreativestudioDOTcom (top right).

If I write:

<a href="mailto:my@email.com" class="icon" title="Let's talk!"><li id="contact">Contact</li></a>

...it works but it does not pass the HTML5 verification (which I want).

If I write:

<li id="contact"><a href="my@email.com" class="icon" title="Let's talk!">Contact</a></li>

...it does not work but it passed the validation.

I am not sure what I'm doing wrong here.
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 07-27-2012, 06:14 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

passes with warnings
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body><ul><li id="contact"><a href="mailto:my@email.com" class="icon" title="Let's talk!">Contact</a></li></ul>
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 07-27-2012, 03:19 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

kremo5le, The error message, when you validate, will say what you are doing wrong, you just have to read it and take action.

You cannot put a block element inside an inline element.

Your second example is correct, and works.
domedia is offline   Reply With Quote
Old 07-28-2012, 12:10 AM   #4
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Question

Quote:
Originally Posted by edbr View Post
passes with warnings
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body><ul><li id="contact"><a href="mailto:my@email.com" class="icon" title="Let's talk!">Contact</a></li></ul>
</body>
</html>
Hey there,

Let me simplify it: http://dev.ottercreativestudio.com/ < The "Contact" icon does not work.

The other 3 do because I linked them the "wrong way."
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 07-28-2012, 02:15 AM   #5
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Cool Solved!

Hi guys,

I eliminated the <ul> + <li> and simplified the whole thing with a few <div>. It works flawlessly and it passes W3C 100%.

Thanks!
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Reply


Thread Tools
Display Modes

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 On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:35 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com