Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a ul with css

    I am still a bit new to coding, but this is for a class project in which Iíve sort of become the main person doing all the coding.

    The assignment was to create a website for a current company (the site is still on the school server for now) and make it rescalable for mobile. Warner Piano | Home

    I know this site has a bunch of problems, but considering itís due this coming Monday Iím not worrying to much about most of the design & code issues. For right now, Iím worried about the social media icons at the bottom when the page is scaled down, as I want them to be horizontally centered.

    The icons are all a part of an unordered list #social. When the page is at ďdesktopĒ size, the CSS for this section is as follows:

    Code:
    #footer {	/*the whole red area, in which the ul is enclosed*/
        color:white;
        background-color:#910e0e;
    	background-image:url('images/banner.png');
        padding:5px;
        width:auto;
    	height:70px;
        clear:both;
    	margin-bottom:-8px;
    	margin-left:-8px;
    	margin-right:-8px;
    }
    
    #social {
    	float:left;
    	list-style-type:none;
    	display:inline;
    	margin-left:-40px;
        margin-top:10px;
    }
    
    #social li {
    	float:left;
    	text-decoration:none;
    	padding:5px;
    }
    
    #social img {
    	width:40px;
    	height:40px;
    	border-radius:10%;
    	display:table;
    }

    When the pageís width becomes 1024px or smaller, I want #social to be horizontally centered, on its own line. Right now, it is its own line but not centered, no matter what width itís at. The CSS becomes this:


    Code:
    #footer { 	/*the whole red area, in which the ul is enclosed*/
        color:white;
        padding:5px;
        width:auto;
    	height:auto;
        clear:both;
    	
    }
    
    #social {
    	float:right;
    	list-style-type:none;
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }
    
    #social li {
    	float:left;
    	text-decoration:none;
    	padding:.5em;
    }
    
    #social img {
    	width:3em;
    	height:3em;
    	border-radius:10%;
    	display:table;
    }
    Iím sure there are a lot of problems with this in general, but I tried making the left & right margins auto, using percentages, and now I donít remember what else. The full site can be found at Warner Piano | Home

    Thank you for your help and let me know if you have any questions!

  • #2
    New to the CF scene
    Join Date
    May 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I messed up a bit on the second bit of code; #social should have
    Code:
    float:none;
    so the whole #social should be:

    Code:
    #social {
    	float:none;
    	list-style-type:none;
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    }


  •  

    LinkBacks (?)

    1. 06-15-2014, 02:46 PM
    2. 05-02-2014, 07:52 PM

    Tags for this Thread

    Posting Permissions

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