SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Navigation bar position

    Hi,

    I'm new here and having an issue trying to center the black navigation bar of my page which is currently showing to the left!

    Will appreciate your kickback



    Here is the HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; @david=webmaster-10" />
    <title>My blog</title>
    <!-- David's Blog -->
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="page_container">
    
    	<div id="page_top_panel">
        	<div id="page_header" style="width: 135px; height: 40px">
               	<div id="site_title">&nbsp;</div>
                <div id="slogan">&nbsp;</div>
            </div>
    
        </div> <!-- end of top panel -->
    
            <div id="page_menu">
            <ul>
                <li><a href="index.html"  class="current">Home</a></li>
                <li><a href="subpage.html">About ME</a></li>
                <li><a href="subpage.html">NEWSLETTER</a></li>
                <li><a href="index.html">MY CV</a></li>  
                <li><a href="index.html">MY BLOG</a></li> 
                <li><a href="index.html">CONTACT</a></li>                     
                <li><a href="#" class="lastmenu">LINKS</a></li>            
            </ul>  
            
            <form method="get" action="#">
                <input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search" value="GO" />
            </form>
        </div> <!-- end of menu -->
    
    <div id="wrap">
    <div id="page_container">
    
    	<div id="page_top_panel">
        	<div id="page_header" style="width: 135px; height: 30px">
               	<div id="site_title">&nbsp;</div>
                <div id="slogan">&nbsp;</div>
            </div>
    
        </div> <!-- end of top panel -->
        <div id="topb"><p><h1>PAGE</h1></p></div>
        <div id="leftb" style="width: 169px; height: 565px">
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>
    		&nbsp;</div>
        <div id="middleb" style="width: 520px; height: 802px">WELCOME TO MY NEW BLOG 
    		PAGE. MY PAGE IS UNDER CONSTURTION AND IS COMING SOON. VISIT SOON AND 
    		THANK YOU!<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</div>
        <div id="rightb" style="width: 169px; height: 746px"></div>
    </div> <!-- end of skeleton -->

    And here is the CSS:

    Code:
    @david "webmaster-10";
    /* CSS Document */
    
    body {
    	background: #FFF;
    	margin: 0;
    	padding: 0;
    }
    
    input, select {
    	margin: 0;
    }
    
    #wrap {
    	margin: 0 auto;
    	width: 960px;
    }
    
    /*------------- Menu ------------------*/
    #page_menu {
    width: 960px;
    height: 35px;
    background: #000;
    border-bottom: 1px solid #333;
    }
    
    #page_menu ul {
    float: left;
    width: 750px;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    }
    
    #page_menu ul li{
    display: inline;
    }
    
    #page_menu ul li a{
    float: left;
    padding: 0 25px;
    font-family: "Arial Narrow", Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFFFFF;
    border-right: 1px solid #FFFFFF;
    }
    
    #page_menu ul li .lastmenu{
    border-right: none;
    }
    
    #page_menu li a:hover, #page_menu li .current{
    color: #b3d7fc;
    }
    
    #page_menu form{
    float: right;
    width: 170px;
    margin: 0;
    padding: 5px 0 0 0;
    text-align: left;	
    }
    
    #page_menu form input{
    width: 120px;
    color: #FFFFFF;
    background: #000;
    height: 20px;
    border: 1px solid #666;
    }
    
    #page_menu form .button{
    border: none;
    background: none;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    }
    
    /* ----------------- end of menu----------------*/
    
    #topb {
    	background: #FFF;
    	width: 960px;
    	height: 60px;
    	border-bottom: 3px solid #666;
    }
    
    #topb h1 {
    	margin: 0;
    	padding: 0;
    	font-family: "Arial Narrow", Helvetica, sans-serif;
    	font-size: 50px;
    	font-weight: bold;
    	text-align: center;
    }
    
    #leftb {
    	background: #FFF;
    	width: 169px;
    	float: left;
    	padding: 4px;
    }
    
    #middleb {
    	background: #FFF;
    	width: 520px;
    	float: left;
    	padding: 4px;
                  font-family: "Arial", Helvetica, sans-serif;
    	font-size: 14px;
                  font-color: #333
    	font-weight: normal;
    }
    
    #rightb {
    	background: #FFF;
    	width: 169px;
    	float: left;
    	padding: 4px;
    	border-left: 1px solid #CCC;
    
    /* ----------------- end of skeleton----------------*/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hi dav-css. Welcome to SitePoint.

    There was another thread this week on the same topic, so firstly, let's see if the solutions offered there answer your question:

    http://www.sitepoint.com/forums/css-...ml#post4930599

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanx. I have already managed to resolved it


Bookmarks

Posting Permissions

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