Now, this is probably old-hat for many of you, I myself have toyed with these things for years before DNN, but I've been a bit slow to bring them in to my skins, as I've been gettting a feel for DNN's idiosyncracies when it comes to the rendered source, page and default CSS. So recently, I've been working on trying to integrate better semantic markup into my skins and containers. Particularly so it happens 'automatically' as the less-technical editors make changes. One hangup I kept coming across was - How to integrate H1 tags into a page without disrupting the graphic design. I'd used the Logo element for a while, but I recently read in another thread that the way it links back may cause issues with SEO.
After toying around with my old snippet library and reading around, I came across the following technique and I'd like to get some feedback as to anything I may be overlooking. Simply, where I would normally have a LOGO element, I've replaced it with a H1 tag, then used some CSS to lay an image over top, example:
HTML
<h1 class="SiteTitle">
<span onclick="location.href='/default.aspx';" style="cursor:pointer;"></span>This is the Site Title
</h1>
CSS
h1.SiteTitle {
width: 990px;
height: 68px;
position: relative;
padding:0;
margin:0;
}
h1.SiteTitle span {
background: url("Company-Logo.jpg");
position: absolute;
width: 100%;
height: 100%;
}
The onclick command is there to provide the standard home click-back, other than that it's all fairly basic. Any thoughts or comments on aspects I may be missing?
Thanks!