No replies
shrewdesigns
Offline
newbie
Last seen: 7 years 39 weeks ago
Timezone: GMT-7
Joined: 2012-04-24
Posts: 1
Points: 2

Hello,

I am trying to move some information into a second div with a little space between the two divs. When I did this I threw off alignment on my site. Can someone help realign it? The divs in question are col_two & col_two_1. Also, the logos that were at the bottom of the page before have moved up. Code is below:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
  <head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta NAME="keywords" CONTENT="">
		<meta NAME="description" CONTENT="">
 
 
    <!-- <link rel="shortcut icon" href="" /> -->
    <title>Champcon</title>
 
	<link rel="stylesheet" href="./css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="./css/main.css" media="screen" />
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
   $(window).load(function() {
    $('#slider').nivoSlider({    
    effect: 'fade',
    });
 
    });
    </script>
 
 
 
 
</head>
 
<body>
<!-- Top header start -->
<div id="header" class="header">
 
  <table style="width:100%;padding-top:8px;" class="header">
 
 <tr>
	<td align="center">
 <div class="s_header">
 
 <div class="logo">
 <a href="index.html"><img src="images/logo.jpg" style="border:none;"/></a>
 </div>
 
 
 </div>
</td>
</tr>
</table>
<!-- Top header end -->
 
<div class="header_img"><!-- header Image start -->
 <div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" style="height:194px" class="nivoSlider">
                 <img src="images/header.png" height="194" width="624"alt="" />
                 <img src="images/header2.png" height="194"  width="624" alt="" />
                 <img src="images/header3.png" height="194"  width="624" alt="" />
                <img src="images/header4.png" height="194"  width="624" alt="" />
                <img src="images/header5.png" height="194"  width="624" alt="" />            
			</div>
            </div>
 </div><!-- header Image End -->
<div class="container"> <!-- Container section start -->
<div class="top_nevi"><!-- Top Nevigation start -->
  <ul> 
   <li>
    <a href="index.html" >HOME</a>
   </li>
   <li>
    <a href="aboutus.html" >ABOUT US</a>
   </li>
   <li>
    <a href="products.html" >PRODUCTS</a>
   </li>
   <li>
    <a href="services.html" >SERVICES</a>
   </li>
   <li>
    <a href="support.html">SUPPORT</a>
   </li>
   <li>
     <a href="training.html" class="active" >TRAINING</a>
   </li>
    <li>
    <a href="blog.php">BLOG</a>
   </li>
   <li>
    <a href="contact.html">CONTACT US</a>
   </li>
  </ul>
 
 </div><!-- Top Nevigation End-->
 
 
   <div class="main_contant"><!-- main contant  start -->
 
 
 
    <h1>Training </h1>
	<div class="coll_one">
	<div class="training">
     <h4>Introduction to Salesforce.com <span>$399 (2 days)</span></h4>
	 <div class="content">
	<p>This course is intended for everyone who is new to  Salesforce, or would like to learn more about it. </p>
      <div class="underline">This course will include:</div>
    <ul>
      <li>History and background of Salesforce.com</li>
      <li>Getting Access – logging in, passwords, usernames</li>
      <li>Setting up your user account</li>
      <li>Basic Navigation – Searching for records, Tabs,  Objects</li>
      <li>Explore Salesforce Help – keyword searches,  online training</li>
      <li>Define and explore Salesforce standard objects  such as Leads, Accounts, Contacts, Opportunities, Products, Cases, Activities  and 
 
Documents</li>
      <li>Explore Salesforce standard reports and list views</li>
      <li>Converting a Lead to a  Contact/Account/Opportunity</li>
      <li>Practice creating sample records</li>
      <li>Using Salesforce Chatter</li>
    </ul>
	</div>
</div>
<div class="training">
     <h4>Salesforce.com Administrator  Training 1 <span> $799 (2 days)</span></h4>
 
	  <div class="content">
    <p>This course is intended for new system administrators  responsible for the setup, configuration, and maintenance of their company’s 
 
Salesforce.com  application.</p>
	<div class="underline">This course will include:</div>
    <ul>
      <li>Customize Salesforce - including page layouts,  fields, tabs, objects, formula fields and apps</li>
      <li>Create a secure Salesforce environment – custom  profiles, roles, public groups, sharing rules, teams</li>
      <li>Maintain and import clean data – import wizards,  dataloader, data validation rules, weekly export, field history tracking</li>
      <li>Create high-value reports and dashboards –  including custom report types, custom reports and dashboards</li>
      <li>Setup Salesforce Chatter – how it works, groups,  file sharing, best practices</li>
      <li>Customize Forecasting and Quotas</li>
      <li>Explore Salesforce Quotes</li>
      <li>Explore apps for Salesforce  on the Appexchange</li>
      <li>Explore Salesforce Help - Logging a case with  Salesforce Support, Online Training</li>
      <li>Creating a Salesforce Sandbox</li>
    </ul>
	</div>
