• 0

Coding Help


Question

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

7 answers to this question

Recommended Posts

  • 0

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

  • 0

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

  • 0

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

  • 0

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

  • 0

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

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.