and the alt info in the a href and the img, but it does not work.
There is no "alt" attribute for an anchor only a title attribute and you should only use that to qualify the text that is within the link and not to duplicate it. It is not guaranteed to be read by anyone though and the text content within the link is the important item.
You can't have both tooltips on the anchor and on the image either as the inner element will win out.
We'd need to see what you are trying to do exactly as I don't understand what this clear image and logo image are all about. It all seems too complicated and over the top. A simple gilder/levin image replacement technique would be enough if you wanted to use image replacement techniques.
You can only wrap an anchor around block elements in html5 (not any other flavour of html) but you will need to set the anchor to block to avoid numerous bugs with that method. It's one of the reasons I dislike html5 as it makes little sense to have a link that may contain many block items as it becomes unclear where the link is actually going to take you.
For normal html you can achieve a similar thing by absolutely placing the href over the content.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
#oktoheader {
background-color: #E3EFFF;
border-bottom: 1px solid #999;
text-align:center;
font-family: Arial, Verdana, sans-serif;
}
#logoname {
display:inline-block;
vertical-align:top;
text-align:center;
position:relative;
color:#000;
*display:inline;/* ie6/7 inline block fix */
zoom:1.0;
}
#logoname h1 {
margin: 0 10px;
padding:0;
font-size: 2em;
line-height: 2em;
font-weight: bold;
color: #000;
}
#logoname h2 {
margin: 0;
text-decoration: none;
font-size: 1.6em;
line-height: 1.7em;
font-weight: bold;
color: #000;
}
#logoname h3 {
margin:0;
padding: 0 2px;
letter-spacing: 1px;
font-size: 1.8em;
line-height: 1.8em;
font-weight: bold;
color: #000;
}
#logoname h1, #logoname h2, #logoname h3 {
position:relative;
z-index:3;
}
#logoname a, .logo, .logo span {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:4;
text-decoration:none;
margin:0;
overflow:hidden;
}
.abslink span {
position:absolute;
left:-999em;
width:100px;
background:#ffc;
color:#000;
border:1px solid #000;
padding:5px;
font-size:85%;
}
.abslink:hover span{left:0;top:0;margin:25px}
.logo { z-index:1 }
.logo span { background:red url(images/logo.png) no-repeat 50% 50% }
</style>
</head>
<body>
<div id="oktoheader">
<div id="logoname">
<h1>Company name</h1>
<h2>Person in charge</h2>
<h3>Profession</h3>
<div><a class="abslink" href="http://www.google.com"><span>Save to your bookmarks</span></a></div>
<p class="logo">Acme trading company<span></span></p>
</div>
</div>
</body>
</html>
a href and a clear image as a background to keep text in the header
Reply With Quote
Bookmarks