SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    153
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    issues with css button # line - included image

    Hello,
    i have a css issue that i cant seem to resolve.
    I have css button and a line which should be above the button but its not. the button is designed to pull down a div tag on click which works.
    everything works except for the css line..it seem want to appear above another div tag.
    any help you can provide would be greatly appreciated.

    i included a screenshot for your review:
    css1.JPG


    HTML Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Simple Slide Panel</title>
    
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){
    			$(".btn-slide").click(function(){
    				$("#panelcategory").slideToggle("slow");
    				$(this).toggleClass("active"); return false;
    			});	 
    		});
    	</script>
    
    <style type="text/css">
    * {	margin: 0;
    	padding: 0;
     }
    
    #spacing
    { 	height: 10px; }
    		
    .body
    {	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size:13px;	
    	font-style: normal;
    	width: 950px;	
    	margin: 0 auto;						
    }
    
    #panelcategory 
    {	font: 75%/120% Arial, Helvetica, sans-serif;
    	background: #edd000;
    	display: none;
    }
    
    .slidecategorylink 
    {	border-top: solid 4px #edd000;
    }
    
    .btn-slide {
    	-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
    	box-shadow:inset 0px 1px 0px 0px #ffec64;
    	background-color:#ffec64;
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	border-radius:6px;
    	border:1px solid #ffec64;
    	display:inline-block;
    	color:#333333;
    	font-family:arial;
    	font-size:15px;
    	font-weight:bold;
    	padding:6px 24px;
    	text-decoration:none;
    	text-shadow:1px 1px 0px #ffee66;
    }
    .active 
    {	background-position: right 12px;	}
    
    div.leftinformation
    {	float:left;
    	width: 49.5%;
    	background: red;
    	height: 50px;
    }
    
    div.rightinformation
    {	float:right;
    	width: 49.5%;
    	background: green;
    	height: 50px;
    }
    div.test
    {	border:4px solid green;
     }
    
    </style>
    </head>
    
    <body id="body">
    
    	<div >
    		<div class="leftinformation"> col 1 </div>
    		<div class="rightinformation">col 2 </div>
    	</div>
    	
    	<div >
    		<center>
    			<div id="panelcategory">
    				you can put content here 
    				
    				<table  cellpadding="0" cellspacing="5">
    					<tr>
    						<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">Category</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
    					</tr>
    					<tr>
    						<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">Category</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
    						<td><input type="checkbox" name="vehicle" value="Bike">category</td>
    					</tr>
    				</table>	
    			</div>
    			</center>			
    			<center> <p class="slidecategorylink"> <a href="#" class="btn-slide">Project category selection</a></p></center>
    	</div>
    </body>
    
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    One option is to set the div that contains the panelcategory content to clear: both.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    153
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    One option is to set the div that contains the panelcategory content to clear: both.
    Thanks for the help ralph.m
    your suggestion worked...
    Never new or even thought about clear: both
    learned something new..

    thanks again


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
  •