SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    25
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why my Form is shown correctly alone, but mess up when put in the whole page?

    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:
    Code:
    <!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 &copy; </p>
        
      </div><!-- end .footer -->
    
    </div><!-- end .container -->
    
    
    <script>
      
    </script>
    
    </body>
    Code:
    /*-- 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:
    Code:
    <!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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi blackswan. Welcome to the forums.

    The styles for your form are all based around it being inside an element with a class of "search_form_wrapper". The page where the styles aren't working doesn't have a container with a class of "search_form_wrapper". But you could just add it in, such as this way:

    Code:
    <div class="container search_form_wrapper">
    Alternatively, you could change your CSS. Because you have a parent element with an ID of "search_form_wrapper", you could just change each instance of ".search_form_wrapper" to "#search_form_wrapper":

    E.g.

    Code:
    #search_form_wrapper {
    	width:100%;
    	margin:0 auto;
    	font-family:Verdana, sans-serif;
    }
    
    #search_form_wrapper legend{
    
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2013
    Posts
    25
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ralph.m, Thanks a lot for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •