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:

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%;
}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;
}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>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%;
}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!