• Locked
No replies
Wed, 2014-05-21 21:47
mescas
mescas's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT+3
Joined: 2014-05-17
Posts: 3
Points: 4

The site is using margin auto in order to have compatibility with different resolutions of screen

I have several divs nested in one central div. Those divs have images as links and they are not stuck properly to the left edje all. Here is a piece of code

		<div   style="width:800px; border-style:dashed; border-width: 3px; overflow:hidden; margin-left: auto; margin-right:auto;">
<!--<iframe width="100%" height="100%" scrolling="no" hspace="0" vspace="0" marginheight='0' frameborder='no' src="sa_footer.html"></iframe>-->
 
 
<div style="border-width: 2px; background-color: #00CCFF; border-style: dotted;margin-left:60px; float:left;">
	<div id="icon_mysp"><a class="social1" href="http://myspace.com"><img src="images/MySpace-icon.png" alt="myspace_icon" width="20px" height="20px" align="middle"/> на MySpace</a></div>
	<div id="icon_fb"><a class="social1" href="http://myspace.com"><img src="images/vk-icon.jpg" width="20px" height="20px" alt="VK_icon" align="middle"/>Ми на VK</a></div>	
</div>
<div style="margin-left: 90px;background-color: #FFCC00;float:left;">
 
	<div><a class="social2"  href="http://myspace.com"><img src="images/facebook-icon.png" width="20px" height="20px" alt="FaceBook_icon_copy" align="middle"/>Ми на FaceBook</a></div>
	<div><a class="social2" href="http://myspace.com"><img src="images/topdj_icon.png" alt="TopDJ_icon" width="20px" height="20x" align="middle"/>Ми на TopDJ</a></div>
</div>
<div style="margin-left: 120px; background-color:#CC00FF; float:left;">
	<div><a class="social3" href="http://myspace.com"><img src="images/icon_promodj_64_2.png" alt="PromoDJ_icon" width="20px" height="20px" align="middle"/>Ми на PromoDJ</a></div>
	<div><a class="social3" href="http://myspace.com"><img src="images/soundcloud-icon2.png" width="20px" height="20px" alt="SoundCloud_icon" align="middle"/>Ми на SoundCloud</a></div>
</div>
</div>

To describe the image i get - in each row of the div I have one image showed properly (stuck to the left) and one with a little shift. Not inline styles are here:
   a.social1 {text-decoration:none; color:#FFCC00;}
   a.social2 {text-decoration:none; color:#00FFCC;}
   a.social3 {text-decoration:none; color:#FFCC00;}

Please suppose anything;
The image is on this site: Screenshot and has 3 boxes with images for code in the end of the page

Top
Tags: