Grow your CSS skills. Land your dream job.

Liquid layouts, z-index, and pain killers.

  • # August 29, 2009 at 9:07 pm

    Howdy, y’all!

    I’m having some trouble with a comp I’m trying to throw together for a site with a liquid layout.

    My high fidelity looks a little something likea this:

    [img]http://freeblankets.com/manitoba/images/wireframe3_web.png[/img]

    A live demo of what I’ve managed to build thus far can be found here: http://freeblankets.com/manitoba/wireframe/

    So, first things is that the liquid engine seems to be working pretty well. I’ve been using relative units and all that good stuff to get everything to flex, but, if you’d kindly play with your browser windows, or are miraculously running your monitor at 800 x 600 you’ll note that the small blue text box in the header does two odd things. Most noticeably it overlaps the logo image and does not, in any way, resize according to the rightmost edge of the image. It does however obey the edge of the window in proper proportion according to the CSS which looks something like this:

    Code:
    #tagline {

    height: 48.484%;
    width: 56.862%;
    float: right;
    position: relative;
    z-index: 99;
    margin-top: 1.960%;
    margin-left: 40.686%;
    margin-right: 3.921%;
    background-color: #dae8f3;
    padding-right: 2.586%;
    padding-left: 2.586%;
    }

    This is next to the logo’s CSS which applies to a div enclosing the image and not the <img> tag itself (because that would just be silly ;).

    Code:
    #logo {

    width: 326px;
    height: 350px;
    margin-left: 3.921%;
    margin-right: 64.117%;
    /* background-color: #2c1423; */
    z-index: 99;
    position: absolute;
    float: left;
    }

    Here’s the HoTMetaL for the whole page:

    Code:
    < ?xml version="1.0" encoding="UTF-8"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    Donec aliquam imperdiet euismod. Curabitur facilisis mi quis sem accumsan rhoncus. Proin urna elit, aliquet non feugiat a, tempor id enim. In lacinia urna nibh, non vulputate dui. Cras tempus euismod rutrum. Duis pretium congue consequat. Cras ultricies ornare magna vitae porttitor. Maecenas eu consequat nulla. Phasellus lectus urna, vulputate at porta mattis, lacinia non massa. Nam malesuada eleifend molestie. Donec scelerisque euismod ultrices. Nulla accumsan sapien ornare nisi vestibulum pulvinar. Integer nec est nulla. Maecenas faucibus, arcu in gravida accumsan, libero tellus tempus tellus, non suscipit lacus nunc in sapien. Vestibulum pretium blandit sem a laoreet. Nulla adipiscing libero et nunc placerat eleifend. Quisque eros sem, gravida ac eleifend nec, auctor vitae nibh. Nam a enim enim. Mauris commodo magna ut justo tincidunt semper. In metus nunc, suscipit non iaculis at, porttitor feugiat orci.


    And here’s the entire stylesheet for good measure:

    Code:
    h2 {

    font-family: Georgia, serif;
    font-size: 1.4em;
    font-style: italic;
    font-weight: 100;
    }

    #header {

    width: 100%;
    height: 350px;
    }

    #nav {

    width: 100%;
    height: 100px;
    margin-top: 4.882%;
    background-color: #b9d0d6;
    float: right;
    }

    #tagline {

    height: 48.484%;
    width: 56.862%;
    float: right;
    position: relative;
    z-index: 99;
    margin-top: 1.960%;
    margin-left: 40.686%;
    margin-right: 3.921%;
    background-color: #dae8f3;
    padding-right: 2.586%;
    padding-left: 2.586%;
    }

    #logo {

    width: 326px;
    height: 350px;
    margin-left: 3.921%;
    margin-right: 64.117%;
    /* background-color: #2c1423; */
    z-index: 99;
    position: absolute;
    float: left;
    }

    #main {

    background-color: #ccccff;
    margin-top: 1.960%;
    margin-right: 3.921%;
    margin-left: 3.921%;
    float: left;
    width: 94%;
    }

    The second problem I’m having is the rightmost edge of the #tagline section (can’t seem to get this one box to behave at all). If you look at the CSS, the margin-right is set to 3.921%. This is the same for the #main section. However, one look at the layout and it is abundantly clear that the right margins of the #main and #tagline sections are not aligned.

    As far as I can tell this has to do with the CSS z-index positioning being used on the logo. My sole reason for using positioning at all (because I wouldn’t use it unless I ABSOLUTELY had to) was to achieve the overlapping effect seen in the wireframe. I haven’t built the nav yet, but it will be contained inside that dark blue stripe that falls behind the logo and I’m assuming that in this current state, the nav won’t obey the image’s edge either which will only cause further headaches.

    I’ve tried a lot of different workarounds and hacks and all kinds of nonsense. I’ve resorted to heavy drinking and drug abuse and last night my dogs started discussing odd ties between James Joyce and Soren Kierkegard which only further impaired my ability to come to a rational solution to this problem.

    In short, HALP!

    # August 29, 2009 at 11:02 pm

    I would apply a wrapper div around everything so that your main content stays in the center of the page and the rest of the site can resize. Otherwise, when someone resizes the browser window, the site will become completly useless. Then have the content relative to the wrapper instead of the browser

    so put the header, logo, and that big content area below the header in a div with an id of wrapper

    and then on the wrapper in your css, apply margin 0 auto; to keep it in the center will relative positioning so everything inside stays relative to the wrapper.

    # August 29, 2009 at 11:17 pm

    I added that and the footer for good measure, but that still hasn’t solved the issue of the tagline vs. the logo.

    # August 29, 2009 at 11:19 pm

    is that change live?

    # August 29, 2009 at 11:20 pm

    make sure the wrapper has a width. Try 960px to start with

    # August 29, 2009 at 11:56 pm
    "cybershot" wrote:
    make sure the wrapper has a width. Try 960px to start with

    The change is live, but I don’t want to set a pizel width because the layout is supposed to be liquid. I have the width of the wrapper set to 100%.

    # August 30, 2009 at 12:11 am

    ok, but why do you want that? If I resize my browser to smaller than your page layout will handle, then things run into each other. I think you can supply a min-width to the wrapper div and leave the width to 100% that might solve the problem. Maybe someone else will have a better idea.

    # August 30, 2009 at 6:49 am
    "cybershot" wrote:
    ok, but why do you want that? If I resize my browser to smaller than your page layout will handle, then things run into each other. I think you can supply a min-width to the wrapper div and leave the width to 100% that might solve the problem. Maybe someone else will have a better idea.

    Well the idea behind a good liquid layout is that the elements won’t run into each other. That’s my question, really. I want to know how to make the tagline box recognize the right edge of the logo so it resizes according to that and not the left edge of the browser window.

    # August 30, 2009 at 11:35 am

    well even if it did recognize the right edge, it would would just flow underneath it instead of on top of it. I think what you need to do is use min-width and max-width properties. Find the min-width that you site will look good and put that into your css.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".