Forums

Manojsethi

How can i align my dynamic links in center of navigation menu

kgscott284

wrap them in a div...
e.g.


#link-wrap { 
	 width: 100%
	 text-align: center;
}

You should show your code so we can give a better, more appropriate example.

Manojsethi

Code for my Default page css


body {
       
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
	background: #ddd url(body_bg.gif) repeat-x;
}
.container {
	width: auto;
	margin: 0 auto;
	position: relative;
        
            }
#header {
	background: url(body_bg.gif) repeat-x center top;
	padding-top: 120px;
        
        }
       
#header .disclaimer 
         {
          color: #999;
	padding: 100px 0 7px 0;
        text-align: right;
	display: block;
	position: absolute;
        top: 0; right: 0;
        }
        
#header .disclaimer a 
    {	
    color: #ccc;
    }
ul.topnav {
       list-style: none;
	padding: 0 30%;
	margin: 0px;
        float: left;
        text-align: center;
	width: 100%;
	background: #222;
	font-size: 1.2em;
        background: url(topnav_b.gif) repeat-x center;
       }
ul.topnav li {
	float: left;
	margin: auto;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
        
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_h.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_b.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
        -moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown.gif) no-repeat 10px center;
}
#header .content{
            margin-top: 3%;
            width: 650;
            padding: 5px;
            font-size: 14px;
        }

Code my Main page in PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;charset=windows-1252">
        <title>Welcome to Police Service of India</title>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
        <script type="text/javascript" src="main.js"></script> 
        <link rel="stylesheet" type="text/css" href="navigation.css" />
        
                     </head>

        <body>
         
        <div class="container">
            <div id="header">
                <div class="disclaimer"><b><a>E-Mail : admin@indianpolice.org</a></b></br></br></div>
                                
            <ul class="topnav"> 
                
        <li><a href="default.php">Home</a></li>  
        <li><a href="#">Departments</a></li> 
        <li><a href="#">Submit</a></li> 
        <li>  
            <a href="default.php?p=Register">About us</a>  
            <ul class="subnav">  
                <li><a href="">Contact Us</a></li>  
                <li><a href="">History</a></li>  
            </ul>  
        </li>  
        <li><a href="default.php?p=index">Login</a></li>  
        <li><a href="default.php?p=news">News</a></li>  
        
    </ul>  
                <div class="content">
                   <?php
                   
                   if (!empty($_GET['p']))
                   {
                       $login_dir='login';
                       $login=scandir($login_dir,0);
                       unset($login[0],$login[1]);
                       $p=$_GET['p'];
                       $cssfile=array('0','0','login/police.css');
                       
                       if(in_array($p.'.inc.php',$login))
                            {
                           
                                include($login_dir.'/'.$p.'.inc.php');
                            }
                       else
                       {
                           echo "Sorry Page not Found";
                       }
                          
                        
                   }
                    
                    ?>
                    
                    
                    </div>
            </div>
            </div> 
         </body>
</html>

The Headings of my linked pages are towards left of navigation bar i want the titles in the center.

springlab

in your css drop the float: left;

ul.topnav li a{
               padding: 10px 5px;
        color: #fff;
        display: block;
        text-decoration: none;
        float: left;
}

Senff

...and also the display:block;

treehouse : what would you like to learn today?

Forums

Alternate for Float Center