How can I put three columns on my home page? RSS

• • Reply
  

  AlexanderBla...

  Member

  325 Points

  309 Posts

  How can I put three columns on my home page?

  Jul 03, 2012 06:08 PM|LINK

  I would like to put three columns or areas on my Index.schml page.  Can I do this independent of the _Layout.schtml page?  Here's what I have but does not work:

  @{

      ViewBag.Title = "Home Page";

  }

   

  <div id="left">

   

  <p>

  This is the left column

   

  </p>

   

  </div>

   

  <div id="center">

   

  <p>

  This is the center column

   

  </p>

   

  </div>

  <div id="right">

   

  <p>

  This is the right column

   

  </p>

   

  </div>

   

• • Reply
  

  bbcompent1

  All-Star

  33063 Points

  8516 Posts

  Moderator

  Re: How can I put three columns on my home page?

  Jul 03, 2012 06:22 PM|LINK

  You can control that by using CSS. put each div in with a class.

  Mark as answer posts that helped you.
  
• • Reply
  

  roopeshreddy

  All-Star

  20155 Points

  3328 Posts

  Re: How can I put three columns on my home page?

  Jul 03, 2012 06:26 PM|LINK

  Hi,

  Try the following code!

  <div>
          <div style="width:300px;border:1px solid #000000;float:left;">
              <p>Column 1</p>
          </div>
           <div style="width:300px;border:1px solid #000000;float:left;">
              <p>Column 2</p>
          </div>
           <div style="width:300px;border:1px solid #000000;float:left;">
              <p>Column 3</p>
          </div>
      
      </div>

  Hope it helps u...
  
  

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
  • Marked as answer by AlexanderBlade on Jul 04, 2012 06:01 PM
• • Reply
  

  bbcompent1

  All-Star

  33063 Points

  8516 Posts

  Moderator

  Re: How can I put three columns on my home page?

  Jul 03, 2012 06:32 PM|LINK

  That's one way, another is to control it by way of the CSS file.

  Page Content:

  <div id="contentn1" class="content">
  			<div class="col col1">
  				<h1>LOGO DESIGN</h1>
  				<p>Company and product branding, logos taglines and other identity work.</p>
  			</div>
  			<div class="col col2">
  				<h1>PRINT DESIGN</h1>
  				<p>Marketing material, print advertising, posters, envelopes, mouse pads, seasonal cards, calendars, headed paper, brochures, tickets, packaging.</p>
  			</div>
  			<div class="col">
  				<h1>WEB DESIGN</h1>
  				<p>Corporate sites, web portals, e-commerce solutions, promotional microsites.</p>
  			</div>

  
  CSS to cotnrol it:

  div.content h1 {
  	font-size:24px;
  	margin:0px;
  	padding:0px;
  	line-height:100%;
  }
  div.content p {
  	font-size:16px;
  }
  div.col {
  	width:195px;
  	float:left;
  	text-align:left;
  	padding:55px 0 0;
  	color:#84716b;
  	background:url("img/columnbg.png") top center no-repeat;
  }
  div.col1, div.col2 {
  	margin-right:40px;
  }
  div.col h1 {
  	height:70px;
  }
  
  div#contentn1, div#contentn2, div#contentn3 {
  	width:665px;
  	width:690px;
  	margin:0 auto;
  	padding-top:100px;
  }
  
  div#contentn1 {
  	width:575px;
  }
  
  #contentn1 div.col {
  	width:165px;
  }
  
  #contentn1 p {
  	font-size:14px !important;
  }

  (http://www.adline.ro)

  Mark as answer posts that helped you.
  
  • Marked as answer by AlexanderBlade on Jul 04, 2012 06:05 PM
• • Reply
  

  AlexanderBla...

  Member

  325 Points

  309 Posts

  Re: How can I put three columns on my home page?

  Jul 04, 2012 05:06 AM|LINK

  I like the control that you get using css file but some of your elements don’t seem to match the html file.  I don’t see any of these… contentn1, contentn2, contentn3…in the html file.  Is something missing maybe?

• • Reply
  

  roopeshreddy

  All-Star

  20155 Points

  3328 Posts

  Re: How can I put three columns on my home page?

  Jul 04, 2012 05:09 AM|LINK

  Hi,

  Nothing, it may be the code copied from his project/testbed! 

  Did you tried the code, which i have given?

  Hope it helps u...

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
• • Reply
  

  teguhyuliant...

  Participant

  1370 Points

  372 Posts

  Re: How can I put three columns on my home page?

  Jul 04, 2012 07:58 AM|LINK

  You can edited your script code using value that you need. For the value locations, I think you can try, because some script code, especially for schtml its different with another script.

• • Reply
  

  AlexanderBla...

  Member

  325 Points

  309 Posts

  Re: How can I put three columns on my home page?

  Jul 04, 2012 05:54 PM|LINK

  Yes it works great.  Thanks for you help roopeshreddy.  Both codes work and I'll tweek it to center the div elements.  I'll use roopeshreddy's as I'm not quite sure of my css knowledge/skills.  Guess I'll have to hit the books again.  Thanks Appreciated it!!

  • Edited by AlexanderBlade on Jul 04, 2012 06:04 PM