#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Navigation Bar Too Wide


    My navigation bar crosses the screen 100%.
    I would like it to be only as wide at the header (930px).
    Sheeeesh I have tried to change the numbers and percentages but it still does not turn out how I want it.
    Your help is appreciated as I have tried everything (I think.)

    www. sandiegohulldivers . com

    My CSS and HTML are validating okay...

    CSS:
    jigsaw . w3 . org/css-validator/validator?uri=http%3A%2F%2Fsandiegohulldivers.com%2Ftmp%2Fcache%2Fstylesheet_combined_f4f66eb6e54bc5 e4ff84a0ad01d32c92.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    HTML:
    validator . w3 . org/check?uri=www.sandiegohulldivers.com&charset=%28detect+automatically%29&doctype=Inline&group=0

    Code:
    /* Global
    --------------------------------------------------------------------------------------- */
    html, body{ 
    	padding:0px;
    	margin:0px;
    }
    
    body {
    	background-color: #000000;
    	font-size: 12px;
    	font-family: Verdana, Arial, Tahoma, SunSans-Regular, Sans-Serif;
    	color:#000000;  
    }
    	
    a { 
    	color: #ff0000;
    	text-decoration: none; 
    }
    
    
    /******************************************
    *   Headlines                         
    ******************************************/
    h1 {
    	color: #ff0000;
    	font-size: 18px;
    	margin: 0px 10px 0px 0px;
    	padding: 20px 0px 0px 10px;
    	}
    	
    h2 {
    	color: #000000;
    	font-size: 16px;
    	padding-bottom:8px;
    	margin: 20px 0;
    	}
    
    h3 {
    	font-size: 14px;
    	letter-spacing:1px;
    	margin-bottom:4px;
    	font-weight:bold;
    	color:#000000 ;
    	}
    
    h3#respond {
    	font-size:1.1em;
    	border-top:1px solid #ff0000;
    	margin-top:25px;
    	padding-top:20px
    	}
    
    h3#comments {
    	margin-top:32px
    	}
    
    h4 {
    	font-size:12px;
    	margin-bottom:6px;
    	}
    
    /****** Images ****************************/
    
    img.left, img.left a{ 
    	float:left;
    	margin:0 8px 5px 0;
    	border: 4px #ff0000 solid;
    }
    
    img.left:hover, img.left a:hover{ 
    	border: 4px #ff0000 solid;
    }
    
    	img.center{ display:block; margin:0 auto 5px auto; }
    	img.right{ float:right; margin:0 0 5px 12px; }
    	img align left{ float:left; margin:0 12px 5px 0; }
    
    /* Top Navigation ---------------------------------------------------------------------------------- */
    
    #navbar
    {
    	height:40px;
    	width:100%;
    	background: #ffffff top left repeat-x;
    	text-align:center;
    	margin-bottom:10px;
    	font-size:12px;
    	font-weight:bold;
    }
    
    #navbar ul {
    	margin:0 auto;
    	width:960px;
    	list-style: none;
    	line-height: normal;
    }
    
    #navbar li {
    	float: left;
    	margin-top:6px;
    	margin-right:5px;
    }
    
    #navbar a:link, #navbar a:visited {
    	padding: 8px 15px 0px 15px;
    	color:#000000;
    	display: block;
    	height: 20px;
    	text-decoration:none;
    }
    
    #navbar a:hover, .active {
    	color:#ff0000;
    	text-decoration:none;
    	background: #dcdcdc url() top left repeat-x;
    }
    
    /* Header Layout ----------------------------------------------------------------------- */
    
    #header
    {
    	height: 150px;
    	width:100%;
    	background: #000000 url('uploads/images/header_back.jpg') repeat-x left bottom;
    }
    
    #header_inside{
    	width:970px;
    	margin:0 auto;
    	height:150px;
    	background:url(http://sandiegohulldivers.com/uploads/images/san-diego-hull-divers-logo1.gif) top center no-repeat;
    }
    
    #header .right{
    	margin:2px 0 0 0;
    	float:right;
      	color:#FFFFFF;
    	font-size:14px;
    	text-decoration: none; 
    	text-align:right;
    	margin-right: 20px;
    }
    
    #header .right a{
    	margin:2px 0 0 0;
    	float:right;
      	color:#FFFFFF;
    	font-size:14px;
    	text-decoration: underline; 
    	text-align:right;
    }
    
    /* Main Content ---------------------------------------------------------------- */
    
    #wrapper{
    	width:925px;
    	height:auto;
    	margin: 0 auto;
    	text-align:center;
    	font-size:12px;
    	letter-spacing:-1px;
    }
    
    #content {
    	float:left;
    	width:600px;
    	left: 0px;
    	background:#e5ebf3;
    	margin-right:15px;
    	text-align:left;
    }
    		
    #content .main_content {
    	width:600px;
    	height:auto;
    	margin:0px 0 0 0;
    	font-size: 13px;
    	background: #fff;
    	padding: 4px;
    	border: 1px #ff0000 solid;
    	text-align: justify;
    }
    
    #content .main_content h3{
    	padding-bottom:10px;
    	margin: 20px 20px 20px 20px;
    	font-size: 16px;
    	border-bottom: #000000 1px solid;
    }
    
    #content .main_content h4{
    	margin: 20px 20px 20px 20px;
    	font-size: 13px;
    	font-weight: bold;
    }
    
    #content .main_content p{
    	margin: 20px 20px 20px 20px;
    }
    table.gridtable {
              margin-left:auto; 
              margin-right:auto;
    	font-family: verdana,arial,sans-serif;
    	font-size:11px;
    	color:#000000;
              width: 375px;
    	border-width: 1px;
    	border-color: #ff0000;
    	border-collapse: collapse;
    }
    table.gridtable th {
    	border-width: 1px;
    	padding: 8px;
    	border-style: solid;
    	border-color: #ff0000;
    	background-color: #dcdcdc;
    }
    table.gridtable td {
    	border-width: 1px;
    	padding: 8px;
    	border-style: solid;
    	border-color: #ff0000;
    	background-color: #ffffff;
    }
    
    /* Sidebar  ----------------------------------------------------------------------------- */
    
    #sidebar {	
    	width:300px;
    	float:right;
    	height:auto;
    	text-align:left;
    		}
    		
    #sidebar h3{
    	padding-bottom:5px;
    	padding-top:10px;
    	margin: 20px 5px 5px 5px;
    	font-size: 16px;
    	border-top: #ff0000 1px solid;
    	text-align:center;
    }
    
    #sidebar h3:hover{
    	border-top: #ff0000 1px solid;
    }
    		
    #sidebar ul {
    	margin:0px; padding:0px;
    	margin-top:0px;
    }
    
    #sidebar ul li 
    	{
    	margin:0px 0 0px 0; 
    	padding:0px;
    	display:block;
    	list-style:none;
    	}
    
    #sidebar li a	{
    	background: #ffffff url() top left repeat-x;
    	color:#000000;
    	text-decoration:none;
    	padding-top:10px;		
    	padding-bottom:10px;
    	padding-left:15px;
    	padding-right:15px;	
    	display:block;	
    	border-bottom:1px solid #ff0000;
    	font-size:12px;
    	font-weight:bold;	
    	letter-spacing:0px;
    }
    
    #sidebar ul li a:hover, #sidebar ul li .selected
    	{
    	background: #dcdcdc;
    	border-bottom:1px solid #ff0000;
    	color:#ff0000;
    	}
    
    #smallad{
    	width: 290px;
    	height:auto;
    	margin:0px 0 0 0;
    	font-size: 13px;
    	background: #fff;
    	padding: 4px;
    	text-align: justify;
    	border: 1px #ff0000 solid;
    	margin: 10px 0px 10px 0px;
    }
    
    #smallad2{
    	width: 290px;
    	height:auto;
    	margin:0px 0 0 0;
    	font-size: 13px;
    	background: #fff;
    	padding: 4px;
    	text-align: justify;
    	border: 1px #ff0000 solid;
    	margin: 10px 0px 10px 0px;
    }
    
    #payments
    {
    	width: 290px;
    	height:auto;
    	margin:0px 0 0 0;
    	font-size: 13px;
    	background: #fff;
    	padding: 4px;
    	border: 1px #ff0000 solid;
    	text-align: justify;
    	border: 1px #ff0000 solid;
    	margin: 10px 0px 10px 0px;
    }
    
    #adbox
    {
    	width: 300px;
    	height:250px;
    	background: #fff;
    	border: 1px #ff0000 solid;
    }
    
    #sidebar p {
    	font-size:11px;
    }
    		
    
    /* Footer Layout --------------------------------------------------------------------------- */
    
    #footer{
    	width: 100%;
    	height:42px;
    	background: #000000 url(images/nav_back.jpg) top left repeat-x;
    	text-align:left;
    	margin:10px 0 0 0;
    	clear:both;
    	color:#FFFFFF;
    }
    
    #footer .inside{
    	width:925px;
    	margin:0 auto;
    	padding: 12px 0 0 0;
    }
    
    #footer .left{
    	float: left;
    }
    
    #footer .right{
    	float: right;
    }
    
    #space{
    	height: 15px;
    	width: 100%;
    	clear:both;
    }
    
    
    /* Stylesheet: SDHD-STYLE Modified On 2013-08-04 22:06:28 */
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    change this
    Code:
    #navbar
    {
    	height:40px;
    	width:100%;
    	background: #ffffff top left repeat-x;
    	text-align:center;
    	margin-bottom:10px;
    	font-size:12px;
    	font-weight:bold;
    }
    to this
    Code:
    #navbar
    {
    	height:40px;
    	width:930px;
    	background: #ffffff top left repeat-x;
    	text-align:center;
            /*margin-bottom:10px;*/
    	margin:0 auto 10px;
    	font-size:12px;
    	font-weight:bold;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Thank you DonR


    Originally Posted by DonR
    change this
    Code:
    #navbar
    {
    	height:40px;
    	width:100%;
    	background: #ffffff top left repeat-x;
    	text-align:center;
    	margin-bottom:10px;
    	font-size:12px;
    	font-weight:bold;
    }
    to this
    Code:
    #navbar
    {
    	height:40px;
    	width:930px;
    	background: #ffffff top left repeat-x;
    	text-align:center;
            /*margin-bottom:10px;*/
    	margin:0 auto 10px;
    	font-size:12px;
    	font-weight:bold;
    }
    Your solution made me slap my head - quite hard I might add.
    Thank you sir.

    Comments on this post

    • DonR agrees : your "slap my head" comment made me LOL ;)

IMN logo majestic logo threadwatch logo seochat tools logo