www.webdeveloper.com
Results 1 to 5 of 5

Thread: Slidebar is coming when adding footer in html5

  1. #1
    Join Date
    Apr 2014
    Posts
    4

    Slidebar is coming when adding footer in html5

    Hi, i tried a lot but not getting exact page lookup in html5 with footer. I am not much aware of HTMl5.
    my query is:
    1. I have a html page with footer tag, and i want that it should be automatically adjust to bottom of page, if content is less on page then no slidebar sould be visible, but in my case a slide bar is coming and i dont want that slide bar.
    2. i have included a button section but i want buttons width should be dynamicallly adjustable, not it is hiding some contents which i want to display on button.
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <title>Test Case</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Login Form" />
    <meta name="keywords" content="html5" />
    <meta name="author" content="Rajat" />
    
    
    
    
    
    </head>
    <body>
      <div class="wrapper">
          <div class="headwrapper">
                <div class="logo"> <!-- Logo -->
    	            <h1><a href="#">Raj</a></h1>
    	        </div> <!-- Logo end-->
    
    	        <div class="menu"> <!-- menu-->
                  <ul class="tabsec">
    					<li><a href="Categorylist.html">Category</a></li>
    					<li><a href="Categorylist.html">Category</a></li>
    					<li><a href="Categorylist.html">Category</a></li>
                  </ul>
                </div> <!-- menu ends-->
      
          </div> <!-- end of header-wrapper -->
          <div class="wrappera">
                 <div class="sidebarleft"> <!-- sidebar start -->
                         sadfdsjf dfdsfdsaf <br> dsadasda <br>
                         asdasdfdsaf asadfsdaf fsadfasdf <br> wqrfqwerfefe
                         efweweqeg<br/>
                 </div><!-- sidebar ends-->
                 <div class="contentsec"> <!-- contentsec start-->
                         <div class="contentheader"><!-- contentheader start-->
    	                     <h1>Test Html</h1>
    	                 </div><!-- contentheader ends-->
    	                 <div class="tableblock">
    	                    <table align="left" id="myTable">
    		                   <thead>
    
    							  <tr>
    								  <th><input type="checkbox" id="chkbx"></th>
    								  <th>Edit</th>
    								  <th>TestHtml Name</th>
    								  <th>TestHtml Description</th>
    								  <th>Execute TestHtml</th>
    							  </tr>  
    						   </thead>
    						   <tbody>
    							  <tr>
    								  <td><input type="checkbox" id="chkbx1" width="2px"></td>
    								  <td><a href="#"><img class="imgsrc" src="" alt=""></a></td>
    								  <td>Rajat</td>
    								  <td>TestHtml</td>
    								  <td>TestHtml</td>
    							  
    							  </tr>
    							  <tr>
    								  <td><input type="checkbox" id="chkbx1" width="2px"></td>
    								  <td><a href="#"><img class="imgsrc" src="" alt=""></a></td>
    								  <td>Rajat Sharma</td>
    								  <td>gdfgdgdgdfgdfgdfgdfgdfg</td>
    								  <td>TestHtml</td>
    							 
    							  </tr>
    							  <tr>
    								  <td><input type="checkbox" id="chkbx1" width="2px"></td>
    								  <td><a href="#"><img class="imgsrc" src="" alt=""></a></td>
    								  <td>Rajat</td>
    								  <td>TestHtml</td>
    								  <td>TestHtml</td>
    							
    							  </tr>
    							
    								  <td><input type="checkbox" id="chkbx1" width="2px"></td>
    								  <td><a href="#"><img class="imgsrc" src="" alt=""></a></td>
    								  <td>Rajat</td>
    								  <td>TestHtml</td>
    								  <td>TestHtml</td>
    							
    							  </tr>
    							</tbody>
    						</table>
                         </div>
    
                         <div class="clear"></div>
                         <div id="buttonsec">
                              <p class="login button"> 
                                   <input type="button" value="Create TestHtml" onClick="location.href='abc.html' " /> 
      
                                    <input type="button" value="Delete" onClick="return deleterows();"/> 
                              </p>
                         </div><!-- buttonsec ends-->
                  </div><!-- contentsec ends-->
    
               </div> <!-- wrappera ends-->
               <div class="clear"></div>
           </div>  <!-- end of wrapper -->
    <footer></footer> <!-- footer  ends-->
    </body>
    
    </html>
    Thanks in advance

  2. #2
    Join Date
    Apr 2014
    Posts
    4
    Css for above html page is :
    Code:
    <style type="text/css">
    html, body {
    	height: 100%;
    	 position: relative; 
       /* min-height: 100%; */
    }
    body {
    	margin: 0 0 35px 0; /* bottom = footer height */
    	padding: 0px;
    	background-color:#FAFBC6;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	color:#000000;
    	height: 100%;
    	min-height:100%;
    }
    .wrappera {
    	overflow: hidden;
    	padding: 0px 0px 0px 0px;
    	background-color:#FAFBC6;
    	
    }
    /* Wrapper */
    .wrapper {
    	overflow: hidden;
    	padding: 0px 0px 0px 0px;
    	background-color:#FAFBC6;
    	min-height:100%;  /* 28/3 */
    	width:100%;        /* 28/3 */
    	
    }
    .headwrapper {
    	height: 80px;
    	
    	background-color:#3399FF;
    
    	box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, .1);
    }
    .logo {
    	overflow: hidden;
    	height: 50px;
    
    }
    
    .logo h1 a {
    	display: block;
    	float: left;
    	padding: 5px 0px 0px 10px;
    	letter-spacing: -0px;
    	text-align: center;
    	text-decoration: none;
    	text-shadow: 1px 1px 0px rgba(0,0,0,.5);
    	text-transform: uppercase;
    	font-family: 'Abel', sans-serif;
    	font-size: 20pt;
    	font-weight: 100;
    	color: #FFFFFF;
    }
    .menu {
    border: 0px solid #000000;
    width:650px;
    position:absolute;
    height:45px;
    margin: -18px 0 0 300px ;
    }
    #login{
    	position: relative;
    	top: 0px;
    	width: 30%;	
    	padding: 5px 6% 60px 6%;
    	margin: 20px 0 35px 350px;
    	background: rgb(247, 247, 247);
    	border: 1px solid rgba(147, 184, 189,0.8);
    
    }
    #login form{
    width:80%;
    border:0px solid #000000;
    margin-left:35px;
    margin-top:0px;
    }
    .wrappera h1{
    	font-size: 30px;
    	color: #3399FF;
    	padding: 2px 0 10px 0;
    	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    	font-weight: bold;
    	text-align: center;
    	padding-bottom: 30px;
    }
    .wrappera label{
    	color: #3399FF;
    	position: relative;
    	
    }
    
    
    input {
      outline: none;
    }
    .wrappera input {
    	width: 88%;
    	margin-top: 4px;
    	padding: 10px 5px 10px 32px;	
    	border: 1px solid rgb(178, 178, 178);
    	
    }
    .wrappera input:active,
    .wrappera inputfocus{
    	border: 1px solid rgba(91, 90, 90, 0.7);
    	background: rgba(238, 236, 240, 0.2);	
    	
    } 
    /*styling both submit buttons */
    .wrappera p.button input{
    	width: 25%;
    	cursor: pointer;	
    	background: #3399FF;
    	padding: 3px 5px;
    	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    	color: #fff;
    	font-size: 16px;	
    	border: 1px solid rgb(28, 108, 122);	
    	margin-bottom: 10px;	
    	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    
    }
    .wrappera { width:100%;
    /*height :550px; 
    border:thin #000000; */
    border: 1px solid #000000; 
    height:100%;
    min-height:100%;
    }
    
    
    .wrappera p.button input:hover{
    	background: rgb(74, 179, 198);
    }
    .wrappera p.button input:active,
    .wrappera p.button input:focus{
    	background: rgb(40, 137, 154);
    	position: relative;
    	top: 1px;
    	border: 1px solid rgb(12, 76, 87);	
    	
    }
    .sidebarleft {
    position:relative;
    float:left;
    margin:15px 0 0 10px;
    width:150px;
    height:auto;
    overflow: hidden;
    border:1px solid #000000;
    }
    
    .contentsec {
        float: left;
        width: 950px;
        overflow:hidden;
        padding: 0;
        margin: 10px 0 10px 5px;
    	position:relative;
    	border:1px solid #000000;
    }
    
    .contentsec table{
    border:0px #000000 thin;
    text-align:left;
    table-layout:auto;
    width:925px;
    margin-top:8px;
    float:left;
    margin-left:-50px;
    
    }
    .contentsec tr{
    border:1px #000000 thin;
    background-color:#29BBEB;
    
    }
    .contentsec td{
    border:1px #000000 thin;
    }
    .contentsec th{
    width:auto;
    border:1px #000000 thin;
    background-color:#53A9FF;
    text-align:center;
    
    }
    .contentsec input {
    	width:15px;	
    	margin-top:2px;
    	padding: 0;	
    	border: 1px solid rgb(178, 178, 178);
    }
    .contentsec a{
    text-decoration:none;
    color:#000000;
    padding-left:0px;
    }
    .contentsec h1{
    	font-size: 30px;
    	color: #3399FF;
    	padding: 2px 0 10px 0;
    	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    	font-weight: bold;
    	text-align: center;
    	padding-bottom: 30px;
    }
    .contentsec label{
    	color: #3399FF;
    	position: relative;
    	
    }
    .contentheader {
        float: left;
        width: 940px;
        overflow: hidden;
        padding: 0;
        margin: 5px 0 0 2px;
    	position:relative;
    	border:0px solid #000000;
    	text-align:left;
    	height:30px;
    	background-color:#3399FF;
    	}
    .contentheader h1{
    	font-size: 18px;
    	color: #FFFFFF;
    	padding:0;
    	margin:3px 0 0 5px;
    	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    	font-weight: bold;
    	text-align: left;
    	padding-bottom:5px;
    }	
    #buttonsec {
    float: left;
        width: 250px;
        overflow: hidden;
        padding: 0;
        margin: 0 200px 0 0;
    	position:relative;
    	border:1px solid #000000;
    	margin:5px 0 0 680px;
    }
    
    .tabsec{
    
        overflow: hidden;
        padding: 0;
        position:relative;
        border:0px solid #000000;
        list-style:none;
        height:2em;
    	margin:25px 0 0 20px; 
       
    }
    
    .tabsec ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    float:right;
    }
    .tabsec li
    {
    float:left;
    
        margin-right:0.10em; 
    	width:9.6em;
    
    }
    .tabsec a:link,a:visited
    {
    display:block;
    width:10em;
    /*font-weight:10px; */
    color:#FFFFFF;
    background-color:#0066FF;
    text-align:center;
    padding:4px;
    text-decoration:none;
    
    height:1.2em;
        border:0.04em solid #000;
        border-bottom:0;
    	font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
       
       /* CSS 3 elements */
        webkit-border-top-right-radius:0.90em;
        -webkit-border-top-left-radius:0.90em;
        -moz-border-radius-topright:0.90em;
        -moz-border-radius-topleft:0.90em;
        border-top-right-radius:0.90em;
        border-top-left-radius:0.90em;  
    }
    .tabsec a:hover,a:active
    {
    background-color:#FFFFFF;
    color:#000000;
    
    
    }
    a.active{
        background-color:#FFFFFF;
        color: #000000;
    
    }
    .current a:hover {
        background: #FFFFFF;
    
    }
    
    
    
    p.login.button,
    p.signin.button{
    	text-align: right;
    	margin: 5px 0;
    }
    
    footer {
    padding-top:5px;
    height: 35px;
    position: relative;
        left: 0;
        bottom: 0;
     clear:both;   /* 28/3 */
        width: 100%;   /* 28/3 */
    	background-color:#3399FF;
    margin-top: 0px;     /* 28/3 */
    display:block;    /* 28/3 */
    	box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, .1);
    	border:1px solid #000000;
    }
    .tableblock {
    position: relative;
    	top: 0px;
    	width: 87%;	  /*50%*/
    	padding: 0px 6% 10px 6%;
    /* 	margin: 40px 0 5px 6px;   margin: 40px 0 35px 150px; 
    	background: rgb(247, 247, 247);*/
    	border: 1px solid rgba(147, 184, 189,0.8);
    	overflow:hidden;
    }
    .clear {
    width:100%;
    margin-bottom:2px;
    padding-bottom:11px;
    border:1px solid #000000;
    }
    </style>
    Last edited by jedaisoul; 04-16-2014 at 03:09 PM. Reason: code tags added

  3. #3
    Join Date
    Apr 2014
    Location
    Saudi Arabia
    Posts
    40
    There is a problem in CSS. Correct it

  4. #4
    Join Date
    Apr 2014
    Posts
    4
    thanks mehri,

    but can you help which CSS part is incorrect, i tried a lot but no result
    i googled and found that for footer we need to add height:100%, min-height:100% in body and and its sub categories. Also add height in footer.

    Thanks in advance

  5. #5
    Join Date
    Mar 2012
    Posts
    1,494
    There is too much code. You will be very lucky if anyone will, for free, devote their time to debugging it! You really need to create a simplified example of the issue without all the irrelevant code. You never know, if you did that, you might solve the issue yourself!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles