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
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    moving navigation bar

    Hello, I'm trying to ove my navigation bar to the center and can't get it to move. Can someone help please?

    Code:
    ul#css3menu1,ul#css3menu1 ul{
    	margin:0;list-style:none;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
    ul#css3menu1 ul{
    	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#00546b;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;}
    ul#css3menu1 li:hover>*{
    	display:block;}
    ul#css3menu1 li:hover{
    	position:relative;}
    ul#css3menu1 ul ul{
    	position:absolute;left:100%;top:0;}
    ul#css3menu1{
    	padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
    ul#css3menu1 li{
    	display:block;white-space:nowrap;font-size:0;float:left;}
    ul#css3menu1>li,ul#css3menu1 li{
    	margin:0 0 0 1px;}
    ul#css3menu1 ul>li{
    	margin:1px 0 0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
    	outline-style:none;}
    ul#css3menu1 a,ul#css3menu1 a.pressed{
    	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;}
    ul#css3menu1 ul li{
    	float:none;margin:9px 0 0;}
    ul#css3menu1 ul a{
    	text-align:left;padding:8px 0 0 0;background-color:#00546b;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;font:13px Arial;color:#ffffff;text-decoration:none;}
    ul#css3menu1 li:hover>a{
    	background-color:#00c4ff;border-style:none;font:bold 12px Arial;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
    ul#css3menu1 img{
    	border:none;vertical-align:middle;margin-right:10px;}
    ul#css3menu1 img.over{
    	display:none;}
    ul#css3menu1 li:hover > a img.def{
    	display:none;}
    ul#css3menu1 li:hover > a img.over{
    	display:inline;}
    ul#css3menu1 li a.pressed img.over{
    	display:inline;}
    ul#css3menu1 li a.pressed img.def{
    	display:none;}
    ul#css3menu1 span{
    	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
    ul#css3menu1 a{
    	padding:10px;background-color:#00546b;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;color:#cccccc;text-decoration:none;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    	background-color:#00c4ff;background-image:url("mainbk.png");background-position:0 100px;border-style:none;color:#ffffff;text-decoration:none;}
    ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
    	background-color:#0080a3;background-image:none;border-style:solid;border-color:#262626;font:13px Arial;color:#ffffff;text-decoration:none;}
    ul#css3menu1 li.topfirst>a{
    	height:16px;line-height:16px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
    ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{
    	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
    ul#css3menu1 li.topmenu>a{
    	height:16px;line-height:16px;text-shadow:#000000 0px -1px 1px;}
    ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{
    	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
    ul#css3menu1 li.toplast>a{
    	height:16px;line-height:16px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
    ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{
    	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
    ul#css3menu1 ._>li>a{
    	padding:0;}
    ul#css3menu1 li.subfirst>a{
    	border-width:0;border-style:none;padding:0;}
    ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst>a.pressed{
    	border-style:none;}

    Code:
    <div align="center">
    
    <div align="center"><center><ul id="css3menu1" class="topmenu">
    	<li class="topfirst"><a href="index.html" title="Home" style="width:120px;height:16px;line-height:16px;">Home</a></li>
    	<li class="topmenu"><a  style="width:120px;height:16px;line-height:16px;"><span>Destinations</span></a>
    	<ul>
    		<li class="subfirst"><a href="#" title="North America">North America</a>
                <ul>
    						<li><a href="#">Canada</a></li>
    						<li><a href="#">Cuba</a></li>
                            <li><a href="#">Mexico</a></li>
                            <li><a href="#">Suriname</a></li>
                            <li><a href="#">United States</a></li>
    					</ul>
    				</li>
    		<li class="subfirst"><a href="#" title="Central America">Central America</a>
                        <ul>
    						<li><a href="#">Costa Rica</a></li>
    						<li><a href="#">EI Salvador</a></li>
                            <li><a href="#">Guatemala</a></li>
                            <li><a href="#">Honduras</a></li>
    						<li><a href="#">Nicaragua</a></li>
                            <li><a href="#">Panama</a></li>
                            <li><a href="#">Turks And Caicos Islands</a></li>
    					</ul>
    				</li>
    		<li class="subfirst"><a href="#" title="South America">South America</a>
            <ul>
    			<li><a href="#">Argentina</a></li>
    			<li><a href="#">Bolivia</a></li>
                <li><a href="#">Brazil</a></li>
                <li><a href="#">Chile</a></li>
    		    <li><a href="#">Columbia</a></li>
                <li><a href="#">Ecuador</a></li>
                <li><a href="#">French Guiana</a></li>
    			<li><a href="#">Guyana</a></li>
                <li><a href="#">Paraguay</a></li>
                <li><a href="#">Peru</a></li>
    			<li><a href="#">Uruguay</a></li>
                <li><a href="#">Venezuela</a></li>			
    			</ul>			
    				</li>		
            <li><a href="#" title="Patio's">Europe</a></li>
            <li><a href="#" title="Patio's">Caribbean</a></li>
            <li><a href="#" title="Patio's">Africa</a></li>
            <li><a href="#" title="Patio's">Middle East</a></li>
            <li><a href="#" title="Patio's">Australia</a></li>
            <li><a href="#" title="Patio's">Asia</a></li>
        </ul>
    	</li>
    	<li class="topmenu"><a  style="width:120px;height:16px;line-height:16px;"><span>Resources</span></a></li>
    	<li class="topmenu"><a  style="width:120px;height:16px;line-height:16px;"><span>Comments</span></a></li>
        <li class="topfirst"><a href="index.html.html" title="Contact" style="width:120px;height:16px;line-height:16px;">Contact</a></li>
    
        </ul>
    	</li>
        
    </ul></center>
    </div>

  • #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 charisma44,
    Your <div align="center"> 's and <center> are not helping you as that is deprecated code and should not be used.

    Also, in your CSS, you float that menu left.

    Try this approach instead:
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    Something like this -
    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 {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    ul#css3menu1, ul#css3menu1 ul {
    	width: 705px;
    	margin: 0 auto;
    	list-style: none;
    	background-image: url("mainbk.png");
    	background-repeat: repeat;
    	border-width: 0px;
    	border-style: solid;
    	border-color: #999999;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    }
    ul#css3menu1 ul {
    	display: none;
    	position: absolute;
    	left: 0;
    	top: 100%;
    	-moz-box-shadow: 0.7px 0.7px 1px #777777;
    	-webkit-box-shadow: 0.7px 0.7px 1px #777777;
    	box-shadow: 0.7px 0.7px 1px #777777;
    	padding: 0 9px 9px;
    	background-color: #00546b;
    	background-image: none;
    	border-width: 1px;
    	border-radius: 4px;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-style: solid;
    	border-color: #5A5E60;
    }
    ul#css3menu1 li:hover>* { display: block; }
    ul#css3menu1 li:hover { position: relative; }
    ul#css3menu1 ul ul {
    	position: absolute;
    	left: 100%;
    	top: 0;
    }
    ul#css3menu1 {
    	padding: 1px 1px 1px 0;
    	display: block;
    	font-size: 0;
    }
    ul#css3menu1 li {
    	display: block;
    	white-space: nowrap;
    	font-size: 0;
    	float: left;
    }
    ul#css3menu1>li, ul#css3menu1 li { margin: 0 0 0 1px; }
    ul#css3menu1 ul>li { margin: 1px 0 0; }
    ul#css3menu1 a:active, ul#css3menu1 a:focus { outline-style: none; }
    ul#css3menu1 a, ul#css3menu1 a.pressed {
    	display: block;
    	vertical-align: middle;
    	text-align: left;
    	text-decoration: none;
    	font: bold 12px Arial;
    	color: #cccccc;
    	cursor: default;
    }
    ul#css3menu1 ul li {
    	float: none;
    	margin: 9px 0 0;
    }
    ul#css3menu1 ul a {
    	text-align: left;
    	padding: 8px 0 0 0;
    	background-color: #00546b;
    	background-image: none;
    	border-width: 1px 0 0 0;
    	border-style: solid;
    	border-color: #262626;
    	border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-border-radius: 2px;
    	font: 13px Arial;
    	color: #ffffff;
    	text-decoration: none;
    }
    ul#css3menu1 li:hover>a {
    	background-color: #00c4ff;
    	border-style: none;
    	font: bold 12px Arial;
    	color: #ffffff;
    	text-decoration: none;
    	background-image: url("mainbk.png");
    	background-position: 0 100px;
    }
    ul#css3menu1 img {
    	border: none;
    	vertical-align: middle;
    	margin-right: 10px;
    }
    ul#css3menu1 img.over { display: none; }
    ul#css3menu1 li:hover > a img.def { display: none; }
    ul#css3menu1 li:hover > a img.over { display: inline; }
    ul#css3menu1 li a.pressed img.over { display: inline; }
    ul#css3menu1 li a.pressed img.def { display: none; }
    ul#css3menu1 span {
    	display: block;
    	overflow: visible;
    	background-position: right center;
    	background-repeat: no-repeat;
    	padding-right: 0px;
    }
    ul#css3menu1 a {
    	padding: 10px;
    	background-color: #00546b;
    	background-image: url("mainbk.png");
    	background-repeat: repeat;
    	background-position: 0 200px;
    	border-width: 0px;
    	border-style: none;
    border-color:;
    	color: #cccccc;
    	text-decoration: none;
    }
    ul#css3menu1 li:hover>a, ul#css3menu1 li>a.pressed {
    	background-color: #00c4ff;
    	background-image: url("mainbk.png");
    	background-position: 0 100px;
    	border-style: none;
    	color: #ffffff;
    	text-decoration: none;
    }
    ul#css3menu1 ul li:hover>a, ul#css3menu1 ul li>a.pressed {
    	background-color: #0080a3;
    	background-image: none;
    	border-style: solid;
    	border-color: #262626;
    	font: 13px Arial;
    	color: #ffffff;
    	text-decoration: none;
    }
    ul#css3menu1 li.topfirst>a {
    	height: 16px;
    	line-height: 16px;
    	border-radius: 4px 0 0 4px;
    	-moz-border-radius: 4px 0 0 4px;
    	-webkit-border-radius: 4px;
    	-webkit-border-top-right-radius: 0;
    	-webkit-border-bottom-right-radius: 0;
    	text-shadow: #000000 0px -1px 1px;
    }
    ul#css3menu1 li.topfirst:hover>a, ul#css3menu1 li.topfirst>a.pressed {
    	line-height: 16px;
    	text-shadow: #3d3d3d 0px -1px 1px;
    }
    ul#css3menu1 li.topmenu>a {
    	height: 16px;
    	line-height: 16px;
    	text-shadow: #000000 0px -1px 1px;
    }
    ul#css3menu1 li.topmenu:hover>a, ul#css3menu1 li.topmenu>a.pressed {
    	line-height: 16px;
    	text-shadow: #3d3d3d 0px -1px 1px;
    }
    ul#css3menu1 li.toplast>a {
    	height: 16px;
    	line-height: 16px;
    	border-radius: 0 4px 4px 0;
    	-moz-border-radius: 0 4px 4px 0;
    	-webkit-border-radius: 0;
    	-webkit-border-top-right-radius: 4px;
    	-webkit-border-bottom-right-radius: 4px;
    	text-shadow: #000000 0px -1px 1px;
    }
    ul#css3menu1 li.toplast:hover>a, ul#css3menu1 li.toplast>a.pressed {
    	line-height: 16px;
    	text-shadow: #3d3d3d 0px -1px 1px;
    }
    ul#css3menu1 ._>li>a { padding: 0; }
    ul#css3menu1 li.subfirst>a {
    	border-width: 0;
    	border-style: none;
    	padding: 0;
    }
    ul#css3menu1 li.subfirst:hover>a, ul#css3menu1 li.subfirst>a.pressed { border-style: none; }
    </style>
    </head>
    <body>
        <div id="container">
            <ul id="css3menu1" class="topmenu">
            <li class="topfirst"><a href="index.html" title="Home" style="width:120px;height:16px;line-height:16px;">Home</a></li>
            <li class="topmenu"><a  style="width:120px;height:16px;line-height:16px;"><span>Destinations</span></a>
            <ul>
                <li class="subfirst"><a href="#" title="North America">North America</a>
                    <ul>
                                <li><a href="#">Canada</a></li>
                                <li><a href="#">Cuba</a></li>
                                <li><a href="#">Mexico</a></li>
                                <li><a href="#">Suriname</a></li>
                                <li><a href="#">United States</a></li>
                            </ul>
                        </li>
                <li class="subfirst"><a href="#" title="Central America">Central America</a>
                            <ul>
                                <li><a href="#">Costa Rica</a></li>
                                <li><a href="#">EI Salvador</a></li>
                                <li><a href="#">Guatemala</a></li>
                                <li><a href="#">Honduras</a></li>
                                <li><a href="#">Nicaragua</a></li>
                                <li><a href="#">Panama</a></li>
                                <li><a href="#">Turks And Caicos Islands</a></li>
                            </ul>
                        </li>
                <li class="subfirst"><a href="#" title="South America">South America</a>
                <ul>
                    <li><a href="#">Argentina</a></li>
                    <li><a href="#">Bolivia</a></li>
                    <li><a href="#">Brazil</a></li>
                    <li><a href="#">Chile</a></li>
                    <li><a href="#">Columbia</a></li>
                    <li><a href="#">Ecuador</a></li>
                    <li><a href="#">French Guiana</a></li>
                    <li><a href="#">Guyana</a></li>
                    <li><a href="#">Paraguay</a></li>
                    <li><a href="#">Peru</a></li>
                    <li><a href="#">Uruguay</a></li>
                    <li><a href="#">Venezuela</a></li>			
                    </ul>			
                        </li>		
                <li><a href="#" title="Patio's">Europe</a></li>
                <li><a href="#" title="Patio's">Caribbean</a></li>
                <li><a href="#" title="Patio's">Africa</a></li>
                <li><a href="#" title="Patio's">Middle East</a></li>
                <li><a href="#" title="Patio's">Australia</a></li>
                <li><a href="#" title="Patio's">Asia</a></li>
            </ul>
            </li>
            <li class="topmenu"><a  style="width:120px;height:16px;line-height:16px;"><span>Resources</span></a></li>
            <li class="topmenu"><a  style="width:120px;height:16px;line-height:16px;"><span>Comments</span></a></li>
            <li class="topfirst"><a href="index.html.html" title="Contact" style="width:120px;height:16px;line-height:16px;">Contact</a></li>
            
            </ul>
            </li>
            
            </ul>
        <!--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

  • #3
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tryed this, and my page went all out of wack. lol.


  •  

    Posting Permissions

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