Hi,
There is a huge horizontal gap between the nav and #content div and I don't know how to get rid of it!!! Please help, I'm new to web design.
HTML:
<body>
<header>
<img src="./img/SIMPLE_banner-min.png" alt="SIMPLE banner">
</header>
<nav id='topnav'>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="./index.html">About</a> </li>
<li><a href="./download_form.html">Download</a></li>
<li><a href="./workflows.html">Workflows</a></li>
<li><a href="./manuals.html">Manuals</a></li>
<li><a href="./lab.html">Elmlund Lab</a></li>
<li><a href="./publications.html">Publications</a></li>
<li><a href="./contact.html">Contact </a></li>
</ul>
</nav>
<div id="content">
<!-- TemplateBeginEditable name="EditRegion1" -->
<!-- TemplateEndEditable -->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
CSS
body {
background-image: url(../images/nebula.jpg);
background-attachment: fixed;
margin: 0;
background-color: #000000;
background-repeat: repeat;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
header {
background-color: rgb(255,255,255);
height: 110px;
width: 830px;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
padding-top: 20px;
}
#topnav {
height: 480px;
width: 910px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
margin-top: 0px;
}
#content {
width: 830px;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 0;
padding-left: 40px;
padding-right: 40px;
position: relative;
overflow: visible;
margin-bottom: 0px;
background-color: rgb(255,255,255);
}
Thanks!
1 Correct answer
2
Replies
AdChoices