</div>
 
 
    <div class="training">
     <h4>Salesforce.com Administrator  Training 2 <span>$899 (2 days)</span></h4>
 
	  <div class="content">
    <p>This course is intended for more experienced system administrators who want  to extend their knowledge to more advanced areas of Salesforce.com.  
 
Prerequisite: <strong>Salesforce.com Administrator Training 1</strong></p>
    <div class="underline">This course will include:</div>
    <ul>
      <li>Workflow Rules – field updates, automatic email  notifications</li>
      <li>Approval Processes</li>
      <li>Record Types and Sales/Support Processes</li>
      <li>Person Accounts</li>
      <li>Creating and maintaining Products and Pricebooks</li>
      <li>Managing multiple currencies</li>
      <li>Setup Salesforce for Outlook </li>
      <li>Setup Salesforce Mobile</li>
      <li>Setup Customer and Partner Portal</li>
      <li>Introduction to Salesforce Content</li>
      <li>Web-to-Lead, Web-to-Case</li>
      <li>Setup Google Docs in Salesforce</li>
      <li>Case Escalation Rules</li>
      <li>Campaign Management</li>
    </ul>
	</div>
   </div>
 
    <div class="training">
     <h4>Introduction to Salesforce.com  Programming <span>$999 (2 days)</span> </h4>
 
	 <div class="content">
    <p>This course is intended for advanced system administrators who want to  learn about API-level customizations to Salesforce using Apex and  
 
Visualforce.  Prerequisite: <strong>Salesforce.com Administrator Training 2 and  some programming experience such as C++, C#, Java, Javascript or Visual 
 
 Basic.  HTML knowledge would also be  helpful.</strong></p>
    <div class="underline">This course will include:</div>
    <ul>
      <li>Getting your own Salesforce Developer Edition  Account</li>
      <li>Introduction to the Eclipse programming  environment</li>
      <li>Working in a Sandbox</li>
      <li>Introduction to Visualforce – creating your  first Visualforce page</li>
      <li>Introduction to Apex  - creating an Apex Trigger, Custom  Controllers</li>
      <li>Introduction to Salesforce Sites – creating and  publishing a site</li>
      <li>Creating test scripts for code migration to  production</li>
      <li>Creating and Deploying Change Sets</li>
     </ul>
	 </div>
	 </div>
 
</div>
<div class="coll_two"> 
 
 
 
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
 
<input type=hidden name="oid" value="00DA0000000IDLt">
<input type=hidden name="retURL" value="http://www.champcon.com">
 
<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
<!--  these lines if you wish to test in debug mode.                          -->
<!--  <input type="hidden" name="debug" value=1>                              -->
<!--  <input type="hidden" name="debugEmail" value="[email protected]">    -->
<!--  ----------------------------------------------------------------------  -->
 
<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
 
<label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
 
<label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" /><br>
 
Class Interest:<br>
<select  id="00NF0000008LhNW" style="width:275px;" multiple="multiple" name="00NF0000008LhNW" title="Class Interest"><option value="Introduction to 
 
Salesforce.com">Introduction to Salesforce.com</option>
<option value="Salesforce Administrator Training 1">Salesforce Administrator Training 1</option>
<option value="Salesforce Administrator Training 2">Salesforce Administrator Training 2</option>
<option value="Introduction to Salesforce  Programming">Introduction to Salesforce  Programming</option>
</select><br>
 
<label for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>
 
<label for="title">Title</label><input  id="title" maxlength="40" name="title" size="20" type="text" /><br>
 
<label for="street">Street Address</label><textarea name="street"></textarea><br>
 
<label for="city">City</label><input  id="city" maxlength="40" name="city" size="20" type="text" /><br>
 
<label for="state">State</label><input  id="state" maxlength="20" name="state" size="20" type="text" /><br>
 
<label for="zip">Zip</label><input  id="zip" maxlength="20" name="zip" size="20" type="text" /><br>
 
<label for="phone">Phone</label><input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
 
<input type="hidden"  id="lead_source" name="lead_source"><option value="Website"/></input>
 
<input  id="00NF0000008LhNg" name="00NF0000008LhNg" type="hidden" value="TRUE" /><br>
 
<input type="submit" name="submit">
 
</form>
 
 
 
</div>
<br />
<div class="coll_two_1">
 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="Q58RKA2EYQVDE">
<table>
<tr><td><input type="hidden" name="on0" value="Course Selection"><strong>Course Selection</strong></td></tr><tr><td><select style="width:250px" 
 
