mistados Posted August 12, 2011 Share Posted August 12, 2011 Hi guys,Im using an image sprite as my logo, i have followed the css tutorials and i cant see where i have gone wrong, can anyone advise me? Im using WP if it matters.HTML: <a href="http://www.mydomain.com" class="logo"></a> CSS: .logo {display: block; left:400px;top:-50px;width: 230px;height: 42px;background: url("http://www.mydomain.com/media/images/logo.png");}.logo:hover {background-position: 0 -57px;.logo {url ("http://www.mydomain.com/media/images/logo.png");} Link to comment Share on other sites More sharing options...
Drycodez Posted August 12, 2011 Share Posted August 12, 2011 remove the quotation marks in the image location and use apostrophe. Eg: background:url('location.png') and in your background-position: add px to the zero. What are you trying to do with left:400px; right:-50 ? If you re trying to position an element, use: position:relative;left:400; Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Hi,Thanks for your reply, i did what you suggested but it made no difference.. Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Well im just trying to get my logo element to display first, lol..then i will position it and work with the hover effect..Ive used the same code on buttons and other elements on my site, its weird.. Link to comment Share on other sites More sharing options...
Drycodez Posted August 12, 2011 Share Posted August 12, 2011 Hi,Thanks for your reply, i did what you suggested but it made no difference..what are you doing with left:400px... ? Are you trying to position the link? Link to comment Share on other sites More sharing options...
Drycodez Posted August 12, 2011 Share Posted August 12, 2011 Position it with: position:absolute; left:400px; top:100px you only give value to the left and top and not left and right. Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Position it with:.logo {display: block; position: relative; left:400px;top:-50px;width: 230px;height: 42px;background: url('http://www.mydomain.com/media/images/logo.png');}.logo:hover {background-position: 0px -57px; the logo wont even display on the page yet, have not even got to the positioning stage yet.. Link to comment Share on other sites More sharing options...
Drycodez Posted August 12, 2011 Share Posted August 12, 2011 It did not display because you are hiding it with: top:-50px remove the minus and it ll work! E.g: top:50px Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Hi,Still it will not show.. Link to comment Share on other sites More sharing options...
Drycodez Posted August 12, 2011 Share Posted August 12, 2011 Are you sure the path to the image is currect? Because if you did what i said in my last post, that means the CSS is valid. Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Yes im sure, does the HTML look right to you? Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Yep, i just typed the image path into my browser and the logo displays fine, so its not that.. Link to comment Share on other sites More sharing options...
Drycodez Posted August 12, 2011 Share Posted August 12, 2011 Yeah, ur css is ok! Link to comment Share on other sites More sharing options...
ste Posted August 12, 2011 Share Posted August 12, 2011 You have a negative top margin, are you sure you need that. It could be pushing it off the screen. If you post a link to the page here, we would be better able to help as the CSS looks ok as it is, but there maybe other factors causing the issue.EDIT: Oops, I see O. Samuel already suggested re. the negative margin Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Yea, its a mystery to me..:)Here is the complete css code: /* Copyright © YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) *//* * Custom Style Sheet - Use this file to style your content */ /* Logo */#logo .custom-logo { width: 250px; height: 60px;}/* Content */.teaser-box { margin-top: 15px; }.teaser-box:first-child { margin-top: 0; }.teaser-box > h3 { margin-top: 5px; }.button {display: block; position:relative;left:400px;top:-50px;width: 230px;height: 42px;background: url("http://www.proaudioheadz.com/wp-content/uploads/button.png");}.button:hover {background-position: 0 -57px;.logo {display: block; position: relative; left:400px;top:100px;width: 230px;height: 42px;background: url('http://www.proaudioheadz.com/media/images/logo.png');}.logo:hover {background-position: 0px -57px; Link to comment Share on other sites More sharing options...
thescientist Posted August 12, 2011 Share Posted August 12, 2011 do you realize you are applying :hover to logo the class. in your markup, aren't you using an ID? <img src="http://www.proaudioheadz.com/wp-content/plugins/AnticipatePlugin/images/logo.png" alt="logo" id="logo"/> Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 What you are seeing there is a under construction page provided by a plugin while i develop the site, the css i provided above is for the actual site. Sorry but i cant disable the plugin and make the site live at the moment.. Link to comment Share on other sites More sharing options...
thescientist Posted August 12, 2011 Share Posted August 12, 2011 well, can you post your HTML then? Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Sure thing.. <a href="http://www.proaudioheadz.com" class="logo"></a> Link to comment Share on other sites More sharing options...
thescientist Posted August 12, 2011 Share Posted August 12, 2011 where's the image with the sprite?edit: are you still having problems getting the image to display in the first place? Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 Where is it located? right here..http://www.proaudioheadz.com/media/images/logo.png Link to comment Share on other sites More sharing options...
thescientist Posted August 12, 2011 Share Posted August 12, 2011 weird. I thought I had seen it once, and it had two of them, but then it only showed one. my bad. Link to comment Share on other sites More sharing options...
thescientist Posted August 12, 2011 Share Posted August 12, 2011 nm Link to comment Share on other sites More sharing options...
mistados Posted August 12, 2011 Author Share Posted August 12, 2011 LOL, this is what i mean..its a genuine mystery.. Link to comment Share on other sites More sharing options...
thescientist Posted August 12, 2011 Share Posted August 12, 2011 I think the problem might be that you still need to specify the background image url when create the the hover style. like in the tutorials:http://www.w3schools.com/css/css_image_sprites.asp #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.