SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Automatic CSS Grid Planner

    I saw a website about a year ago which helped people to create a CSS layout. For example if you wanted three equal columns it gave you the code automatically. But I cant find the website and I have searched quite a few times to find a similar site but cant find one. Does anyone know of such a site?

  2. #2
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    There are a bunch of sites that offer the service so it comes down to what your specific needs are.

    Yahoo!'s YUI generator is complex and not exactly lightweight, but can give you almost any technical requirement. http://developer.yahoo.com/yui/grids/builder/

    Pagecolumn gives you a simpler method and nice dynamic adjustment stuff - http://www.pagecolumn.com/

    YAML Builder uses a floating toolbox to construct and adjust your grid -- pretty cool. http://builder.yaml.de/

    Those the three I'd look at for a start.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I had a look at the websites you recommended. However, I still have a problem with my layout and cannot find a way to do this with CSS.

    I would like a centered layout with two columns where Column 1 is 75% and Column 2 is 25%. Column 1 has two "rows" where the first row is the main content and the second row is the secondary content; each row is a div. Each row has different backgrounds and content. Column 2 spans the length of both rows in Column 1 and must adjust based on these. I also have a header, main navigation bar under the header and a footer.

    I have tried all kinds of floats and absolutes settings with no success. The content in Column 1 will always vary in size on each page so it must be flexible. Can you suggest any websites where I can view the code for such a layout? I am particularly interested in the CSS part as the XHTML mark-up is not a problem. I am struggling with content in my second row that disappears and content in my 2nd column not starting in the right place :-) I am using a wrapper around all of the content except the footer. Any suggestions?

    Thanks!

  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope this is what you are trying to do. Here is the html and css code for the layout. You can modify it to fit your specific situation but I think this would do the trick.


    This would be the css section

    HTML Code:
    <head>
        <title>two column</title>
    </head>
    
    <body>
    
    
    <div id="container">
    
        <div id="header">
    	<p>header</p>
        </div><!-- end header-->
    	
        <div id="nav">
            
        </div><!--end nav-->
       
       
    	
       
        <div id="col1">
    		<p>
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ipsum a enim dignissim vestibu
    		</p>
    		<p>
    		Cras porta dapibus blandit. Integer commodo, nibh nec suscipit porta, neque magna suscipit dolor, sit amet sollicitudin eros turpis in nibh. Donec semper risus eget lorem volutpat mollis. Maecenas ultrices rutrum dolor eget venenatis. Phasellus vel turpis neque. Donec vehicula tortor id odio molestie non tincidunt sem rutrum. Fusce vulputate, enim ut malesuada ullamcorper, quam nulla ornare mauris, eget tempus purus dui eget est. Donec sit amet arcu vel sapien facilisis semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent in urna quis quam faucibus consequat. Nulla non convallis diam. Duis non risus sit amet neque auctor rutrum. In euismod, lectus vitae congue pulvinar, justo sem euismod metus, id dictum tellus felis sit amet justo.
    
    		</p>
    		<p>
    		Aenean feugiat facilisis orci in porttitor. Nulla lobortis eros sed est vehicula fermentum. Sed tincidunt convallis mauris. Curabitur tempor aliquet semper. Donec placerat eleifend condimentum. In tincidunt, lectus a ultrices vestibulum, lacus odio venenatis odio, vitae pharetra ante risus quis metus. Integer ornare dapibus ante, sit amet vulputate nisl malesuada vitae. Suspendisse rhoncus mattis vestibulum. Ut nec dui vitae massa sollicitudin interdum ut vel nunc. Suspendisse dignissim elementum dignissim. Mauris tristique gravida auctor. Duis accumsan dictum arcu, tristique suscipit tortor fermentum sit amet. Sed eu neque eget erat eleifend pellentesque vel a enim. Praesent at tortor eget tortor tempus sodales. Nullam molestie congue odio quis mollis. Maecenas mattis massa ac nulla luctus fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    		</p>
    
    	
        </div><!--end col1-->
    	
    	<div id="col2">
        <p class="sidebar">Col2</p>
        </div><!--end col2t-->

    This section is the css
    HTML Code:
    #container
    {
    text-align: left;
    margin: auto;
    width: 970px;
    
    }
    
    #header{
    border:solid 1px #DEDEDE;
    background:#EFEFEF;
    color:#222222;
    padding:0px;
    text-align:left;
    margin-left: 0px;
    height:60px;
    }
    
    #nav{
    margin-top: 3px;
    border:solid 1px #DEDEDE;
    background:#EFEFEF;
    color:#222222;
    padding:0px;
    text-align:left;
    margin-left: 0px;
    height:15px;
    }
    
    #col1{
    margin-top: 4px;
    border:solid 1px #DEDEDE;
    background:#FFFFCC;
    color:#222222;
    padding-left:0px;
    padding-right:0px;
    text-align:left;
    width: 670px;
    float: left;
    margin-left: 0px;
    }
    
    
    #col2{
    margin-top: 4px;
    border:solid 1px #DEDEDE;
    background:#FFFFCC;
    color:#222222;
    padding-left:0px;
    padding-right:0px;
    text-align:left;
    width: 292px;
    float: right;
    margin-left: 4px;
    }
    
    
    #footer{
    margin-top: 4px;
    border:solid 1px #DEDEDE;
    background:#EFEFEF;
    color:#222222;
    padding:0px;
    text-align:left;
    width: 100%;
    float: left;
    margin-left:0px;
    height:18px;
    }
    
    p{
    margin-top: 0px;
    font-size: 8pt;
    font-family: arial, verdana, sans-serif;
    }
    

  5. #5
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Thank you for the help. Based on what you wrote I went through all of my markup and CSS and managed to adapt it using your guidelines into a format that works well and is easily maintainable. Thank you very much!

  6. #6
    SitePoint Zealot Kayarc's Avatar
    Join Date
    Sep 2009
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Were you referring to 960.gs ? This is a pretty slick system. I've used it a few times in constructing sites. Systems like this are very good for quickly throwing up a site or a collection of sites. The 960 system also comes with default Photoshop PSDs so you can slice and dice your layouts easily.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •