Forum Moderators: open
.top{ margin-top : 0em;
width : 100%;
text-align : center;
background-image : url(grafik/logo.gif);
background-repeat : no-repeat;
}
I would like to make the logo into a link. What is the best way of doing this?
(Not sure about the correct forum for this question)
You could, however, define a link in your HTML and assign the logo as a background image. Ask about this in the CSS forum.
That was exactly what I was hoping to avoid. Could I use SSI? (I've never tried that.)
VWDS
In my html file I now have
<div class="top"><h1>Title of page</h1></div>
I imagine to change this to something like
<div class="top"><!--#include virtual="http://example.com/logo.incl"--><h1>Title of page</h1></div>
where logo.incl would be a file with this content
<a href="http://example.com/">http://example.com/grafik/logo.gif</a>
Does that look alright?
<a href="http://demo.xaraya.com/" rel="" title="Your Site Name">
<!-- in this theme we just use a transparent gif to overlay the logo -->
<img src="themes/Xaraya_Classic/images/transparent_pix.gif" alt="Your Site Name" />
</a>
Then style it something like this:
div#classicheader img {
width: 245px;
height: 70px;
float: left;
}
Here is the site that the above code came from:
[demo.xaraya.com...]
[edit]tolachi beat me to it :)[/edit]
CSS:
#logo {
display: block;
width: 200px;
height: 100px;
background: url(graphic.gif) no-repeat;
}
HTML:
<a id="logo" href="http://example.com/"></a>
Plus you can take this one step further to provide heading text to search engines, screen readers and text browsers...
CSS:
#logo {
display: block;
width: 200px;
height: 100px;
background: url(graphic.gif) no-repeat;
}
#logo h1 {
display: none;
}
HTML:
<a id="logo" href="http://example.com/"><h1>example.com</h1></a>
<a id="logo" href="http://example.com/"><h1>example.com</h1></a>
Great apart from the fact that it won't validate - you can't wrap a block-level element (h1) in an inline element (a).
The transparent GIF is the way to go - you can place it in a div at the bottom of the page and use absolute positioning to place it over the logo.
Great apart from the fact that it won't validate..
Erm.. yeah, fair enough, good point. (It was off the top of my head)
Okay well this is equivalent and it will validate...
HTML:
<h1><a id="logo" href="http://dalmuti.net/"><span>example.com</span></a></h1>
CSS:
#logo {
display:block;
width:200px;
height:100px;
background: url(graphic.gif) no-repeat;
}
#logo span {
display: none;
}
You might think, as grahamstewart said, that an anchor hidden by CSS would be visible in a screen reader. Not so, unfortunately. FIR, as it is commonly called, fails in certain screen readers (http://www.alist apart.com/articles/fir/), rather defeating the point of the technique.
That doesn't necessarily mean you shouldn't use FIR [digital-web.com], but you should be aware of alternative image replacement techniques [stopdesign.com], and other options:
All browsers understand alternative text. If your logo is an image, why not embed it as an image?
If you're using CSS styles, make sure your users can turn them off or change them. Some modern browsers (like Mozilla Firefox and Opera) can switch stylesheets on the fly from a selection provided by your website (I do this).
If you're allowing your users to "theme" your site (I do this too), you could use either XSL (client or server) or CSS (client; make persistent with a cookie) to serve up the content in a way that fits their needs. Suitable settings can be guessed by browser sniffing when they first visit, but make sure they can change them.
In short, don't blindly grab at the latest fashion. Consider your options carefully -- you might actually add a degree of "cool" to your site by making it that little bit more flexible.
Adam
