Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member
    Join Date
    Mar 2004
    Posts
    241
    Member #
    5465
    Hi guys, I know that centering DIVS are something covered quite extensively on the web, but for some reason I'm having trouble centering my nav bar DIV. To start off, I'm making a super simple fixed width layout site.

    Links to the page and stylesheet are:
    http://www.mime.eng.utoledo.edu/rainsoft/03/index.htm
    http://www.mime.eng.utoledo.edu/rain...stylesheet.css

    I have three other DIVS that are centered using a simple container DIV as follows:

    Code:
    div.centeringbox {
      text-align: center;
    }
    This has let me align my three other divs on the page. However, even if I put the container around my nav bar, it won't center, since then, I have added:

    Code:
    body {
      text-align: center;
    }
    
    #navcontainer	{
    	margin-right: auto;
    	margin-left: auto;
    	text-align: center;
    	}
    I know it's poor form, but I've tried putting the auto margins and centered text on all divs (as you'll see) and for some reason I cannot get the damn thing to center. I'm sure the fix is something easy and dumb, but I just cannot find it.

    Anyways, any help is greatly appreciated.

    p.s. Don't criticize the flash header, it's a 10 min filler and the guy wants a flash banner...

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Have you set a width on the item you're trying to center? If you don't and it's a block element, it'll be 100% and always be in the same position.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member
    Join Date
    Mar 2004
    Posts
    241
    Member #
    5465
    Yes, I have correctly set the width, and it does show up correctly, but just not centered.

  5. #4
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Try using:
    Code:
    margin: 0 auto;
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That won't work either. Your navigation is based on elements that are floated left, and are exempt from all of these rules. You'll want to put that stuff inside another container (outside the ul), center that container, give *it* the appropriate width, and then you should be better off.

  7. #6
    Senior Member
    Join Date
    Mar 2004
    Posts
    241
    Member #
    5465
    Thank you very much Shadow, that seemed to work perfectly, I should have seen that. However, now I have another problem. The page displays perfectly in Firefox, however, in Internet Explorer, the last link on the navigation bar doesn't "fit" on the line, so it's bumped down to the next line.

    If you recall, in order to center the navigation bar, I enclosed it within an outside container. The problem before was that I did not set the size of that container. Now, I have set the size to 600px, and each of the 5 links are 120px wide, with a 1px left border.

    But, in order for the links to show on one line in IE, the container must be 640px wide or larger. Or, the size of the links must be smaller than 113px. Again, with the container 600px wide and the links 120px wide, this displays perfectly in Firefox with the navigation bar fitting perfectly underneath the 600px wide DIV above it.

    The website has changed that's hosting the files as the server has crashed, the new links are:
    http://www.eng.utoledo.edu/mime/mime...t/04/index.htm
    http://www.eng.utoledo.edu/mime/mime...stylesheet.css

    or the pertinent code is:
    Code:
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    
    <li><a href="#">Item four</a></li>
    <li id="last"><a href="#">Item five</a></li>
    </ul>
    </div>
    
    #navcontainer	{
    	position: relative;
    	width: 600px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-bottom: 2em;
    	padding: 0;
    	height: 20px
    	text-align: center;
    	}
    
    #navcontainer ul	{
    	border: 0;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	padding: 0;
    	list-style-type: none;
    	text-align: center;
    	}
    
    #navcontainer ul li	{
    	display: block;
    	width: 120px;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	float: left;
    	text-align: center;
    	padding: 0;
    	text-align: center;
    	}
    
    #navcontainer ul li a	{
    	background: #fff;
    	height: 18px;
    	border-left: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 0;
    	color: black;
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	font-family: verdana, lucida, sans-serif;
    	font-size: 10pt;
    	}
    
    #navcontainer ul li a:hover	{
    	color: black;
    	background: #7AE4FF;
    	}
    
    #navcontainer a:active	{
    	background-color: #c60;
    	color: #fff;
    	}
    
    #navcontainer li#active a	{
    	background: #00FFB3;
    	color: black;
    	}
    #navcontainer li#last a 	{
    	border-right: 1px solid black
    	}
    thanks a lot again guys, i really appreciate it

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Is there a problem with resizing either the links or the container?

  9. #8
    Senior Member
    Join Date
    Mar 2004
    Posts
    241
    Member #
    5465
    Well yes, if the container is made larger, then you can image that the links will "slide" to the left and thus be off-center. Think if I add 120px to the container, then the code will think the container is one entire link larger than it is. Since the links are floated left, then rather than the middle of the third link being centered, the left edge of the fourth link will be centered.

    If you don't get that, I can make a quick sketch.

    Likewise if I make the links smaller, then they don't fill the whole 600px and though they are flush on the left, they aren't on the right.

  10. #9
    Senior Member paintingtheweb's Avatar
    Join Date
    Jul 2007
    Location
    Las Vegas
    Posts
    128
    Member #
    15503
    ok - a few things. First off - you need to put in a doc type in your htm document - it might have saved you a bit of trouble before with trying to center in IE. I went through your code and changed a few things that should work for you now.

    Secondly - as opposed to putting a "centering containter" on every div you want centered - just put a wrapper around the entire site and center the wrapper. I've shown you below.

    Thirdly - now that you have you wrapper - set the width of that to 600px. Reason being is that instead of setting the width of the li's like you were before - just set them to 20% and they'll automatically fill up for you. No need to try and play with absolute numbers.

    I've made a few other changes as well - just to clean up the code a little bit.

    css document:
    Code:
    body    {
        margin: 0;
        padding: 0;
        }
    
    #wrapper {
        width: 600px;
        text-align: center;
        margin: 0 auto;
        }
    
    #navcontainer    {
        width: 100%;
        margin: 0;
        padding: 0;
        height: 20px;
        text-align: center;
        }
    
    #navcontainer ul    {
        border: 0;
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        text-align: center;
        }
    
    #navcontainer ul li    {    
        width: 20%;
        margin: 0 auto;
        float: left;
        text-align: center;
        padding: 0;
        }
    
    #navcontainer ul li a    {
        background: #fff;
        height: 18px;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        padding: 0;
        color: black;
        text-decoration: none;
        display: block;
        text-align: center;
        font-family: verdana, lucida, sans-serif;
        font-size: 10pt;
        }
    
    #navcontainer ul li a:hover    {
        color: black;
        background: #7AE4FF;
        }
    
    #navcontainer a:active    {
        background-color: #c60;
        color: #fff;
        }
    
    #navcontainer li#active a    {
        background: #00FFB3;
        color: black;
        }
    #navcontainer li#last a     {
        border-right: 1px solid black
        }
    div.topbox {
        height: 180px;
        width: 600px;
        border: 1px solid black;
        margin: 0 auto;
        text-align: left;
        }
    
    div.middlebox {
        position: absolute;
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        position: relative;
        height: 500px;
        border: 1px solid black;
        background: white;
        font-family: Verdana, Arial ;
        font-size: 8pt;
    }
    
        
    div.bottombox {
        position: relative;
        height: 20px;
        width: 600px;
        border: 1px solid black;
        margin-left: auto;
        margin-right: auto;
        font-family: Verdana, Arial ;
        font-size: 8pt;
        text-align: left;
        }
    html doc:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Rainsoft Toledo</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="all" />
    <script language="JScript" type="text/jscript" src="activateActiveX_onload.js"></script>
    </head>
    
    <body>
        <div id="wrapper">
            <div class="topbox">
                <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="600" height="180">
                    <param name="movie" value="header_01.swf">
                    <param name="quality" value="High">
                    <embed src="header_01.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="600" height="180"></object>
            </div>
            <div id="navcontainer">
                <ul id="navlist">
                    <li id="active"><a href="#" id="current">Item one</a></li>
                    <li><a href="#">Item two</a></li>
                    <li><a href="#">Item three</a></li>
                    <li><a href="#">Item four</a></li>
                    <li id="last"><a href="#">Item five</a></li>
                </ul>
            </div>
            <div class="middlebox">
                Welcome to the Rainsoft Toledo Website
            </div>
            <div class="bottombox">
                link 1 link 2
            </div>
        </div>
    </body>
    </html>

  11. #10
    Senior Member
    Join Date
    Mar 2004
    Posts
    241
    Member #
    5465
    Thank you very much, it works beautifully and makes perfect sense.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com