Results 1 to 5 of 5

Thread: creating layout using css

  1. #1

    Thread Starter
    Fanatic Member karthikeyan's Avatar
    Join Date
    Oct 2005
    Location
    inside .net
    Posts
    919

    creating layout using css

    Hi,

    I need to create below layout using Div's. i should not use table to create this. also i need to do this with css and i have to use % for width and height. Any sample code please. on the below image left border is missing. but i want that as well. Any help please

    Name:  layout.jpg
Views: 149
Size:  6.2 KB
    Loving dotnet

  2. #2
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Re: creating layout using css

    Based from the photo you provided, do you have a CSS and HTML code for that? Maybe you can post them too in this thread.
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  3. #3
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: creating layout using css

    I'd probably use this for the html:
    Code:
    <div id="page">
    
        <div id="content">
            <div id="content_col1">
            </div>
            <div id="content_col2">
            </div>
        </div>
    
        <div id="menu">
        </div>
    
    </div>
    Then in the css, I'd float content to the right, menu to the left and content_col1 to the left.
    The buttons would need to be inside of content_col1 & 2 as needed. to get the inner borders, you could have more div tags inside of col1 & col2

    Id' give the actual CSS, but I'm not completely up to snuff on it... Ive done it before by using a template that was close to what I wanted (found it at Open Source Web Design

    You may be wondering why the menu is after the content even though it's on the left - SEO - Search Engine Optimization - it puts the content up front where crawlers like Google, Bing, etc. are going to find it. It prevents the content of the menu from interfering with what should be indexed, which is the content of the page. That's also why the ids are names simply, page, content, menu, etc.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  4. #4
    Addicted Member masoudk1990's Avatar
    Join Date
    Nov 2013
    Location
    Persia
    Posts
    172

    Re: creating layout using css

    I tried to implement what you want for my own training. Best I could do was this:

    HTML:
    Code:
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="b.css">
    </head>
    <body>
    	<div id="columns">
    		<div id="col1">
    			<div id="row1">
    			</div>
    			<div id="row2">
    			</div>
    			<div id="row3">
    			</div>
    		</div>
    		<div id="col2">
    		</div>
    		<div id="col3">
    		</div>
    	</div>
    	<div id="buttons">
    	</div>
    </body>
    </html>
    Code:
    #columns{
    height:80%;
    width:90%;
    margin: 0 auto;
    }
    
    #col1{
    float:left;
    border-style:solid;
    border-color:gray;
    width:33%;
    height:100%;
    }
    
    #col2{
    border-style:solid;
    border-color:gray;
    width:33%;
    height:100%;
    float:left;
    display:inline-block;
    }
    
    #col3{
    float:right;
    border-style:solid;
    border-color:gray;
    width:33%;
    height:100%;
    }
    
    #clear{
    clear:both;
    }
    I couldn't manage to put all three columns clear by percentage but if you change it to fixed values its okay.
    I know OP didn't provide any sample code, but may someone help to implement it? Since i couldn't implement it too.
    Computer Enterprise Masoud Keshavarz
    For more information contact masoudk1990@yahoo.com

  5. #5
    Serge's Avatar
    Join Date
    Feb 1999
    Location
    Scottsdale, Arizona, USA
    Posts
    2,744

    Re: creating layout using css

    Based on the picture, this should be something like this:

    Code:
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
        .container
        {
            height: 100%;
        }
        .clearfix:before, .clearfix:after
        {
            display: table;
            content: " ";
        }
        .clearfix:after
        {
            clear: both;
        }
        .col1, .col2, .col3
        {
            border: solid 1px #ccc;
            border-collapse: collapse;
            float: left;
            height: 100%;
            width: 32%;
            padding: 5px;
        }
        .subcol
        {
            margin: 20px 5px;
            border-bottom: solid 1px #ccc;
            height: 33%
        }
    </style>
    Code:
    <div class="container clearfix">
        <div class="col1">
            <div class="subcol">
                left column content1
            </div>
            <div class="subcol">
                left column content2
            </div>
                
        </div>
        <div class="col2">
            middle column
        </div>
        <div class="col3">
            right column
        </div>
    </div>
    This will produce something like this:
    Attached Images Attached Images  
    Last edited by Serge; Jun 26th, 2014 at 06:15 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
  •  



Click Here to Expand Forum to Full Width