My <textarea> and everything after it appears to go past my div's background.
Here is the html:
<body>
<div id="container">
<div id="banner">
</div>
<div id="navigation">
<a href="index.html"><img src="images/front_end/nav_home.png" alt="Home" /></a><a href="portfolio.html"><img src="images/front_end/nav_portfolio.png" alt="Portfolio" /></a><a href="about.html"><img src="images/front_end/nav_about.png" alt="About" /></a><a href="contact.html"><img src="images/front_end/nav_contact.png" alt="Contact" /></a>
</div>
<div id="content">
<div id="title">
Contact
</div>
<form id="emailform" method="POST" action="">
<label for="name">Name: </label><input class="inputs" type="text" name="name" />
<p><label for="email">Email: </label><input class="inputs" type="text" name="email" /></p>
<p><label for="phone">Phone: </label><input class="inputs" type="text" name="phone" /></p>
<p><label for="message">Your Message: </label><textarea id="largemessage" name="message"></textarea></p>
<input type="submit" id="submit" value="Send Message"/>
</form>
</div>
and the CSS:
body {
background-color: #111014;
background-image: url("images/front_end/bg.png");
background-repeat: repeat-x;
}
#container {
height: auto;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
margin-top: 45px;
margin-bottom: 38px;
height: 68px;
width: 1000px;
backgroun开发者_开发知识库d-image: url("images/front_end/bannerbg.png");
}
#navigation {
height: 36px;
width: 1000px;
margin-left: 49px;
}
#content {
background-image: url("images/front_end/contentbg.png");
background-repeat: repeat-y;
height: 100%;
width: 1000px;
padding-left:80px;
padding-right:60px;
padding-bottom: 20px;
margin-bottom: -8px;
}
#title {
height: 90px;
width: 542px;
padding-left: 60px;
padding-top: 36px;
background-image: url("images/front_end/titlebg.png");
background-repeat:no-repeat;
font-family: tahoma;
font-size: 2.5em;
color: #dad8df;
margin-left: -80px;
}
#emailform {
color: #dad8df;
font-family: tahoma;
}
.inputs {
float: right;
margin-right: 675px;
width: 200px;
font: .9em tahoma;
}
#largemessage {
float: right;
clear: both;
margin-right: 175px;
width: 700px;
height: 150px;
resize: none;
font: .9em tahoma;
}
#submit {
margin-right: 175px;
clear: both;
float: right;
}
and a picture of what is happening:
A link to a picture of what is happening is here: The Picture
I realise i have really given you a heap of stuff to sort through but I have looked multiple times and just can't figure it out.
Thanks for the help in advance.
The reason that the textarea and submit button doesn't affect the height of the form is that they are floating.
You can use the overflow style to make the form contain floating elements also:
#emailform {
color: #dad8df;
font-family: tahoma;
overflow: hidden;
}
(What setting you use for overflow doesn't matter as you haven't specified a size for the element.)
Give your "content" <div> the style overflow: hidden; and see if that helps.
Add
<div style="clear: both;"></div>
to the bottom of the page, before the closing body tag.
加载中,请稍侯......
精彩评论