name="os0">
	<option value="Introduction to Salesforce.com">Introduction to Salesforce.com $399.00 USD</option>
	<option value="Salesforce Administrator Training 1">Salesforce Administrator Training 1 $1,199.00 USD</option>
	<option value="Salesforce Administrator Training 2">Salesforce Administrator Training 2 $1,199.00 USD</option>
	<option value="Introduction to Salesforce Programming">Introduction to Salesforce Programming $1,499.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to 
 
pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
 
</div>
 
<div class="clear">
  </div><!-- main content  end -->
 
 
 
   <div class="footer"><!-- footer start -->
    <div class="left_text">
	 <ul>
	 <li><a href="#">Sitemap |</a></li>
	 <li><a href="index.html">Home |</a></li>
	 <li><a href="contact.html">Contact</a></li>
	 </ul><br>
	 <ul>
	 <li><strong>Copyright Champcon.com 2012<strong></li>
 
	 </ul>
 
    </div>
	<!-- Social Media Icons -->
	<a href="http://www.facebook.com/salesforce">
	<div class="img" id="Facebook">
   	</div>
	</a>
   	<a href="https://twitter.com/#!/champcon" >
   	<div class="img2" id="Twitter">
   	</div>
   	</a>
   	<a href="http://www.linkedin.com/company/2158761?trk=tyah" >
   	<div class="img3" id="Linkedin">
   	</div>
   	</a>
   </div>
   <!-- Social Media Icons end -->
 </div> <!-- Container section end -->
 
</body>
 
</html>

CSS

/* ***************************************************************************************
                Document Information
              - Creation Date: 22/03/2012
              - Property of champcon
 *************************************************************************************** */
 body {
  margin:0px; 
  background:url('../images/mainbg.png'); 
  background-repeat:repeat; 
  background-position:top left; 
  overflow-y: scroll !important;
  font-family:"Arial", sans-serif;
  font-size:17px;
  text-align:justify;
  line-height:22px;
  }
 
.header{
  background:url('../images/headerbg.png'); 
  background-repeat:repeat-x;
  width:100%;
  height:85px;
 
}
.s_header{
  width:1024px;
  margin-left:auto;
  margin-right:auto;
}
.logo{
  float:left;
  padding-left:2%;
}
.telephone_no{
height: 50px;
width:146px;
float:right;
background:url('../images/phonebg.png') no-repeat;
padding: 39px 0 0 21%;
font-family:Helios;
color:#0056BC;
font-size:17pt;
}
.header_img{
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}
.top_nevi{
  background:url('../images/topnevbg.png') repeat-x;
  height:52px;
  width:1024px;
  padding-top:20px;
 
}
.top_nevi ul, .top_nevi li {
  margin: 0; 
  list-style:none; 
  list-style-image: none; 
  display:inline;
  color:#F7FFFF;
  font-family:"Arial", sans-serif;
  font-size:13pt;
  padding:0 10px 0 20px;
 
}
.top_nevi li a{
  text-decoration:none;
  color:#F7FFFF;
  font-weight:bold;
}
 
.top_nevi li a.active{
  background:url('../images/activebg.png'); 
  background-repeat:repeat; 
  background-position:top left; 
  overflow-y: scroll !important;
   color:#313E82;
   padding:10px;
  -moz-border-radius:5px 5px 0 0;
   border-radius:5px 5px 0 0;
}
.container{
 
  background-color:#0D55A7; 
  width:1024px;
  padding-bottom:5px;
  margin-left:auto;
  margin-right:auto;
}
 
 
.main_contant{
  background:url('../images/activebg.png'); 
  width:900px;
  background-repeat:repeat; 
  background-position:top left; 
  height:auto;
  color:#444444;
  margin:-24px 3% 3% 3% ;
  padding:10px 30px 10px 45px;
  -moz-border-radius:15px 15px 15px 15px;
  border-radius:15px 15px 15px 15px;
  z-index:1;
   font-family:"Arial", sans-serif;
 
}
 
.main_contant li{
line-height:21px;
list-style:circle;
}
 
