Page 1 of 1

Liquid layouts, z-index, and pain killers.

Posted: Sat Aug 29, 2009 9:24 pm
by Theory?
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:

Image

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: Select all

#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: Select all

#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: Select all

<?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">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>freeblankets! media.</title>
    
    <link rel="stylesheet" type="text/css" media="all" href="css/styles.css" />
    
    <!-- YUI CSS Reset --> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css" />
    
</head>
 
<body>
 
    <div id="page">
    
        <div id="header">
        
            <div id="logo">
                <img src="images/logo1.png" alt="freeblankets! logo" />
            </div>
            
            <div id="nav">
            </div>
            
            <div id="tagline">
                <h2>freeblankets! media. creates interactive and web-based solutions for creative professionals. Have a peek at our wondrous portfolio to see how we've helped artists just like you realize their potential.</h2>
            </div>
            
        </div>
        
        <div id="main">
        
            <div id="clients">
            <img src="images/tinWhistle.png" width="160" />
            <p>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. </p>
            </div>
        
        </div>
        
        <div id="footer">
        </div>
    
    </div>
 
</body>
</html>
And here's the entire stylesheet for good measure:

Code: Select all

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!

Re: Liquid layouts, z-index, and pain killers.

Posted: Sun Aug 30, 2009 1:29 am
by Christopher
I think you are trying to be too tricky. I would recommend making the light blue bar behind the logo and tagline divs simply be the background image for the header div. That image can be tiny if you repeat it horizontally. Then you can just float the logo and tagline divs against each other -- and not have to mess with Z values. It ends up being a simple 2-column header.

Re: Liquid layouts, z-index, and pain killers.

Posted: Sun Aug 30, 2009 3:42 am
by matthijs
I don't have the time to check everything, but the issue with your layout is that the logo is fixed width, the rest fluid.

So what you need to do is float the logo left, and then give the tagline a left-margin a bit wider then the logo. Something like this works and should be fine-tuned.

Code: Select all

 
        #logo { 
            float:left;
            width: 326px;
            height: 350px;
            margin-left: 3.921%;
        }
        #tagline {
            margin-left: 430px;
        }   
        #main {
            clear:both;
        }
 
So no need to use absolute positioning and z-indexes.

Re: Liquid layouts, z-index, and pain killers.

Posted: Sun Aug 30, 2009 6:15 am
by Theory?
Ok so I recognize that my approach isn't right, so I tried tweaking it according to what's been suggested and I'm finding I still have a problem.

The changes are live at the link posted above.

Just for fun I removed the nav bar from the HoTMetaL and tried to focus on simply getting the logo and the tagline to sit next to each other and obey each others' edges. Such a thing is apparently impossible however because despite my CSS, the logo now occupies the entire top of the page and forces the tagline to fall below it.

Here are the refined sections of the CSS relevant to the new header:

Code: Select all

#tagline {
 
    width: 56.862%;
    float: right;
    margin-top: 1.960%;
    margin-left: 430px;
    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;
    float: left;
}
 
I voted to keep all margins at relative widths because that's better for fluidity and also because changing them to pixels didn't fix anything. :banghead:

Re: Liquid layouts, z-index, and pain killers.

Posted: Sun Aug 30, 2009 7:52 am
by Theory?
Ok after much arduousness I have finally come up with something that behaves as I think it should...for now.

My upsides are that I was able to eliminate the need for width and height parameters on the tagline (since IE seems to have difficulty with the terms) and the width of the logo.

Downsides are I've still had to resort to relative positioning, but was able to achieve the overlay without specifying a z-index for any elements. I'm assuming this has to do with the hierarchy of the elements in the HoTMetaL.

Thanks for all the help. I'm sure I'll be back as soon as something else breaks.