0

Hi,
I am trying to position a navigation bar from the left side of a div(header) without any padding value(without any space.I would like to position the nav exactly where the content div is started(Red line border) but I do not know why it is not working!

Can you please take a look at following link and let me know why I can not

http://www.geoca.com/Geoca_v_Final/

as you can see there are space at the left side of the nav and title <h1> tag but how I can get rid of it
I tried to set the width of nav as "width: 95%;" but it didn't work

Here is the Html code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#content').corner();
	
});
</script>
</head>

<body>
<div id = "container">
<div id="header">
 <h4>Test.</h4>
    	<hr />  
<ul class="topnav">
    <li><a href="http://www.geoca.com">Home</a></li>
    <li>
        <a href="#">Solutions</a>
        <ul class="subnav">
            <li><a href="Projects.html">GIS</a></li>
			<li><a href="#">Training</a></li>
            <li><a href="#">Geodatabase</a></li>
			<li><a href="#">Business Analysis</a></li>
            <li><a href="#">Interactive Maps</a></li>
        </ul>
    </li>
    <li>
        <a href="Projects.html">Projects</a>
        <ul class="subnav">
            <li><a href="#">SQL Server</a></li>
            <li><a href="#">My SQL</a></li>
			<li><a href="#">Oracle</a></li>
          
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="contact.php">Contact Us</a></li>
</ul>	
                       

                       
</div><!-- End of Header-->

<div id = "content">
</div><!-- End of Content-->
</div><!-- End of Container-->
</body>
</html>

and this is my css (style.css)

/* CSS Document */
#container {
    width: 925px;  
    height:600px;
    margin: 0 auto; 
    background-color: #cccccc;
 } 
 
 #header{
    padding:15px;
    width: 95%;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 5px;
    height:100px;
    border-style:solid;
    border-width:1PX;
    border-color:red;
    background-color: yellow;
}
#content{
	background-color: #EEEEEE;
	padding:15px;
	width: 95%;
	margin: auto;
	height:200px;
	border-style:solid;
	border-width:1PX;
	border-color:#DDDDDD;
	-webkit-box-shadow: 0px 2px 5px #333333;
	-moz-box-shadow: 0px 2px 5px #333333;
	box-shadow: 0px 2px 5px #333333;
}
/*---------------------------------------------------------------------Start of Navigation--*/
ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 852px;
	background:#817679;
	font: 13px normal Arial, Helvetica, sans-serif;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	margin-bottom:0px;
	
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
	z-index:2;
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;

}
ul.topnav li a:hover{
	
	color:#C90;
	
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.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: #FFFFFF;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--line color beteen dropdown list top--*/
	border-bottom: 1px solid #444; /*--line color beteen dropdown list button--*/
	clear: both;
	width: 170px;
	
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;

}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 ;

}
/*---------------------------------------------------------------------End of Navigation--*/

I really appreciate your time if you can let me to fix this

Thanks

Edited by Behseini: n/a

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Vampola
0

Then I think you should not use this header padding.
#header {
background-color: yellow;
border-color: red;
border-style: solid;
border-width: 1px;
height: 100px;
margin: 25px auto 5px;
padding: 15px; -----------turn this off
width: 95%;
}

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.