Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

kclimson

macrumors newbie
Original poster
Aug 15, 2011
28
0
Canada
So i need to position a list of images 5 px from the right and 5 px from the top, within my area of my website. I don't need it to be 5px and 5 px depending on the windows with, but the div (width) of my website..
I put a relative position of div and absolute on image but its not working.. i got this so faR> PLEASSe help

PHP:
#headSocial {
position: absolute;
	float: right;
	top: -8px;
	right: 11px;
}

#headSocial li{
	display:inline;
}

		#headSocial img { 
		float: right;
		margin-left: 11px;
		-webkit-transition: all .1s;
		-moz-transition: all .1s;
		-o-transition: all .1s;
		transition: all .1s;
		}
					
					
						#headSocial img:hover {
							-webkit-border-radius: 13px;
							-moz-border-radius: 13px;
							-o-border-radius: 13px;
							border-radius: 13px;
						}



and my html

PHP:
<menu>
         <ul id="headSocial">
            <li>
           	   <a href="#">
                  <img src="/Volumes/Macintosh HD 1/Applications/MacView/Images/facebook.png" alt="Facebook" class="Space" id="Facebook" />
               </a>
            </li>
            <li>
               <a href="#">
                  <img src="/Volumes/Macintosh HD 1/Applications/MacView/Images/stumbleupon.png" alt="StumbleUpon" />
               </a>
            </li>
            <li>
               <a href="#">
                  <img src="/Volumes/Macintosh HD 1/Applications/MacView/Images/twitter.png" alt="Twitter" />
               </a>
            </li>
            <li>
               <a href="#">
                  <img src="/Volumes/Macintosh HD 1/Applications/MacView/Images/32x32.png" alt="GooglePlus" />
              </a>
            </li>
             <li>
               <a href="#">
                  <img src="/Volumes/Macintosh HD 1/Applications/MacView/Images/feed-icon_orange-32px.png" alt="RSS" />
               </a>
            </li>
         </ul>
</menu>
 
Last edited by a moderator:
An element with position:absolute; will be positioned in relation to the window or a parent element with a position attribute. If you are trying to keep everything positioned inside a containing div that is set to the width you want the site to be, set that div to position:relative;

Couple other notes:
Absolute positioning is not the best way to achieve this, using the float is the recommended way.
If you are using absolute positioning that float:right; isn't doing anything.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.