WordPress.org

Support

Support » How-To and Troubleshooting » What's wrong with my css code?

What's wrong with my css code?

  • dbu321
    Member

    @dbu321

    I’m trying to get my menu bar to center and I can’t seem to decipher the code… I’ve literally been at this for hours now and can’t seem to find a solution.

    The page is located here: goodrichresidential.com and you will be able to notice the menu right away.

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #f;
    	margin: 0 auto;
    	width: 925px;
    	display: block;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin: 0 auto;
    	width: 600px;
    	padding-left: 80px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	display:block;
    	margin: 0 auto;
    	padding-right: 80px;
    	width: 600px;

    Can anyone help?

    Thanks,

    Dan

Viewing 6 replies - 1 through 6 (of 6 total)
  • jkrayer
    Member

    @jkrayer

    It looks to me like you need to increase your width to 660px and remove the left padding of 80px.

    dbu321
    Member

    @dbu321

    Hmm… I just tried that no luck. Maybe I didn’t include all the code necessary to fix it. Maybe this is enough to figure it out?

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #f;
    	margin: 0 auto;
    	width: 925px;
    	display: block;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin: 0 auto;
    	width: 660px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	display:block;
    	margin: 0 auto;
    	padding-right: 80px;
    	width: 660px;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }
    
    #access a {
    	display:block;
    	color:#584D4D;
    	font-family:'Baskerville','Times New Roman',serif;
    	text-decoration:none;
    	/*line-height:38px;*/
        padding:0px 15px;
        margin-left: 4px;
        /*font-weight:bold;*/
    }

    Dan

    jkrayer
    Member

    @jkrayer

    I just looked at your site and the nav appears to be correct.

    dbu321
    Member

    @dbu321

    So I’ve looked at the website in dfferen’t browsers… Safari appears to be the only one displaying the menu incorrectly. Here is the code I’m using currently:

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #f;
    	margin: 0 auto;
    	width: 925px;
    	display: block;
    }
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin: 0 auto;
    	width: 700px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	display:block;
    	margin: 0 auto;
    	width: 620px;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	position: relative;
    }

    Thanks

    Dan

    jkrayer
    Member

    @jkrayer

    Safari seems to get everything one one line when div.menu ul {width: 650px; }

    WPyogi
    Forum Moderator

    @wpyogi

    You have an inline style of “float: left” assigned to #access which is likely messing it up. It should center using #access with an assigned width (must be less than containing element width and margin: 0 auto;

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘What's wrong with my css code?’ is closed to new replies.