Css Help needed to style a <span> -
this code stuck , i can not alter or alter it.
<p> <span class="small"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> </span> <em></em> </p> how style each individual star.gif can assign different position each gif.
i thinking span:first-child route css skills limited.
there multiple ways accomplish this. considering wrote cannot alter of existing html, best way using kid selector. in illustration used fixed positioning, utilize relative if wish. illustration code below, within css assigning nth-child(1) each image (the number selects kid control).
<html> <head> <style type="text/css"> .small img:nth-child(1) { position:fixed; top:20px; left:220px; } .small img:nth-child(2) { position:fixed; top:20px; left:50px; } .small img:nth-child(3) { position:fixed; top:40px; left:20px; } .small img:nth-child(4) { position:fixed; top:120px; left:50px; } .small img:nth-child(5) { position:fixed; top:50px; left:70px; } </style> </head> <body> <p> <span class="small"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif"> </span> <em></em> </p> </body> css
No comments:
Post a Comment