I have a gap between my navigation and my banner divs in the below code which seems to be fixed using overflow:hidden in my CSS for banner, but then the background image of my banner is then off...the URL is
here's the HTML
<body bgcolor="#999966" background="images/test background.png">
<div id="navigation">
<p>Content for id "navigation" Goes Here</p>
</div navigation>
<div id="banner">
<div id="bannertext">
<p> </p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> "No Bad Deals"</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p> </p>
</div bannertext3>
</div banner>
<div id="content">Content for id "content" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>
Here's the CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Agency</title>
<style type="text/css">
<!--
body {
background-color: #999966;
background-image: url(images/test%20background.png);
}
#banner {
background-image: url(images/gettycropped2.png);
width: 900px;
margin: auto;
height: 400px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#banner #bannertext3 {
text-align: right;
padding-right: 50px;
color: #FFF;
vertical-align: top;
padding-left: 425px;
}
#banner #bannertext {
text-align: right;
padding-left: 300px;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding-right: 10px;
font-size: 24px;
}
#banner #bannertext2 {
text-align: right;
color: #FFF;
padding-right: 200px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
padding-top: 0px;
}
#navigation {
margin: auto;
width: 900px;
background-image: url(images/testbanner2.png);
background-repeat: no-repeat;
height: 100px;
}
#content {
margin: auto;
width: 900px;
}
#footer {
margin: auto;
width: 900px;
}
.bold {
font-weight: bold;
}
-->
</style>
</head>
any help would be appreciated
thanks
here's the HTML
<body bgcolor="#999966" background="images/test background.png">
<div id="navigation">
<p>Content for id "navigation" Goes Here</p>
</div navigation>
<div id="banner">
<div id="bannertext">
<p> </p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> "No Bad Deals"</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p> </p>
</div bannertext3>
</div banner>
<div id="content">Content for id "content" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>
Here's the CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Agency</title>
<style type="text/css">
<!--
body {
background-color: #999966;
background-image: url(images/test%20background.png);
}
#banner {
background-image: url(images/gettycropped2.png);
width: 900px;
margin: auto;
height: 400px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#banner #bannertext3 {
text-align: right;
padding-right: 50px;
color: #FFF;
vertical-align: top;
padding-left: 425px;
}
#banner #bannertext {
text-align: right;
padding-left: 300px;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding-right: 10px;
font-size: 24px;
}
#banner #bannertext2 {
text-align: right;
color: #FFF;
padding-right: 200px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
padding-top: 0px;
}
#navigation {
margin: auto;
width: 900px;
background-image: url(images/testbanner2.png);
background-repeat: no-repeat;
height: 100px;
}
#content {
margin: auto;
width: 900px;
}
#footer {
margin: auto;
width: 900px;
}
.bold {
font-weight: bold;
}
-->
</style>
</head>
any help would be appreciated
thanks