beekay_ Posted February 17, 2010 Share Posted February 17, 2010 Problem on this website: http://www.xeenat.com I'm trying to add a link to the header, so when people click on it, they'll basically be returned to the home page. My header is defined as: <div id="header"></div> I tried adding a link by doing this: <a href="http://xeenat.com"><div id="header"></div></a> It works, but then my code isn't passing the validation. Is there another way around this? Thank you! Link to comment Share on other sites More sharing options...
0 Cupcakes Posted February 17, 2010 Share Posted February 17, 2010 Remove #header and replace with: <h1><a href="#">Sitename</a></h1> Then in your css you can use: h1 a { width: ###px; height: ###px; display: block; background: url('../images/yoururl.jpg') top center no-repeat; text-indent: -99999px; } Link to comment Share on other sites More sharing options...
0 Hot Posted February 17, 2010 Share Posted February 17, 2010 You are not passing validation because div is not a valid child element of link elements. Use spans instead, they are valid. <a href="http://xeenat.com"><span id="header"></span></a> Then just add this CSS rule. #header { display: block; } As a side note, I recently built a custom web application that had a grid of links with div elements in them. Intermittently, some of the links were not clickable. The problem went away after I applied the change above. Link to comment Share on other sites More sharing options...
0 sweetsam Posted February 17, 2010 Share Posted February 17, 2010 Html... <div id="header"> <a href="index.html" title="Home"> </a> </div> CSS... #header a { height: h px; where h is the height of header display: block; } Link to comment Share on other sites More sharing options...
0 former1 Posted February 17, 2010 Share Posted February 17, 2010 sweetsam has posted the best solution (Y) Link to comment Share on other sites More sharing options...
0 Cupcakes Posted February 17, 2010 Share Posted February 17, 2010 What makes it the "best" solution? If I disable CSS, nothing is there to click because he didn't specify any text at all. Not only that but there's no width applied, so I'm never even going to be able to click on anything since there's nothing in the div to give it width. Semantically speaking, my suggestion is what should be used. If you looked at his site, his header is his website's title. So it makes sense to place the site's name in a first heading. This also negates the need for having the header div. Semantically correct, SEO-optimized and works when CSS is disabled. Link to comment Share on other sites More sharing options...
0 sweetsam Posted February 17, 2010 Share Posted February 17, 2010 Chill cup cakes :laugh: He wanted to have a link in the header and so I posted a solution. Once set to display block the element automatically takes the width of the immediate container which would be the header, making it unnecessary to specify width. So all you need is a height. Semantically speaking you are correct. There is no doubt about that. But that is not his situation. He does not have text in his header. Hence I did not include a h1 or a negative indent. Besides the header div already has a background making background unnecessary for the link. Link to comment Share on other sites More sharing options...
0 Cupcakes Posted February 17, 2010 Share Posted February 17, 2010 Erhm, text doesn't emote? Anyway, why give a suggestion when you know what would be better semantic wise? Wouldn't you want to share what should be used versus what would fit the "situation"? His header might not have any text in it but that doesn't mean you can't recommend/suggest that he swap the header for a heading since the header is JUST using a background image which contains the name of his website. No need for header when the heading tag's CSS properties are replacing what the purpose of the header is. Link to comment Share on other sites More sharing options...
Question
beekay_
Problem on this website: http://www.xeenat.com
I'm trying to add a link to the header, so when people click on it, they'll basically be returned to the home page.
My header is defined as:
I tried adding a link by doing this:
It works, but then my code isn't passing the validation. Is there another way around this?
Thank you!
Link to comment
Share on other sites
7 answers to this question
Recommended Posts