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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation links not centering in nav bar div

    id really like my links centered in my nav bar. they won't budge!

    here's what it looks like:



    html:

    <body>

    <div id="wrapper">
    <div id="header">
    </div>
    <div id="navbg">
    <div id="navtext">
    <a href="http://www.freewebsitetemplates.com">Home</a>
    <a href="http://www.freewebsitetemplates.com">About us</a>
    <a href="http://www.freewebsitetemplates.com">Services</a>
    <a class="lastchild" href="http://www.freewebsitetemplates.com">Contact us</a>
    </div>
    </div>
    css:

    }
    #wrapper {
    width: 778px;
    margin: auto;
    text-align: left;
    }
    #navbg {
    width:760px;
    background-image:url(images/nav.gif);
    background-repeat:no-repeat;
    margin-left:20px;
    display:inline;
    float:left;

    }
    #navtext {
    margin-left:200px;
    display:inline;
    text-align:center;
    }
    #navtext a {
    font-size:18px;
    font-style:italic;
    color:#260403;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin: 12px 0px 10px 0px;
    padding: 0px 20px 0px 20px;
    display:inline;
    float:left;
    border-right-width: 2px;
    border-right-style: inset;
    border-right-color: #76644f;
    }
    #nav a:hover {
    color:#862e06;
    text-decoration:none;
    }
    .lastchild {
    border-right: none 0px !important;
    }
    thanks in advance for your help- i swear ive tried everything!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jovialnazgul,
    Several centered menu examples here - http://nopeople.com/design/CSS%20tips/index.html

    You have #navbg floated but it's a full width div. Really only need to float things when you want to put something else beside them.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I hesitate to start removing divs because I don't know what you're planning for them later on in development. If #navtext and #navbg aren't going to have a specific purpose then it's just divitis and they should be deleted.
    So, without messing with your markup too much, give this a try... just for starters
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #wrapper {
    width: 778px;
    margin: 20px auto 50px;
    text-align: left;
    background: #f00;
    }
    #navbg {
    	width: 760px;
    margin: 0 auto;
    	background: #ccc url(images/nav.gif) no-repeat;
    	overflow: auto;
    }
    #navtext {
    margin-left:200px;
    display:inline;
    text-align:center;
    }
    #navtext a {
    font-size:18px;
    font-style:italic;
    color:#260403;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin: 12px 0px 10px 0px;
    padding: 0px 20px 0px 20px;
    display:inline-block; /*instead of float:left;*/
    border-right-width: 2px;
    border-right-style: inset;
    border-right-color: #76644f;
    }
    #nav a:hover {
    color:#862e06;
    text-decoration:none;
    }
    .lastchild {
    border-right: none 0px !important;
    }
    
    </style>
    </head>
    <body>
        <div id="container">
            <div id="wrapper">
                <div id="navbg">
                    <div id="navtext">
                        <a href="http://www.freewebsitetemplates.com">Home</a>
                        <a href="http://www.freewebsitetemplates.com">About us</a>
                        <a href="http://www.freewebsitetemplates.com">Services</a>
                        <a class="lastchild" href="http://www.freewebsitetemplates.com">Contact us</a>
                    <!--end navtext--></div>
                <!--end navbg--></div>
            <!--end wrapper--></div> 
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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