SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 'column' merging and 'row' merging

    Is CSS capable of getting the result as in the screenshot. A block is a white multi form element. Block element heights are variable. Block width is fixed.
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Please just upload it to tinypic or photobucket and post a direct link to it here (obscure the link to avoid the spam filter)

    Otherwise we have to wait for it to be approved.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this bit.ly link

    bit.ly/bAaL63

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If the block heights are dynamic then it could always break. You would need JS to make sure it is completely stable.

    The question I want to know is, why in the world would you want that kind of layout? I could sorta see a potential page in there, but there are just too many overlaps to consider building a page like that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ryan said I can't see how that would work for an actual layout. I'd need to see that image populated with the content that you are going to use as at present it doesn't really make much sense to me.

    Layouts are seldom blocks arranged like that although many designers think they can be.

    Do you have an image of what the site would look like with content inside and then perhaps we could be more helpful?

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is still at a photoshop stage. The idea is to generate different layouts by passing a grid like this:


    1111
    ABCC
    BBCD
    EFFD
    GHFD
    GGII
    --I-


    Imagining text flowing inside the blocks is the best I can do for now. Perhaps sticking to fixed heights makes it possible.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Making fixed heights would be possibe, but content would overflow unless you use scrollbars in each box, which would look quite nasty IMHO
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes, it's not really a feasible design but if you have a PSd you can show us we could offer some ways of going about it.

    You could code it all with fixed heights but it would break at the earliest opportunity. I have never come across a site designed like that and I code about 3 or 4 new ones every week.

    You could float everything but it would be very fragile..

    This is just a rough mock up but is only working in Firefox and broken everywhere else.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    html, body {
        margin:0;
        padding:0
    }
    body {
        padding:20px 0;
        background:#ebebeb
    }
    h1, p {
        margin:0 0 .9em;
        padding:5px;
        line-height:1.4;
    }
    #outer {
        width:964px;
        margin:auto;
        border-bottom:none;
    }
    .block1, .block2, .block3, .block4, .block5, .block6, .block7, .block8 {
        background:#fff;
    }
    #header {
        border:5px solid #bfbfbf;
        min-height:295px;
        background:#fff;
    }
    * html #header {
        height:295px
    }
    .block1 {
        width:470px;
        border-right:5px solid #bfbfbf;
        border-bottom:5px solid #bfbfbf;
        border-left:5px solid #bfbfbf;
        min-height:297px;
        float:left;
        margin-right:4px;
    }
    .block2 {
        border-bottom:5px solid #bfbfbf;
        border-right:5px solid #bfbfbf;
        min-height:290px;
    }
    * html .block1, * html .block2 {
        height:290px
    }
    .block1a {
        width:228px;
        min-height:141px;
        border-right:5px solid #bfbfbf;
        border-bottom:5px solid #bfbfbf;
        float:left;
    }
    * html .block1a {
        height:141px;
    }
    .b3spacer, .b5spacer {
        float:right;
        width:1px;
        height:140px;
    }
    .b5spacer {
        float:left;
        height:162px
    }
    .block3 {
        float:right;
        clear:right;
        min-height:443px;
        border:5px solid #bfbfbf;
        border-right:none;
        width:233px;
        border-right:5px solid #bfbfbf;
        margin-right:-5px;
    }
    * html .block3 {
        height:443px;
    }
    .block4 {
        width:235px;
        min-height:138px;
        float:left;
        border-bottom:5px solid #bfbfbf;
        border-left:5px solid #bfbfbf;
    }
    * html .block4 {
        height:138px;
    }
    .block5 {
        width:476px;
        min-height:286px;
        float:right;
        border-left:5px solid #bfbfbf;
        border-bottom:5px solid #bfbfbf;
    }
    * html .block5 {
        height:286px
    }
    .block5a {
        width:228px;
        height:121px;
        border-top:5px solid #bfbfbf;
        border-right:5px solid #bfbfbf;
        float:left;
        clear:left;
    }
    .block6 {
        min-height:350px;
        border-bottom:5px solid #bfbfbf;
        width:468px;
        border-left:5px solid #bfbfbf;
    }
    * html .block6 {
        height:350px
    }
    .block7 {
        float:right;
        width:481px;
        min-height:298px;
        border-left:5px solid #bfbfbf;
        border-bottom:5px solid #bfbfbf;
        border-right:5px solid #bfbfbf;
    }
    * html .block7 {
        height:298px;
    }
    .block8 {
        width:232px;
        height:146px;
        background:#ebebeb;
        float:right;
        clear:right;
        border-top:5px solid #bfbfbf;
        border-left:5px solid #bfbfbf;
        border-bottom:5px solid #ebebeb;
        right:-5px;
        top:8px;
        position:relative;
        z-index:99;
    }
    .clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix {
        display:inline-block;
    }
    /* mac hide \*/
    * html .clearfix {
        height: 1&#37;;
    }
    .clearfix {
        display: block;
    }
    /* End hide */
    </style>
    </head>
    <body>
    <div id="outer" class="clearfix">
        <div id="header">
            <h1>Header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
        </div>
        <div class="block1">
            <div class="block1a">
                <p>Block 1a</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.,</p>
            </div>
            <p>block1</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
        </div>
        <div class="block2">
            <div class="b3spacer"></div>
            <div class="block3">
                <p>block3</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
            </div>
            <p>block2</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="block4">
            <p>Block4</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, </p>
        </div>
        <div class="block5">
            <div class="b5spacer"></div>
            <div class="block5a">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, solli</p>
            </div>
            <p>Block5</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, .</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="block7">
            <div class="b3spacer"></div>
            <div class="block8"></div>
            <p>Block7</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. Quisque ut nisl velit. Nullam rhoncus, nulla at dapibus sodales, mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat. mi diam sollicitudin dolor, Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, mollis et erat</p>
        </div>
        <div class="block6">
            <p>Block6</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mi orci, posuere consequat egestas sit amet, consectetur non justo. Nunc et molestie magna. Donec felis massa, sollicitudin eu tempor nec, </p>
        </div>
    </div>
    </body>
    </html>


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
  •