WordPress.org

Ready to get started?Download WordPress

Forums

What's wrong with my css code? (7 posts)

  1. dbu321
    Member
    Posted 1 year ago #

    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

  2. jkrayer
    Member
    Posted 1 year ago #

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

  3. dbu321
    Member
    Posted 1 year ago #

    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

  4. jkrayer
    Member
    Posted 1 year ago #

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

  5. dbu321
    Member
    Posted 1 year ago #

    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

  6. jkrayer
    Member
    Posted 1 year ago #

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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;

Topic Closed

This topic has been closed to new replies.

About this Topic