Pretty simple really, is it possible to have a CSS background image as a link? I've got a logo as the background image of a header and need it to have a link back to the homepage. The CSS for #header is: Code: #header { padding: 0; height: 150px; background-image: url(images/logo.gif); background-repeat: no-repeat; background-position: left; } With the HTML being: Code: <div id="header"> <ul id="menu_header"> <li id="button_photos"><a href="photos.php">Photos</a></li> <li id="button_contact"><a href="contact.php">Contact Us</a></li> <li id="button_links"><a href="links.php">Links</a></li> </ul> </div> Simply adding in an image to the header HTML itself completely messes everything up, so I need the background image to be a link.
You could have an onlciick event for the header div Code: <script type="text/javascript"> <!-- function headerimg(){ window.location = "somelocation.com" } //--> </script> <div id="header" onClick="javascript:headerimg();"> <ul id="menu_header"> <li id="button_photos"><a href="photos.php">Photos</a></li> <li id="button_contact"><a href="contact.php">Contact Us</a></li> <li id="button_links"><a href="links.php">Links</a></li> </ul> </div>
whats the layout like because what you want is not possible, but I'm sure that if there is space to put a link in there somewhere i'm sure you can add an <h1><a href>Logo/name</a></h1> in there and float it to the right position and then hide the text using text-indent:-5000px; and give it a background image.
The site in question is here. It's using a CSS layout, along with CSS Rollovers. Inserting an image where the current logo is causes the rollovers to have a fit. They work well, but Javascript ones were sooo much easier to get to play ball. I'll try both methods, though I want to steer clear of Javascript.
oh, thats nice and easy using css, no javascript! basically, create and h1 with name of the site typed into it and make it a link to index.php that should look like this: Code: <h1><a href="index.php">girlguidingtamworth</a></h1> then put that above the code you already have like this: Code: <div id="header"> [b]<h1><a href="index.php">girlguidingtamworth</a></h1>[/b] <ul id="menu_header"> <li id="button_photos"><a href="photos.php">Photos</a></li> <li id="button_contact"><a href="contact.php">Contact Us</a></li> <li id="button_links"><a href="links.php">Links</a></li> </ul> </div> Now, in your css, i'm guessing that you have either padding or margin left on that <ul> you need take away the width of the logo from that padding, so if you have 100px padding and the logo is only 90px you are left with 10px padding-left on the <ul> then use this css on the <h1> Code: h1{ float:left; width:90px; height:100px; } h1 a{ display:block; width:90px; height:100px; background:url(logo.jpg); text-indent:-5000px; //this hides the text but makes sure its still viewable to screen readers } The you need to make sure your <ul> with the navigation is also floated left and it should sit nicely next to the logo which is now clickable.
Ah I get you. Makes sense now - I'll try it out and post back if there are any problems - thanks will.!
Make sure you add "overflow: hidden;" to the "h1 a" rule to make Firefox cut off the outline when you click on it.
Yeah, you can also style (and therefore remove) them as well, the syntax is the same as normal borders. Code: a:active { outline: 1px dotted #FF0000; } That would make it have a red outline instead. You can read more on it here. I don't think you have to ask if they are supported in IE though. (they're not )