Hi all,
I have a form with its HTML and CSS, the form shows good without combining with other elements. But when I try to put it into my whole page(the left column of the content area), all the CSS effects are gone.
Below is the HTML and CSS for the whole page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bookstore</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="container">
<div class="header">
<!-- <img src=" " class="logo"> -->
<h1 class="logo_text">Book store</h1>
<form action="http://www.base-domain.com/" method="post" class="login_form">
<div class="login_form_input_container">
<label for="email" class="login_form_label">Email</label>
<input type="email" id="email" name="email" class="login_form_input">
</div>
<div class="login_form_input_container">
<label for="password" class="login_form_label">Password</label>
<input type="password" id="password" name="password" class="login_form_input">
</div>
<a href="http://www.base-domain.com/forgot_password/" class="forgot_password_link">Forgot password?</a>
<input type="submit" id="login_submit" name="login_submit" value="Log In" class="login_form_submit">
</form>
</div><!-- end .header -->
<div class="nav">
<ul class="nav_links">
<li class="nav_link_container"><a href="" class="nav_link">link one</a></li>
<li class="nav_link_container"><a href="" class="nav_link">link one</a></li>
<li class="nav_link_container"><a href="" class="nav_link">link one</a></li>
<li class="nav_link_container"><a href="" class="nav_link">link one</a></li>
<li class="nav_link_container"><a href="" class="nav_link">link one</a></li>
</ul>
</div><!-- end .nav -->
<!-- begin .content, which contains .sidebar and .main columns -->
<div class="content">
<div class="sidebar">
<div id="search_form_wrapper">
<form name="search" action="/" method="post" class="search_form">
<fieldset><legend>I'm looking for...</legend>
<div>
<label class="search_form_label" for="keywords">Key Words</label>
</div>
<div>
<input type="text" name="keywords" placeholder="Keywords"/>
</div>
<div>
<label class="search_form_label" for="county">County</label>
</div>
<div>
<input type="text" name="county" placeholder="County"/>
</div>
<div class="search_button_group">
<input type="submit" name="submit" value="search jobs"/>
<div class="advanced_search_link"><a href="" class="advanced_search_link">Advanced Search</a>
</div>
</div>
</fieldset>
</form>
</div><!-- end .search_form_wrapper -->
</div><!-- end .sidebar -->
<div class="main">
<h2 class="main_h2">Book stroe</h2>
<p class="main_p1">Book stroe</p>
<img src="" alt="staff banner" width="81%" height="206" class="main_banner">
<p class="main_p2">Book stroe.</p>
<h3>Book stroe</h3>
<p>Book stroe.</p>
</div><!-- end .main -->
</div> <!-- end .content -->
<div class="footer">
<ul class="footer_menu">
<li><a href="">Site Map</a></li>
<li><a href="/>Site Map</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright"><strong>Copyright © </p>
</div><!-- end .footer -->
</div><!-- end .container -->
<script>
</script>
</body>
/*-- CSS V2 --*/
a, body, div, form, html, img, label, li, ul {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
font-family: Tahoma, "Lucida Grande", Arial, sans-serif;
background: url("../images/bg.gif") repeat-x left top;
}
.container {
margin: 0 auto;
width: 1250px;
}
.header {
overflow: hidden;
}
.logo {
display: block;
float: left;
}
.logo_text {
float: left;
color: rgba(255,255,255,1);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
width: 956px;
}
.login_form {
overflow: hidden;
}
.login_form_input_container {
margin: 5px;
overflow: hidden;
}
.login_form_label {
display: block;
float: left;
font-size: 1.125em;
font-weight: bold;
margin-top: 4px;
width: 80px;
}
.login_form_input {
display: block;
float: right;
width: 185px;
}
.forgot_password_link {
color: #2A667C;
display: inline-block;
/*display: inline; */
margin: 10px 0 0 5px;
/*zoom: 1; */
}
.login_form_submit {
background: #2A667C;
border-radius: 8px;
color: #FFF;
cursor: pointer;
display: block;
float: right;
font-size: 1.125em;
font-weight: bold;
margin-right: 5px;
padding: 4px 8px;
}
.login_form_submit:hover {
background: #98BF21;
}
.nav {
background: #98BF21;
text-align: center;
font-family: Helvetica,Arial,sans-serif;
}
.nav_links {
list-style: none;
margin: 0 auto;
overflow: hidden;
width: 900px;
}
.nav_link_container {
float: left;
width: 180px;
}
.nav_link {
color: #FFF;
display: block;
font-size: 1.25em;
font-weight: bold;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 160px;
}
.nav_link:hover {
background: #2A667C;
}
/** Content Div **/
.content {
clear: both; /* clear #nav ul li's following elements */
width: 100%; /* set the width of #content to 100% */
overflow: hidden; /* make it stretch to contain the floated elements */
margin-top: 1.5em;
}
.sidebar {
float: left;
width: 30%;
margin-right: 5%;
}
/* search form */
.search_form_wrapper {
width:100%;
margin:0 auto;
font-family:Verdana, sans-serif;
}
.search_form_wrapper legend {
color:#0481b1;
font-size:21px;
padding:0 10px;
background:#fff;
-moz-border-radius:4px;
box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
padding:5px 10px;
text-transform:uppercase;
font-family:Helvetica, sans-serif;
font-weight:bold;
}
.search_form_wrapper fieldset {
border-radius:4px;
background: #fff;
background: -moz-linear-gradient(#fff, #f9fdff);
background: -o-linear-gradient(#fff, #f9fdff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
background: -webkit-linear-gradient(#fff, #f9fdff);
padding:20px;
border-color:rgba(4, 129, 177, 0.4);
}
.search_form_wrapper input {
color: #373737;
background: #fff;
border: 1px solid #CCCCCC;
color: #aaa;
font-size: 14px;
line-height: 1.2em;
margin-bottom:15px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
.search_form_wrapper input[type="text"] {
padding: 8px 6px;
height: 22px;
width:280px;
}
.search_form_wrapper input[type="text"]:focus {
background:#f5fcfe;
text-indent: 0;
z-index: 1;
color: #373737;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 380px;
border-color:#ccc;
box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
opacity:0.6;
}
.search_form_wrapper input[type="submit"]{
background: #222;
border: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
text-transform:uppercase;
color: #eee;
cursor: pointer;
font-size: 15px;
margin: 10px 0;
padding: 5px 22px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius:4px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.search_form_label {
display: block;
width: 8em;
text-align: left;
color: #2A9FAA;
font-weight: bold;
font-size: 1.125em;
margin: 7px 0;
}
.search_button_group {
float: left;
}
.advanced_search_link {
color: #2A667C;
display: inline-block;
text-decoration: none;
margin-left: 8px;
color: rgb(49, 90, 170);
font-size: 18px;
}
a.advanced_search_link:hover {
text-decoration:underline;
color: #2A00FF;
}
/* search form ends */
.main
{
float: left;
width: 812.5px;
overflow: hidden; /* make it stretch to contain the floated elements */
}
.main-h2
{
font-size: 280%;
font-weight: bold;
}
.main_banner {
width: 65%;
}
.main_p1
{
font-size: 135%;
margin-left: 0.3em;
}
.main_p2
{
font-size: 130%;
margin-top: 0.5em;
margin-left: 0.3em;
}
/** Footer Div **/
.footer
{
clear: left; /* starts the footer below the floated content */
overflow: hidden; /* make it stretch to contain the floated elements */
width: 100%; /* fix float containment fail */
margin-top: 1em;
border-top: 10px solid #98BF21;
background-color:#1183DA;
font-family: Helvetica,Arial,sans-serif;
}
ul.footer_menu
{
list-style-type: none;
padding: 0;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
color: #FFF;
}
ul.footer_menu li
{
display:inline-block;
}
ul.footer_menu li a:link, ul.footer_menu li a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
/* text-transform:uppercase;*/
}
ul.footer_menu li a:hover, ul.footer_menu li a:active
{
background-color:#98BF21;
}
.copyright
{
text-align: center;
color: white;
}
strong
{
font-weight: bold;
}
If you show the code in the browser, you could see the form on the left column doesn’t look nice.
But in this single file, the form shows great:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Register form with HTML5 using placeholder and CSS3</title>
</head>
<style type="text/css">
#wrapper {
width:450px;
margin:0 auto;
font-family:Verdana, sans-serif;
}
#wrapper legend {
color:#0481b1;
font-size:21px;
padding:0 10px;
background:#fff;
-moz-border-radius:4px;
box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
padding:5px 10px;
text-transform:uppercase;
font-family:Helvetica, sans-serif;
font-weight:bold;
}
#wrapper fieldset {
border-radius:4px;
background: #fff;
background: -moz-linear-gradient(#fff, #f9fdff);
background: -o-linear-gradient(#fff, #f9fdff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
background: -webkit-linear-gradient(#fff, #f9fdff);
padding:20px;
border-color:rgba(4, 129, 177, 0.4);
}
#wrapper input {
color: #373737;
background: #fff;
border: 1px solid #CCCCCC;
color: #aaa;
font-size: 14px;
line-height: 1.2em;
margin-bottom:15px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
#wrapper input[type="text"] {
padding: 8px 6px;
height: 22px;
width:280px;
}
#wrapper input[type="text"]:focus {
background:#f5fcfe;
text-indent: 0;
z-index: 1;
color: #373737;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 380px;
border-color:#ccc;
box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
opacity:0.6;
}
#wrapper input[type="submit"]{
background: #222;
border: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
text-transform:uppercase;
color: #eee;
cursor: pointer;
font-size: 15px;
margin: 10px 0;
padding: 5px 22px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius:4px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.search_form_label {
display: block;
width: 8em;
text-align: left;
color: #2A9FAA;
font-weight: bold;
font-size: 1.125em;
margin: 7px 0;
}
.search_button_group {
float: left;
}
.advanced_search_link {
color: #2A667C;
display: inline-block;
/*display: inline; */
text-decoration: none;
margin-left: 8px;
color: rgb(49, 90, 170);
font-size: 18px;
}
a.advanced_search_link:hover {
text-decoration:underline;
color: #2A00FF;
}
</style>
<body>
<div id="wrapper">
<form name="search" action="/" method="post" class="search_form">
<fieldset>
<legend>I'm looking for...</legend>
<div>
<label class="search_form_label" for="keywords">Key Words</label>
</div>
<div>
<input type="text" name="keywords" placeholder="Keywords"/>
</div>
<div>
<label class="search_form_label" for="county">County</label>
</div>
<div>
<input type="text" name="county" placeholder="County"/>
</div>
<div class="search_button_group">
<input type="submit" name="submit" value="search jobs"/>
<div class="advanced_search_link">
<a href="" class="advanced_search_link">Advanced Search</a>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Can anyone help? Thanks a lot
