Css hulp nodig :)

Howdie,

ik zit een beetje te sukkelen met css en hoopte op jullie hulp/advies.
Het zit namelijk zo, ik probeer op mijn portfolio-page social-media buttons te plaatsen.
Deze zouden clickable moeten zijn, en vanaf je erover hovert, zouden deze a.d.h.v een pijltje moeten zeggen over welk social-media het gaat.
Het is alleen iets moeilijker dan ik het hier beschrijf.

Daarom meteen ook mijn images om het probleem te verduidelijken:

Nu, wanneer er niet over de icoontjes gehoverd wordt, zouden er geen pijlen mogen verschijnen.
Ik ken helaas css niet goed genoeg, en kwam alleen op een redelijk unclean JS oplossing.

Ik denk dat ik sowieso de facebook en twitter logo's al aparte files moet maken.
en dan wou ik de onderste lijn, waar zowel, (pijl +facebook) als (pijl+twitter) komt als 1 image bezien.

maar eerlijk gezegd weet ik geen goede simpele oplosing.

Elke hulp is welkom

Quitta

Maar hoe zou ik mijn images dan moeten zetten? want

<img src="facebookbutton.png" alt="fb" class="fb-icon" /><img src="ftwitterbutton.png" alt="fb" class="fb-icon" />

zou dat dan geen problemen opleveren ivm dat die pijlen doorlopen in het veld van de 2e button.

ik kan het niet goed uitleggen, ik weet het Maar ik hoop dat je het begrijpt.

tot nu toe zit ik vast met dit:
http://www.webdevout.net/test?01n

Ik heb de oplossing gevonden via:

#social-media{
		display:table; /*Display table causes a block-like width calculation, which allows the next line to work*/
		margin:0 auto; /*Horizontally center the #social-media element, by setting the top and bottom margin to 0 and the left and right margin to "auto"*/
		position:relative;
		left:200px;
	}


	#social-media > div{
		position:relative; /* Create a new offset context, starting with any div that is a direct descendant of #social-media see http://www.barelyfitz.com/screencast/html-training/css/positioning/ */
	}
	#social-media > div,
	#social-media .icon {
  	 	display: block;
  	 	float: left;
	}


	#social-media .tooltip {
  	 	display: none;
  	 	position:absolute; /*it' says absolute, but (grumble) it's relative to #social-media > div's offset context */
  	 	top:100%; /*this means position the tooltip 100% of the height of #social-media from the top of #social-media */
  	 	left:50%;
	}


	#social-media .icon,
	#social-media .icon:hover + .tooltip{
			display: block;

<div id="social-media">
			<div class="fb">
				<div class="icon"><img src="fbicon.png" alt="fb"/></div>
				<div class="tooltip"><img src="facebooktext.png"></div>
			</div>
			<div class="twitter">
				<div class="icon"><img src="twittericon.png" alt="twitter" class=".twitter-icon"/></div>
				<div class="tooltip"><img src="twittertext.png"></div>
			</div>
		</div>

topic mag dicht