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,015
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:
CSS seems a bit messy but you could try adding "float:left;" + "clear:none;". That will probably save your problem. You could also try positioning them relatively with something like "position:relative;" but that depends on how the site is set up.
 
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:
1) Duplicated CSS information is usually a case for a class. Then use ID's to change just the backgrounds. Don't have it all twice.

2) You are changing an inline element <a> into a block element which is why your links were displaying one above the other. If you left them as inline elements they would have displayed side by side, without having to use a float. That said, you are probably using block to change the link properties because you don't actually have an image in the html, so you may try using inline-block and no float. Up to you.
 
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
 
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');
			}
		</style>
		<a class="smallbutton" id="FlickRButton" href="http://www.flickr.com/photos/robbiekhan/" target="_blank">Leaf</a> 
				
		<a class="smallbutton" id="daButton" href="http://mrk.deviantart.com/" target="_blank">Leaf</a>
	</p>

Much more manageable and readable code. Just good practice really.
 
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:
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.
 
Ah yes, sorry mrk, not thinking straight when I wrote my CSS.

All of Trip's advice is worthwhile and the code is even better, although I would have had social as a class, not an id.
 
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 shouldn't need to add '-image'. background is shorthand and should work just fine.

IE:

background-image: url('image.jpg');
background-repeat: no-repeat;
background-color: #fff;
background-position: 0 100px;

can be done as:

background: url('image.jpg') no-repeat 0 100px #fff;
 
Tripnologist said:
You shouldn't need to add '-image'. background is shorthand and should work just fine.
Click to expand...

If you are working with different background properties though and use the all in one tag, does it not default your other properties when not specified?
 
It's no different than using individual background properties. Whatever you don't specify goes to default anyway.

IE:
background: url('image.jpg') no-repeat #fff;

No background position in there so it defaults to top left.

Is that what you mean or am I lost somewhere?
 
you can also specify multiple classes in an element, fyi..

Code: 
.inline { display: inline; }
.big { height: 500px; width: 500px; }
.coloured { background-color: #f00; }
Code: 
<div class="inline big coloured">Foo</div>
 
You still have that cursed p tag in there though. I see you're using it to center the links. You could just remove it completely and then add #social { text-align: center;} to your css.

If you actually get into html/css, you'll learn that less is more and un-needed markup is a waste.
 
You must log in or register to reply here.
Back
Top Bottom