WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hello,
I would like make my header clickable so it links to the home page when clicked. Is there a way to do this with CSS? Can I create a link that is attached to an image?
Any help would be greatly appreciated. I am a newbie!
blog: http://bunandbiscuit.wordpress.com/
The blog I need help with is bunandbiscuit.wordpress.com.
There is not a way to make something clickable with CSS, but a lot of times what you can do is attach a background image to something that is already clickable such as site title that is already linked to the blog home page or change the dimensions of an already existing links to essentially overlap an image.
In your case, what you did was essentially take the clickable part and move it off left by 500 pixels with this CSS:
bunandbiscuit
#main-nav h1,#main-nav .description {
margin-left:-500px;
}I would recommend using text-indent instead of margin-left there because a margin will affect the spacing of the blog directly whereas text-indent will only affect the text placement.
Try the following to see if it gets the end result you're looking for:
Remove this:
#main-nav {
background:url('http://bunandbiscuit.files.wordpress.com/2012/05/girlwdog_145x218_logo.jpg') no-repeat scroll 0 0 transparent;
margin:0;
padding-top:9em;
overflow:hidden;
position:absolute;
}
#main-nav h1,#main-nav .description {
margin-left:-500px;
}Add this:
#main-nav h1.masthead a,
#main-nav h1.masthead a:hover {
display: block;
background:url('http://bunandbiscuit.files.wordpress.com/2012/05/girlwdog_145x218_logo.jpg') no-repeat;
width: 145px;
height: 218px;
text-indent: -9999px;
}
#main-nav .description {
text-indent: -9999px;}
#main-nav .menu-wrap {
margin-top: -14px;
}It will work to restore the Oulipo settings where the site title (which you replaced with an image) and the main navigation are fixed in place because it removes "position:absolute" from "#main-nav". See that?
You're doing great! I think you got really far just by looking at other forums!
Thanks,
I tried adding what you recommended but now part of the right side menu is cut off. Is there a way to fix this?
Also is there a way that I could make the log and the menu stay on the top of the page? Right now, it scrolls down with the rest of the page.
Thanks for all of your help!
I tried adding what you recommended but now part of the right side menu is cut off. Is there a way to fix this?
It doesn't look cut off to me. I checked it in a few browsers, but not all. May I ask exactly what is getting cut off and what browser version you're using please?
Also is there a way that I could make the log and the menu stay on the top of the page? Right now, it scrolls down with the rest of the page.
What do you mean by the log? The image on the left and the main menu are staying in a fixed position and not moving with the rest of the page right now when I check. This is because they are using fixed positioning. See https://developer.mozilla.org/en/CSS/position to learn more about how positioning works.
I meant the logo...sorry. For some reason it is scrolling down with the page when I scroll down. Are you seeing something different? It there a way I can do absolute positioning?
Thanks for all your help!
Yep, the logo stays fixed for me. I tested in Chrome 18, Safari 5.1.2, and Firefox 12.0 on a Mac just now and the logo position is fixed. What browser and browser version are you using?
This topic has been closed to new replies.
