[solved] help with a 3 column layout

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
glennn.php
Forum Members
Forum Members
Posts: 26
Joined: Thu Aug 09, 2007 10:51 am

[solved] help with a 3 column layout

Post by glennn.php »

i'm just learning this wonderful script - can someone provide me a simple 3 column layout with which i can get to know this script while building the site?

I've searched the forums for one, but the few i found didn't work right...

I sincerely appreciate any help -

Glenn
Last edited by glennn.php on Thu Aug 09, 2007 8:21 pm, edited 1 time in total.
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: help with a 3 column layout

Post by RonnyK »

Find below the code for a 3-column layout based on the "CSSmenu Top + 2 COL". The idea is to have two sidebars called, floating LEFT and RIGHT and then pushing the content in the remaining area. Check the CSS that comes with the default installation to do what you want. I only inserted the area that is touched by inserting a third column. If you need more, I can post the full template.

Code: Select all

   <!-- Start Content (Navigation and Content columns) -->
   <div id="content">

      <!-- Start Sidebar -->
      <div id="leftsidebar">
      </div>
      <!-- End Sidebar -->

     <!-- Start Right Sidebar  -->
     <div id="rightsidebar" align='center'>
     <hr class="accessibility" />
     </div> 
     <!-- End Right Sidebar  -->


      <!-- Start Content Area -->
      <div id="main">
         <h2>{title}</h2>
         {content} <br />
         <!-- Start relational links -->
         <div class="hr"></div>
         <!-- End relational links -->
       <hr class="accessibility" />
      </div>
      <!-- End Content Area -->
Stylesheet:

Code: Select all

div#leftsidebar {
   float: left;
   margin-left: 0px;
   margin-right: 0px;
   width: 160px;   
   padding: 2px;
}

div#rightsidebar {
   float: right;
   margin-left: 3px;
   margin-right: 3px;
   margin-bottom: 5px;
   width: 160px;
   padding: 0px;
}

div#main {
   float: left;
   width: 680px; 
   margin-left: 0px;
   margin-right: 0px;
   padding: 0px;
   background-color: #EFEFEF ;
}

Ronny
glennn.php
Forum Members
Forum Members
Posts: 26
Joined: Thu Aug 09, 2007 10:51 am

Re: help with a 3 column layout

Post by glennn.php »

thanks rodney - yes, could you post the whole template so i can study it? i'm somewhat familiar with float: right, left, but still new at it, as well as new with this script...

i'm assuming i just save the entire code as a new template, and then replace stylesheets.css with this css file...?

thanks
g
glennn.php
Forum Members
Forum Members
Posts: 26
Joined: Thu Aug 09, 2007 10:51 am

Re: help with a 3 column layout

Post by glennn.php »

sorry - i meant Ronny :) ...

i think i can use this after looking at it, thanks...

G
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: help with a 3 column layout

Post by RonnyK »

Glenn,

the easiest way is copying the original template to a new one, with the copy-button in the templates area. Then replace the original area with the area I inserted earlier. Also go to the Stylesheets, copy the original stylesheet that is for the template to a new name, within the templates go to the CSS_button, unattach the orignal one, attach the new copied one, and change the logic there. Now you have a new template/stylesheet, that can be used, while all default content is still the same.

I didn't sent the total template earlier, as it will work on most templates, it's just the logic you might want to use, so with a small change this will be the same for the "2-col left menu", to be replaced with a third column. So this is only the "active" part for the third column.

Ronny
glennn.php
Forum Members
Forum Members
Posts: 26
Joined: Thu Aug 09, 2007 10:51 am

Re: help with a 3 column layout

Post by glennn.php »

yeah, i'm figuring this out now...

i'm just impatient :)
glennn.php
Forum Members
Forum Members
Posts: 26
Joined: Thu Aug 09, 2007 10:51 am

Re: help with a 3 column layout

Post by glennn.php »

got it - awesome, thanks...

this is a nice script - so many are way too tedious for the average html ignorant client...

thanks again...

GN
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: help with a 3 column layout

Post by RonnyK »

I was just typing, that if you wanted the "CSSmenu top - 2 col " layout, that I could give the full template/stylesheet, but you probably went for another template.

But you already succeeded,

Ronny
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: help with a 3 column layout

Post by Dr.CSS »

You can also get some wireframe templates @...

http://themes.cmsmadesimple.org/Theme_Frameworks.html
Used
New Member
New Member
Posts: 2
Joined: Wed Jan 28, 2009 1:03 pm

Re: [solved] help with a 3 column layout

Post by Used »

Ronny,
I am pretty new here and i am looking for a 3 column theme. Can you send me the full theme? I tried to modify the 2 column version to 3 columns like you explained to Glenn.php, but it is not working. It's probably just me, but it would help if you colud send me the theme so i can see what i do wrong.

Thanks.
Post Reply

Return to “Layout and Design (CSS & HTML)”