A href and a clear image as a background to keep text in the header

HTML & CSS
1

Hello all,

Trying to create a header with an a href and a clear image as a background to keep text in the header with everything centered.

I have tried 2 different ways to solve this and to be able to use the a href as a page link, and the alt info in the a href and the img, but it does not work.


CSS - common to both methods
#oktoheader {
    background-color: #E3EFFF;
    height: auto;
    min-height: 170px;
    border-bottom: 1px solid #999;
}

#oktoheader a {
    float: left;
    width: 99%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background:#E3EFFF url(../images/clear.gif) repeat center center; 
}

#logoname  h1 {
    float: left;
    width: 100%;
    margin: 0px 10px 0px 10px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 2em; line-height: 2em; font-weight: bold; color: #000; 
}

#logoname h2 {
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 1.6em; line-height: 1.7em; font-weight: bold; color: #000;
}

#logoname  h3 {
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 2px 0px 2px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    font-family: Arial, Verdana, sans-serif;
    font-size: 1.8em; line-height: 1.8em; font-weight: bold; color: #000;
}

#logoname img {
    display: block;
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}



<div id="oktoheader">
    Method #1 - the a href link surrounds only the first div
    <a href="http://localhost/site/" alt="save to your bookmarks!">
    <div id="logoname">
        <h1>Company name</h1>
        <h2>Person in charge</h2>
        <h3>Profession</h3>
    </div>
    </a>
    <div id="logoname">
        <img src="http://localhost/site/templates/okto-no-right/images/logo.png" alt="my logo info" />
    </div>


    Method #2 - the a href link surrounds the div
    <a href="http://localhost/dermag/" alt="save to your bookmarks!">
    <div id="logoname">
        <h1>Company name</h1>
        <h2>Person in charge</h2>
        <h3>Profession</h3>
        <img src="http://localhost/site/templates/okto-no-right/images/logo.png" alt="my logo info" />
    </div>
    </a>
</div>
2

Does anyone have another way of getting a link with a background image to work?

3

Here is what the header looks like and why I am trying to use the area as a link to the site.

4

peterb, can you post a link to the web page? It would really help.

5

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.


<!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>