Thread: [Intermediate] [CSS] How to make a Tableless Multi-Column Layout

Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1 [Intermediate] [CSS] How to make a Tableless Multi-Column Layout 
    KNOWLEDGE IS POWER

    OG KingFox's Avatar
    Join Date
    Dec 2006
    Age
    28
    Posts
    1,640
    Thanks given
    510
    Thanks received
    795
    Rep Power
    520
    Okay, I figure this is for reals intermediate. This will show you how to make tables, without using <table> tags. This can be very hard for some people, easy for others. Please note that this might also be a tutorial on how to start ur own CSS webpage o.O

    We need to make 2 files first:
    1. index.html
    2. style.css


    Anything that starts with
    div.whatever {
    like that or if it contains the brackets, needs to be placed in Style.css
    Everything else goes in Index.html


    First we need make some new elements in your css. Mine are typically named.
    Code:
    div.inside {
         width: 300px;
         padding: 5px 0 5px 15px;
         background: #DFDFDF;
         color: #0000AF;
         margin-bottom: 15px;
    }
    Code:
    div.outside {
         border: solid 1px #000000;
         background: #EFEFEF;
         padding: 5px 0 5px 15px;
         width: 500px;
         margin: 5px;
    }
    You are allowed to put multiple of each without messing with the format of the other. Just make copies and paste the below to try it out.

    The HTML would look like this:

    Code:
    <!-- Block within a Block -->
    <div class="outside">
        <div class="inside">Hello, World!</div>
        This is an example of a block, within a block.
    </div>


    So that was just to make a new block which will be titled "container" (the area that "contains" all the content.) We will need a couple a new CSS for this:

    Code:
    div.container {
    margin-left: auto; /* This and the below center the container on the page*/
    margin-right: auto;
    border: solid 1px #000000;
    width: 700px;
    min-height: 500px;
    }
    And the new HTML would look like this:

    Code:
    <div class="container">
    
    <div class="outside">
        <div class="inside">Hello, World!</div>
        This is an example of a block, within a block.
    </div>
    
    
    </div>


    Now everything should be put in the middle of the page as shown above.

    ================================================== =====
    Next thing we can do now, is make columns using the float element. This can be alittle tricky at times, so follow carefully what I do. We need to do this first to the CSS:

    Code:
    div.columntitle {
    color: #0000AF;
    font-weight: bold;
    background: #EFEFEF;
    width: 100%;
    }
    Code:
    div.leftcolumn {
    margin-top: 15px;
    margin-left: 15px;
    float: left;
    width: 200px;
    background: #DFDFDF;
    }
    Code:
    div.rightcolumn {
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    float: right;
    width: 450px;
    background: #DFDFDF;
    }
    The width, padding, AND margin WIDTH must be LESS than the container width, or layout will mess up!

    Now the HTML will look like so:
    Code:
    <div class="container">
    
    
    <div class="leftcolumn">
    <div class="columntitle">This is the left column title</div>
    Any text can go here. The more lines u add, the longer this box becomes.
    </div>
    
    <div class="rightcolumn">
    <div class="columntitle">This is the right column title</div>
    Any text can go here. The more lines u add, the longer this box becomes.
    </div>
    
    
    </div>


    ================================================== ======

    So Obviously, theres a few things that can be done here.
    1. The words "test" are on the edge, which doesnt quite look right. We need to define yet another element to the Stylesheet like so:

    Code:
    div.block {
    padding-left:10px;
    background: #AFAFAF;
    border: 1px soild #FF0000;
    }
    And now make ur left and right columns like so:

    Code:
    <div class="leftcolumn">
    <div class="columntitle">This is the left column</div>
        <div class="block">
          Sample Text<br>
          Sample Text<br>
          Sample Text<br>
          Sample Text<br>
        </div>
    </div>
    
    <div class="rightcolumn">
    <div class="columntitle">This is the right column</div>
        <div class="block">
          Sample Text<br>
          Sample Text<br>
          Sample Text<br>
          Sample Text<br>
        </div>
    </div>
    After that, your page should look like this now:




    ================================================== =====

    So now that both columns are done, we need to make a header, like for a banner or text, or whatever.

    First thing we need to do is this:

    Code:
    div.toppage {
    border-bottom: solid 1px #000000;
    height: 100px;
    }
    Then add this to your html right below the container

    Code:
    <div class="toppage"></div>
    So now we have a blank header. Lets add a basic image.

    in the div.toppage we just added, we will be adding this element:

    background-image:url('http://htmlexamples.3owl.com/divtables/images/banner.png') no-repeat;

    so now it will look like this:

    Code:
    div.toppage {
    background-image:url('http://htmlexamples.3owl.com/divtables/images/banner.png');
    background-repeat:no-repeat;
    border-bottom: solid 1px #000000;
    height: 100px;
    }



    ================================================== ======

    Now, there's no way to navigate to any other page, so lets make a top navigation menu going horizontally under the banner!

    First off, we need to define the basic size and everything that the buttons will be contained in. So first, lets make this:

    Code:
    div.navigation {
    border-bottom: solid 1px #000000;
    height: 25px;
    }
    Now, we need to add this:

    Code:
    <div class="navigation">
    
    </div>
    right below this:

    Code:
    <div class="toppage"></div>
    Now you should have this:




    ================================================== =======
    Now we just need to add buttons. So now we must make a new CSS element like so:

    Code:
    div.button {
       border-right: solid 1px #000000;
       width: 75px;
       line-height: 25px;
       text-align: center;
       float:left;
    }
    a.button { text-decoration:none; color: #0000FF; }
    a.button:hover { text-decoration:none; color: #0000FF; }
    a.button:active { text-decoration:none; color: #0000FF; }
    And then add this to the HTML:

    Code:
    <div class="navigation">  <!-- This should already be in the HTML. Just replace it with this -->
        <div class="button"><a class="button" href="#">test</a></div>
        <div class="button"><a class="button" href="#">test</a></div>
        <div class="button"><a class="button" href="#">test</a></div>
        <div class="button"><a class="button" href="#">test</a></div>
        <div class="button"><a class="button" href="#">test</a></div>
    </div>
    Now u come out with this:




    Spoiler for Easy Way Out.:

    So now you have a basic CSS layout. If you want to take the easy way out of doing all this and have the finished layout, you can download it below:
    [Only registered and activated users can see links. ]


    You can see the Live Example here: [Only registered and activated users can see links. ]

    [Only registered and activated users can see links. ]
    Reply With Quote  
     

  2. #2  
    Registered Member

    Join Date
    Oct 2011
    Age
    22
    Posts
    1,891
    Thanks given
    309
    Thanks received
    553
    Rep Power
    698
    Finally a decent tutorial here. Good work.
    Reply With Quote  
     

  3. #3  
    KNOWLEDGE IS POWER

    OG KingFox's Avatar
    Join Date
    Dec 2006
    Age
    28
    Posts
    1,640
    Thanks given
    510
    Thanks received
    795
    Rep Power
    520
    Thanks m8. I try =]

    [Only registered and activated users can see links. ]
    Reply With Quote  
     

  4. #4  
    Extreme Donator


    Join Date
    Nov 2012
    Posts
    646
    Thanks given
    9
    Thanks received
    18
    Rep Power
    1301
    Not bad.
    Reply With Quote  
     

  5. #5  
    KNOWLEDGE IS POWER

    OG KingFox's Avatar
    Join Date
    Dec 2006
    Age
    28
    Posts
    1,640
    Thanks given
    510
    Thanks received
    795
    Rep Power
    520
    Thank you! Will be probably making more tuts... =]

    [Only registered and activated users can see links. ]
    Reply With Quote  
     

  6. #6  
    Cash Back Guaranteed!


    Join Date
    Sep 2012
    Age
    24
    Posts
    247
    Thanks given
    36
    Thanks received
    42
    Rep Power
    164
    Not bad pretty basic in my standards I suggest you learn php and integrate it with your html.
    Spoiler for Rune Plus:
    Reply With Quote  
     

  7. #7  
    Registered Member
    Anthony`'s Avatar
    Join Date
    Sep 2008
    Age
    23
    Posts
    770
    Thanks given
    75
    Thanks received
    164
    Rep Power
    204
    Quote Originally Posted by Dawn_ View Post
    Not bad pretty basic in my standards I suggest you learn php and integrate it with your html.
    Why would he want to do that if it's just something like this? Designers don't need to know PHP, it helps, but not totally required.
    Reply With Quote  
     

  8. #8  
    Registered Member
    Sieu's Avatar
    Join Date
    Dec 2011
    Age
    24
    Posts
    1,167
    Thanks given
    186
    Thanks received
    131
    Rep Power
    160
    pretty simple. but nowadays people use bootstrap/foundation
    Reply With Quote  
     

  9. #9  
    http://smurl.es


    Join Date
    Nov 2012
    Age
    23
    Posts
    516
    Thanks given
    182
    Thanks received
    80
    Rep Power
    96
    Very nice and detailed tutorial, though it seems some of your images are broken.
    Reply With Quote  
     

  10. #10  
    Registered Member dragonxtreme's Avatar
    Join Date
    Jan 2012
    Posts
    330
    Thanks given
    27
    Thanks received
    22
    Rep Power
    0
    why did you not finish the code

    Code:
    .clear {
         clear:both;
    }
    and put this in html

    Code:
    <div class="clear"></div>
    if you don't use this the default height of it will not work properly, this code basically resets the float, i strongly recommend you use it.
    Reply With Quote  
     

Page 1 of 2 12 LastLast

Thread Information
Users Browsing this Thread

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

Similar Threads

  1. [CSS] Three Column Layouts [CSS]
    By Ruby in forum Tutorials
    Replies: 0
    Last Post: 09-06-2012, 08:50 PM
  2. Vote4Rewards with nice css layout
    By Zeik in forum Tutorials
    Replies: 18
    Last Post: 06-14-2012, 07:38 PM
  3. Replies: 4
    Last Post: 06-14-2011, 06:07 PM
  4. HTML and CSS Layout ;)
    By nl pk3er in forum Website Development
    Replies: 7
    Last Post: 04-11-2010, 02:39 AM
  5. [CSS] How to make a SIMPLE CSS file
    By newservermaker in forum Tutorials
    Replies: 7
    Last Post: 01-22-2008, 08:28 PM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •