Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Liquid layouts, z-index, and pain killers.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25932
    drmanitoba
    Member

    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:



    freeblankets! media.

    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!

    #62692
    drmanitoba
    Member

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

    #62998
    drmanitoba
    Member
    "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%.

    #63004
    drmanitoba
    Member
    "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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.