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
