Quick bit of CSS help please!

  • Thread starter Thread starter mrk
  • Start date Start date

mrk

mrk

mrk

Man of Honour
Joined
18 Oct 2002
Posts
105,019
Location
South Coast
I have on my site 4 buttons that allow visitors to follow my Facebook/FlickR etc. It looks like this at present:

www.robbiekhan.co.uk

Now I wanted to give mouse hover effects to the image buttons and I have done this using some simple CSS, 2 button example:


Code: 
	<p align="center">					
		<style type="text/css">
			.FlickRButton { 
							display: block;
							width: 58px;
							height: 58px;
							background: url('images/button_fr.png')
							bottom; text-indent: -99999px;
			}
			.FlickRButton:hover { 
							background-position: 0 0; background-color: transparent; border-style: none;
			}
		</style>
		<a class="FlickRButton" href="http://www.flickr.com/photos/robbiekhan/" target="_blank">Leaf</a> 
				
		<style type="text/css">
			.dAButton { 
							display: block;
							width: 58px;
							height: 58px;
							background: url('images/button_da.png')
							bottom; text-indent: -99999px;
			}
			.dAButton:hover { 
							background-position: 0 0; background-color: transparent; border-style: none;
			}
		</style>
		<a class="dAButton" href="http://mrk.deviantart.com/" target="_blank">Leaf</a>
	</p>


But when viewing in any browser it looks like this:

css.png


As you can see the buttons are not sitting on the same line but on a new line, hover effect works perfectly however which is great because it means the code works I just need all the buttons sitting on the same line!

If anyone can help that would be most awesome :)


Edit*

I solved it I guess after some Googling, for anyone interested I added float: left; to the CSS for each button and it sorted itself out - this makes all the images left aligned on the page which actually looks more logical than centre aligned and it's all good!
 
Last edited:
Cheers theforce! I actually came across float: left; (see edit) which seems to have solved it as an alternative method to centre alignment.

For future reference would clear:none; make it so that the <p> alignment I choose is followed by the CSS so if my paragraph was set to centre the CSS would keep this in mind (and thus solving my initial question)?

I used CSS in this manner because the images themselves are being cropped to display the unhovered/hovered area only - a bit different to the standard hovered image + unhovered image via html/js :p

button_fr.png
button_da.png
button_twit.png
button_fb.png


It also saves on the small delay for the hovered image to load which the other methods have, noticeable for those on slower connections! I don't know why the forum's code tag messes it up visually, looks fine on the editor!

css2.png
 
Last edited:
Hmm yep that that would also work too - I just had a secondary thought, I guess it would work using tables too.

I'd still have to have 4 instances of the CSS code though as each button image is unique so even if I put it as a class at the top and called it using IDs in the body then I'd still need 4 class instances in the head no?

I don't want to over complicate it really though and the simple float:left; seems to have solved the issue for now but certainly for other pages when this code gets added I will be able to use the other methods :D
 
Ah I see, I think I may have misunderstood your earlier reference to id and class - I was thinking of something else!

I will work that in many thanks!

EDIT*

Hmm I chopped in the above code but only the first 2 buttons show and only show in the hovered state so no mouseover effect works.

The code complete is:

Code: 
	<p align="center">					
		<style type="text/css">
			.smallbutton { 
				display: inline-block;
				width: 58px;
				height: 58px;
				bottom; text-indent: -99999px;
			}
			.smallbutton:hover { 
				background-position: 0 0; 
				background-color: transparent; 
				border-style: none;
			}
			#flickRButton {
				background-image: url('images/button_fr.png');
			}
			#dAButton {
				background-image: url('images/button_da.png');
			#twitButton {
				background-image: url('images/button_twit.png');
			#fbButton {
				background-image: url('images/button_fb.png');				
			}
		</style>
		<a class="smallbutton" id="flickRButton" href="http://www.flickr.com/photos/robbiekhan/" target="_blank" title="FlickR">FlickR</a> 
		<a class="smallbutton" id="daButton" href="http://mrk.deviantart.com/" target="_blank" title="DeviantART">DeviantART</a>
		<a class="smallbutton" id="fbButton" href="http://www.facebook.com/pages/Robbie-Khan-Photography/299209845344" target="_blank" title="Facebook">Facebook</a>
		<a class="smallbutton" id="twitButton" href="http://twitter.com/robbiekhan" target="_blank" title="Twitter">Twitter</a>		
	</p>

It's not a major issue as the live page has the code that works above, but like you say it would be good practice to have it nice and clean!
 
Last edited:
Tripnologist said:
tbh, if you're going for proper, your social network icons do not consist of a paragraph so should not be in p tags.

To save file size, your icons should always have the default state at the top and the hover afterwards. It saves you having to declare the background position as it defaults to top left.

The following should work fine to replace your p tag with provided you switch the images around. (The overflow: hidden on the links makes the outline in FF constrain to the dimensions of the link only so it doesn't include the text indent and show the outline going all the way across your page)

Code: 
<div id="social">
	<style type="text/css">
		#social a { display: inline-block; width: 58px; height: 58px; text-indent: -99999px; overflow: hidden;}
			#social #flickRButton {background: url('images/button_fr.png');}
			#social #dAButton { background: url('images/button_da.png');}
			#social #twitButton { background: url('images/button_twit.png');}
			#social #fbButton { background-image: url('images/button_fb.png');}
		#social a:hover { background-position: bottom left;}
	</style>	
	<a id="flickRButton" href="http://www.flickr.com/photos/robbiekhan/" target="_blank" title="FlickR">FlickR</a> 
	<a id="daButton" href="http://mrk.deviantart.com/" target="_blank" title="DeviantART">DeviantART</a>
	<a id="fbButton" href="http://www.facebook.com/pages/Robbie-Khan-Photography/299209845344" target="_blank" title="Facebook">Facebook</a>
	<a id="twitButton" href="http://twitter.com/robbiekhan" target="_blank" title="Twitter">Twitter</a>		
</div>

You really really really should be using an external style sheet and not have it all inline. Also, you should look into using h tags if only for SEO purposes.
Click to expand...

Thank you very much! I just had to add "-image" to the background in the style tags for each button and it worked after I flipped the buttons over in Photoshop - awesome stuff and shrunk the code by about 50% too :D

Now to just make the buttons higher quality as the edges are a bit sharp.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom