Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Nov 2011
    Posts
    1
    Member #
    29853
    I usually outsource web design for my clients but I've recently built my very first site using Adobe Dreamweaver. The page in question is http://www.pawsforthought.co.za/Contact%20Us.html

    Everything seems to work well except for my social networking icons on the "Contact Us" page. They shift to the far right in certain browser versions i.e.

    IE 6.0
    IE 7.0
    IE 8.0 - in the right place, but has blue link boxes around the icons
    IE 9.0
    (all Windows OS)

    Safari 5.1 (MAC OS)

    It's all correctly placed in all Firefox versions. I used BrowserLab and browsershots.org

    It is obviously something I've done wrong with the CSS, but I can't figure out how to remedy it. Could you also let me know if you spot any other issues? And how does it look?

    Any help will be HUGELY appreciated !

  2.  

  3. #2
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    Its a good start for a first try! I'd really like to commend you on your semantics, although not perfect you are doing a pretty good job!

    Viewing the page in firefox for myself I cannot see all of the social media icons they appear to be shifter too far to the right of the center content box. What I would suggest is created a div class, ie:

    .social-media { width: #; height: #; }

    and use this as a container class to wrap all of the icons inside, ie:

    <div class="social-media">
    <div id="facebook"><a href="#"><img src="#"></a></div>
    <div id="twitter"><a href="#"><img src="#"></a></div>
    <div id="youtube"><a href="#"><img src="#"></a></div>
    <div id="blogger><a href="#"><img src="#"></a></div>
    </div>

    This way you can manipulate the social media box only and get the positioning perfect with a more simplified approach instead of using margin-right values for the individual icons. Let me know if you need anymore help with the matter, although I think you'll be able to use this. Keep on rockin!

  4. #3
    Senior Member MHometchko's Avatar
    Join Date
    Oct 2011
    Posts
    106
    Member #
    29723
    Liked
    19 times
    Also just a side thought:

    I suggest applying a style to the images on the inner pages for the images to make them fit into the rounded corners style you have with the other elements.

    For testing purposes give your images the following style:

    border-radius: 5px 5px 5px 5px;

    Just a thought

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Your site's down right now.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by MHometchko, post: 223630
    Its a good start for a first try! I'd really like to commend you on your semantics, although not perfect you are doing a pretty good job!

    Viewing the page in firefox for myself I cannot see all of the social media icons they appear to be shifter too far to the right of the center content box. What I would suggest is created a div class, ie:

    .social-media { width: #; height: #; }

    and use this as a container class to wrap all of the icons inside, ie:

    <div class="social-media">
    <div id="facebook"><a href="#"><img src="#"></a></div>
    <div id="twitter"><a href="#"><img src="#"></a></div>
    <div id="youtube"><a href="#"><img src="#"></a></div>
    <div id="blogger><a href="#"><img src="#"></a></div>
    </div>
    I agree with MH, its a very good site, well done, keep it up

    Also to add to the css MH said. You will need to absolute position it as you dont have seperate container box's around the content.
    so the code will be
    Code:
    .social-media
    {
    min-width:250px;<!--change this accordingly-->
    width:auto;
    height:auto;<!--the social content should snap the box to the correct size-->
    position:absolute;<!--this makes the boxs position absolute on the page, but will be in the top left corner-->
    top:400px;<!-- change this accordingly to the correct location-->
    left:500px;<!--again change this accordinly to fit the correct location-->
    background-color:blue;<!-- do this while troubleshooting, its better than use border radius-->
    }
    That should help you position the content in the correct location for all browsers.

    P.S: Something i noticed. Dont have Capitals or spaces in .html files. Currently your contact page is Contact Us.html, it can cause no end of trouble for you later on. So i suggest changing it to contact.html instead. You might want to look over all your pages and make sure that they are single worded .html without spaces

    Hope this helps

    -m3
    MHometchko likes this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

how to center social media icons on css

,

positioning social media icons correct css

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:27 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com