1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Centering the navigation links?

Discussion in 'Web Development' started by kathyk, Nov 28, 2008.

  1. kathyk

    kathyk New Member

    Hi,
    I've read the primer but I only know a little html and I'm new at CSS. I wanted to change the way the navigation looked at the top of a template, so I deleted the code for the image file in style.css and the index page. The navigation now looks good, except for the fact that it's on the left of the page and not horizontally centered. I've tried replacing "center" with "left" in every bit of code in style.css, but that didn't work. If I should add something to the index page, I'm not sure what to add. This is what the code on the index page looks like now:

    <body>

    <div id="wrapper">

    <div id="header">

    </div>

    <div id="nav">

    <a href="http://www.freewebsitetemplates.com">Home</a>

    <a href="http://www.freewebsitetemplates.com">About us</a>

    (Etc . . . more links) Thank you very much!!
     
    kathyk, Nov 28, 2008
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    ishkey, Nov 28, 2008
    #2
  3. kathyk

    kathyk New Member

    Still can't get navigation to center

    I have been all over the Web site you gave me for days, now, and I cannot for the life of me get this to work. I've spent many hours. Would someone be willing to look over this file and tell me why it won't center? The navigation looks centered in one browser but not others, and I don't want it to wrap to the next line. Here's the code:

    html {

    margin: 0;

    padding: 0;

    }

    body {

    background: #FFFFFF url;

    text-align: center;

    color: #000000;

    font: 11px verdana, sans-serif;

    margin: 0px;

    padding: 20px 0px 20px 0px;

    }

    a {

    color: #7B5146;

    font-weight: bold;

    text-decoration: none;

    }

    a:hover {

    color: #000000;

    text-decoration: underline;

    }

    img {
    border: 0px solid #7B5146;
    }


    #wrapper {

    width: 778px;

    margin: auto;

    text-align: left;

    }

    #header p {

    font-size:18px;

    font-style:italic;

    color:#000000;

    font-family:Georgia, "Times New Roman", Times, serif;

    }

    #header p.more {

    padding-right: 22px;

    }

    #header {

    height: 230px;

    background: url(images/KnechtMusic_gray.jpg) no-repeat;
    background-position: top center;

    }

    #header div {

    padding: 0px 0px 0px 0px;

    }

    #header p {

    margin: 0px;

    padding: 0px;

    }

    #header a {

    color:#FFFFFF;

    }

    #nav {

    width: 1400px;

    height:48px;



    background-repeat:no-repeat;

    display:inline;

    float:center;



    }

    #nav a {

    font-size:13px;

    font-style:italic;

    color:#BE8571;

    font-family:Georgia, "Times New Roman", Times, serif;

    padding: 5px 5px 5px 5px;

    display:inline;

    float:center;

    border-right-style: inset;

    border-right-color: #76644f;

    }

    #nav a:hover {

    color:#000000;

    text-decoration:none;

    }

    .lastchild {

    border-right: none 0px !important;

    }

    #body {

    background: url(images/body_bg.gif) repeat-y;

    clear: both;

    width: 100%;

    }

    #body-top {

    background: url(images/body_top.gif) no-repeat;

    }

    #body-bot {

    background: bottom url(images/body_bot.gif) no-repeat;

    padding: 21px 25px 15px 42px;

    }

    #about-box {

    float: left;

    width: 315px;

    }

    #about-box ul {

    margin-left: 8px;

    }

    #express-box {

    float: right;

    width: 327px;

    }

    #foot {

    width: 738px;

    margin-left: 20px;

    background: url(images/foot_bg.gif) repeat-y;

    }

    #foot-top {

    background: url(images/foot_top.jpg) no-repeat;

    }

    #foot-bot {

    background: bottom url(images/foot_bot.gif) no-repeat;

    padding: 13px 21px 12px 28px;

    }

    #what-box {

    float: left;

    width: 332px;

    }

    #what-box img.left {

    margin-left: 10px;

    }

    #what-box ul {

    float: left;

    margin-left: 2px;

    width: 184px;

    }

    #news-box {

    float: right;

    width: 316px;

    }

    #news-box ul {

    float: left;

    margin-left: 2px;

    width: 184px;

    }

    #footer {

    margin: 14px;

    text-align: center;

    }

    h2 {

    margin: 0px;

    padding: 0px 0px 10px 0px;

    font:Arial, Helvetica, sans-serif;

    font-size:20px;

    font-style:italic;



    color:BE8571;

    }

    h2 b{

    color:#BE8571;

    }



    ul {

    margin: 0px;

    padding: 0px;

    }

    li {

    margin: 0px;

    padding: 0px 0px 5px 20px;

    list-style: none;

    background: 0px 3px url(images/bullet.gif) no-repeat;

    }

    p {

    margin-top: 0px;

    margin-bottom: 10px;

    }

    div.narrow-text {

    margin-right: 18px;

    }

    img.left {

    float: left;

    padding-right: 14px;

    padding-bottom: 16px;

    }

    #body p.more {

    padding-top: 6px;

    }

    #news-box p.more {

    padding-top: 0px;

    margin-top: 0px;

    }

    p.more {

    text-align: right;

    }

    .clear {

    clear: both;

    }
     
    kathyk, Dec 5, 2008
    #3
  4. kathyk

    kathyk New Member

    kathyk, Dec 5, 2008
    #4
  5. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    for moving to the top, right, bottom, left - try padding in nav area http://www.w3schools.com/Css/css_padding.asp
    what pink image? looked at the page in both IE7 and EE3, they look the same.
    The moment you said free and copy you just gave away all of your rights.
    Funny how copyright laws work.
     
    ishkey, Dec 10, 2008
    #5