I'm having a small problem with positioning.

Discussion in 'Web Design and Development' started by kclimson, Oct 2, 2011.

  1. kclimson, Oct 2, 2011
    Last edited by a moderator: Oct 2, 2011

    kclimson macrumors newbie

    kclimson

    Joined:
    Aug 15, 2011
    Location:
    Canada
    #1
    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 {
    positionabsolute;
        
    floatright;
        
    top: -8px;
        
    right11px;
    }

    #headSocial li{
        
    display:inline;
    }

            
    #headSocial img { 
            
    floatright;
            
    margin-left11px;
            -
    webkit-transitionall .1s;
            -
    moz-transitionall .1s;
            -
    o-transitionall .1s;
            
    transitionall .1s;
            }
                        
                        
                            
    #headSocial img:hover {
                                
    -webkit-border-radius13px;
                                -
    moz-border-radius13px;
                                -
    o-border-radius13px;
                                
    border-radius13px;
                            }


    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>
     
  2. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #2
    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.
     

Share This Page