.main_contant h1{
 color:#093768;
 font-size:20pt;
 font-family:"Arial", sans-serif;
}
.main_contant h2{
 color:#082F58;
 font-size:10pt;
 font-family:"Arial", sans-serif;
}
.main_contant ul{
margin:0;
}
.bottom_div{
 padding:10px;
}
.bottom_div table .first{
    border-right: 1px solid #646464;
    padding: 5px 15px 5px 0;
    width: 430px;
}
.bottom_div table.last{
   width:450px;
   padding:5px;
 
}
.texthd1{
  color:#2269AB;
  font-size:13pt;
  padding-left:10px;
  font-weight:bold;
}
.error{
 color:#FF0000;
}
.footer{
   background-color:#0D55A7;
    height: 50px;
 
}
 .footer .left_text{
  float:left;
 
}
.footer .img{
   background:url('../images/facebook.png') no-repeat;
   height: 50px;
   width:100px;
   float:right;
 
}
.footer .img2{
   background:url('../images/twitter-2.png') no-repeat;
   height: 50px;
   width:50px;
   float:right;
 
}
.footer .img3{
   background:url('../images/linkedin.png') no-repeat;
   height: 50px;
   width:50px;
   float:right;
 
}
.footer ul, .footer li {
  margin: 0; 
  list-style:none; 
  list-style-image: none; 
  display:inline;
  color:#E9F2FB;
  font-family:"Arial", sans-serif;
  font-size:8pt;
 
 
}
.footer li a{
  text-decoration:none;
  color:#85A7D3;
}
/* Clients Scroll Banner */
#clients-banner {
	position: relative;
	width: 918px;
}
 
#clients-banner-middle-scroll {
	padding-left: 20px;
}
 
#clients-banner-left {
	background-image: url('images/left_banner_bg.png');
	background-repeat: no-repeat;
	height: 114px;
	width: 20px;
	float: left;
	position: absolute;
}
 
#clients-banner-right {
	background-image: url('images/right_banner_bg.png');
	background-repeat: no-repeat;
	height: 114px;
	width: 20px;
	float:	right;
}
 
#clients-banner-middle {
	background-image: url('images/middle_banner_bg.png');
	background-repeat: repeat-x;
	height: 114px;
	float: left;
	position: absolute;
	width: 878px;
	margin-left: 20px;
}
 
#clients-banner-controls {
	position: relative;	
}
 
.client-image {
	display: table-cell;		
	margin-left: 15px;
	margin-right: 15px;
	float: left;
	text-align: center;
}
 
#clients-banner #controls-left {
	background-image: url('images/left_arrow.png');
	background-repeat: no-repeat;
	height: 27px;
	width: 28px;
	position: absolute;
	left: 12px;
	top: 45px;
}
 
#clients-banner #controls-left:hover {
	background-position: 0px -27px;
}
 
#clients-banner #controls-right {
	background-image: url('images/right_arrow.png');
	background-repeat: no-repeat;
	background-position: 0px -27px;
	height: 27px;
	width: 28px;
	position: absolute;
	top: 45px;
	right: 10px;
}
 
#clients-banner #controls-right:hover {
	background-position: 0px 0px;
}
 
#clients-banner .scrollable {
 
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 840px;
	height:90px;
}
 
#clients-banner .scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}
 
#clients-banner .items div {
	float:left;
	width: 875px;
}
 
/* single scrollable item */
#clients-banner .scrollable img {
	float:left;
	padding:2px;
	width: 160px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	margin-left: 23px;
	margin-right: 23px;
}
/* end Clients Scroll Banner */
 
.clear{
clear:both;
}
 
.coll_one{
width:570px;
float:left;
padding:0 20px 0 0;
}
.coll_two {
    background: none repeat scroll 0 0 #F1F1F1;
    border-radius: 12px 12px 12px 12px;
    border-right: 1px solid #CCCCCC;
    float: left;
    min-height: 300px;
    padding: 15px 13px;
    width: 280px;
}
.coll_two label{
width:120px;
float:left;
display:block;
margin:10px 0px;
}
.coll_two input[type='text'],.coll_two textarea,.coll_two select{
margin:10px 0px;
width:150px;
}
.coll_two_1 {
    background: none repeat scroll 0 0 #F1F1F1;
    border-radius: 12px 12px 12px 12px;
    border-right: 1px solid #CCCCCC;
    float: left;
    min-height: 150px;
    padding: 15px 13px;
    width: 280px;
}
 
.underline {
    color: #444444;
    font-weight: bold;
    text-decoration: underline;
}
.training{
background:#F7F7F7;
border:1px solid #BAA696;
margin-bottom:15px;
border-radius: 10px;
}
.training h4{
  background: none repeat scroll 0 0 #003366;
    border-radius: 10px 10px 0 0;
    color: #FFFFFF;
    margin: 0;
    padding: 10px;
}
.training h4 span{
float:right;
font-size:12px;
}
.training .content{
padding:0px 10px;
}
.training p{
color:#000000;
font-size:14px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.training ul{
padding:0;
margin:0;
}
.training li{
background:url(../images/main_menu_marker.gif) no-repeat left top;
list-style:none;
padding-left:20px;
margin:5px 0px;
}
.products{
background:#F7F7F7;
border:1px solid #BAA696;
margin-bottom:15px;
padding:0px 10px;
border-radius: 10px;
}