View Thread: Sliding Faux Columns For All...

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: Killer Web Design Tips, Secrets and Techniques.

Thread: Sliding Faux Columns For All...

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 1

[ ]

Author

This topic has been viewed 1710 times and has 0 replies

MacRankin
Advanced Member

Joined: Dec 18, 2005
Post Count: 368
Status: Offline


Sliding Faux Columns For All...

... Er, maybe?

Yes, it's me again with another dodgy looking layout. But this time I've been able to test it on every browser at my disposal, and it works! Ok, there was one browser that it didn't work so well in, but that's just because I couldn't get the mutha to work in min-width. Otherwise, all is looking kinda okay, ok! laughing

Unlike a fixed 3-column faux layout, I had to use 2 background images. Creating them wasn't the hard part. The hard part is aligning everything up to look like it's solid. So, anyway, here are those background images for you to play around with...

Background Column Images
http://www.macrankin.co.uk/web_projects/layou...g/images/rb99fleft_01.gif
http://www.macrankin.co.uk/web_projects/layou.../images/rb99fright_01.gif

Sliding Faux 3-Column Layout
http://www.macrankin.co.uk/web_projects/layouts/grail_hunting/dc_01b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>SliderZ 3rd Attempt</title>
<meta name="generator" content="BBEdit 8.7">

<style type="text/css" media="screen">

html, body {
height: 100%;
margin: 20px auto;
font-family: Verdana, sans-serif;
font-size: small;
background-color: #333;
}

#outerwrap {

max-width: 1200px;
min-width: 785px;
margin: 0 auto -330px auto;

background: url(images/rb99fright_01.gif) repeat-y 66% 0;
}
#innerwrap {
background: url(images/rb99fleft_01.gif) repeat-y 33.8% 0;
}

#header {
height: 80px;
margin: 0 auto;
line-height: 6em;
text-align: center;
color: #600;
background-color: #C9C;
}

#navbar {
height: 30px;
margin: -17px auto;
padding: 0px;

text-align: center;
color: #C9C;
background-color: #600;
}

#content div {
padding: 20px 5px 20px 30px;
}

#sidebar div {
padding: 20px 40px 20px 25px;
}

#sidebar_2 div {
padding: 20px 20px 20px 60px;
}

#main_body {
width: 70%;
position: relative;
float: left;
}

#content {
width: 60%;
float: right;
text-align: justify;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1.4em;
}

#sidebar {
width: 40%;
float: left;
text-align: justify;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1.4em;
color: #300;
}

#sidebar_2 {
width: 30%;
min-width: 152px;
float: right;
text-align: justify;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1.4em;
color: #300;
}

#footer {
width: 100%;
height: 330px;
margin: 0 auto;
position: relative;
background-color: transparent;
}

#padded_cell {
height: 30px;
text-align: center;
line-height: 1.9em;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1.4em;
color: #CCC;
background: #000;
}

#clearfooter {
height: 330px;
background: transparent;
clear: both;
}

</style>





</head>
<body>

<div id="outerwrap">
<div id="innerwrap">
<div id="header">
<h1>Head Start</h1>
</div>

<div id="navbar">
<h1>nav nar</h1>
</div>

<div id="main_body">
<div id="content">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Curabitur tristique, sapien id scelerisque euismod,
turpis lacus sollicitudin nulla, non iaculis quam nulla
ullamcorper erat. Nam accumsan laoreet enim. Cras vel
lectus. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Maecenas
malesuada mattis metus. Proin vehicula pretium nunc.
Donec est arcu, viverra a, rutrum sit amet, interdum
vitae, est. Aenean enim orci, faucibus in, posuere et,
congue pretium, nunc. Vestibulum sagittis turpis vitae
pede. Praesent est. Aenean consectetuer ornare arcu.
Nulla rhoncus. Pellentesque venenatis enim eu tellus.
Etiam fermentum, orci non iaculis gravida, neque nulla
aliquam diam, a consequat enim neque vel nunc. Aliquam
tincidunt. Suspendisse potenti. Donec mauris. Donec id
lectus. Ut ultricies leo vitae velit.</p>

<p>Cras et turpis vel erat pulvinar faucibus. Sed
molestie euismod quam. Nunc rhoncus. Vestibulum iaculis
purus vitae felis. Nunc vitae velit convallis eros
sollicitudin aliquam. Maecenas rutrum. Nam facilisis odio
at sem. In pellentesque wisi id augue. Cras urna urna,
ullamcorper ut, ullamcorper eu, fermentum at, metus.
Pellentesque porta, turpis eu blandit gravida, nulla dui
venenatis magna, at venenatis lacus turpis ut quam. Donec
pharetra. Nulla neque sem, porttitor ac, ultrices in,
bibendum et, purus. Aenean enim tortor, cursus ac,
molestie posuere, ullamcorper eu, dui. Aliquam ac pede.
Vivamus nec lorem quis turpis feugiat rutrum. Suspendisse
aliquam felis ut urna. Etiam dictum odio scelerisque
lacus. Morbi ultrices dolor ac eros. Nunc eget enim in
velit molestie mollis.</p>

<p>Curabitur malesuada tincidunt mauris. Etiam eu risus
at nulla adipiscing viverra. Suspendisse libero pede,
interdum id, cursus a, suscipit nec, orci. Morbi feugiat.
Quisque semper nibh eu ipsum. Nullam malesuada adipiscing
magna. Phasellus ultrices tincidunt urna. Curabitur nisl.
Maecenas eget nisl. Phasellus id dolor a ipsum porttitor
tincidunt. In sapien. Phasellus ac est a magna ornare
nonummy. Sed ut dui. Cras venenatis sapien non magna.
Nullam a mauris eget dolor tincidunt ullamcorper.</p>

</div>
</div>

<div id="sidebar">
<div>

<p>Curabitur malesuada tincidunt mauris. Etiam eu risus
at nulla adipiscing viverra. Suspendisse libero pede,
interdum id, cursus a, suscipit nec, orci. Morbi feugiat.
Quisque semper nibh eu ipsum. Nullam malesuada adipiscing
magna. Phasellus ultrices tincidunt urna. Curabitur nisl.
Maecenas eget nisl. Phasellus id dolor a ipsum porttitor
tincidunt. In sapien. Phasellus ac est a magna ornare
nonummy. Sed ut dui. Cras venenatis sapien non magna.
Nullam a mauris eget dolor tincidunt ullamcorper.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Curabitur tristique, sapien id scelerisque euismod,
turpis lacus sollicitudin nulla, non iaculis quam nulla
ullamcorper erat. Nam accumsan laoreet enim. Cras vel
lectus. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Maecenas
malesuada mattis metus. Proin vehicula pretium nunc.
Donec est arcu, viverra a, rutrum sit amet, interdum
vitae, est. Aenean enim orci, faucibus in, posuere et,
congue pretium, nunc. Vestibulum sagittis turpis vitae
pede. Praesent est. Aenean consectetuer ornare arcu.
Nulla rhoncus. Pellentesque venenatis enim eu tellus.
Etiam fermentum, orci non iaculis gravida, neque nulla
aliquam diam, a consequat enim neque vel nunc. Aliquam
tincidunt. Suspendisse potenti. Donec mauris. Donec id
lectus. Ut ultricies leo vitae velit.</p>

<p>Cras et turpis vel erat pulvinar faucibus. Sed
molestie euismod quam. Nunc rhoncus. Vestibulum iaculis
purus vitae felis. Nunc vitae velit convallis eros
sollicitudin aliquam. Maecenas rutrum. Nam facilisis odio
at sem. In pellentesque wisi id augue. Cras urna urna,
ullamcorper ut, ullamcorper eu, fermentum at, metus.
Pellentesque porta, turpis eu blandit gravida, nulla dui
venenatis magna, at venenatis lacus turpis ut quam. Donec
pharetra. Nulla neque sem, porttitor ac, ultrices in,
bibendum et, purus. Aenean enim tortor, cursus ac,
molestie posuere, ullamcorper eu, dui. Aliquam ac pede.
Vivamus nec lorem quis turpis feugiat rutrum. Suspendisse
aliquam felis ut urna. Etiam dictum odio scelerisque
lacus. Morbi ultrices dolor ac eros. Nunc eget enim in
velit molestie mollis.</p>

<p>Curabitur malesuada tincidunt mauris. Etiam eu risus
at nulla adipiscing viverra. Suspendisse libero pede,
interdum id, cursus a, suscipit nec, orci. Morbi feugiat.
Quisque semper nibh eu ipsum. Nullam malesuada adipiscing
magna. Phasellus ultrices tincidunt urna. Curabitur nisl.
Maecenas eget nisl. Phasellus id dolor a ipsum porttitor
tincidunt. In sapien. Phasellus ac est a magna ornare
nonummy. Sed ut dui. Cras venenatis sapien non magna.
Nullam a mauris eget dolor tincidunt ullamcorper.</p>

</div>
</div>
</div>



<div id="sidebar_2">
<div>
<p>Curabitur malesuada tincidunt mauris. Etiam eu risus
at nulla adipiscing viverra. Suspendisse libero pede,
interdum id, cursus a, suscipit nec, orci. Morbi feugiat.
Quisque semper nibh eu ipsum. Nullam malesuada adipiscing
magna. Phasellus ultrices tincidunt urna. Curabitur nisl.
Maecenas eget nisl. Phasellus id dolor a ipsum porttitor
tincidunt. In sapien. Phasellus ac est a magna ornare
nonummy. Sed ut dui. Cras venenatis sapien non magna.
Nullam a mauris eget dolor tincidunt ullamcorper.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Curabitur tristique, sapien id scelerisque euismod,
turpis lacus sollicitudin nulla, non iaculis quam nulla
ullamcorper erat. Nam accumsan laoreet enim. Cras vel
lectus. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Maecenas
malesuada mattis metus. Proin vehicula pretium nunc.
Donec est arcu, viverra a, rutrum sit amet, interdum
vitae, est. Aenean enim orci, faucibus in, posuere et,
congue pretium, nunc. Vestibulum sagittis turpis vitae
pede. Praesent est. Aenean consectetuer ornare arcu.
Nulla rhoncus. Pellentesque venenatis enim eu tellus.
Etiam fermentum, orci non iaculis gravida, neque nulla
aliquam diam, a consequat enim neque vel nunc. Aliquam
tincidunt. Suspendisse potenti. Donec mauris. Donec id
lectus. Ut ultricies leo vitae velit.</p>

<p>Cras et turpis vel erat pulvinar faucibus. Sed
molestie euismod quam. Nunc rhoncus. Vestibulum iaculis
purus vitae felis. Nunc vitae velit convallis eros
sollicitudin aliquam. Maecenas rutrum. Nam facilisis odio
at sem. In pellentesque wisi id augue. Cras urna urna,
ullamcorper ut, ullamcorper eu, fermentum at, metus.
Pellentesque porta, turpis eu blandit gravida, nulla dui
venenatis magna, at venenatis lacus turpis ut quam. Donec
pharetra. Nulla neque sem, porttitor ac, ultrices in,
bibendum et, purus. Aenean enim tortor, cursus ac,
molestie posuere, ullamcorper eu, dui. Aliquam ac pede.
Vivamus nec lorem quis turpis feugiat rutrum. Suspendisse
aliquam felis ut urna. Etiam dictum odio scelerisque
lacus. Morbi ultrices dolor ac eros. Nunc eget enim in
velit molestie mollis.</p>

<p>Curabitur malesuada tincidunt mauris. Etiam eu risus
at nulla adipiscing viverra. Suspendisse libero pede,
interdum id, cursus a, suscipit nec, orci. Morbi feugiat.
Quisque semper nibh eu ipsum. Nullam malesuada adipiscing
magna. Phasellus ultrices tincidunt urna. Curabitur nisl.
Maecenas eget nisl. Phasellus id dolor a ipsum porttitor
tincidunt. In sapien. Phasellus ac est a magna ornare
nonummy. Sed ut dui. Cras venenatis sapien non magna.
Nullam a mauris eget dolor tincidunt ullamcorper.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Curabitur tristique, sapien id scelerisque euismod,
turpis lacus sollicitudin nulla, non iaculis quam nulla
ullamcorper erat. Nam accumsan laoreet enim. Cras vel
lectus. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Maecenas
malesuada mattis metus. Proin vehicula pretium nunc.
Donec est arcu, viverra a, rutrum sit amet, interdum
vitae, est. Aenean enim orci, faucibus in, posuere et,
congue pretium, nunc. Vestibulum sagittis turpis vitae
pede. Praesent est. Aenean consectetuer ornare arcu.
Nulla rhoncus. Pellentesque venenatis enim eu tellus.
Etiam fermentum, orci non iaculis gravida, neque nulla
aliquam diam, a consequat enim neque vel nunc. Aliquam
tincidunt. Suspendisse potenti. Donec mauris. Donec id
lectus. Ut ultricies leo vitae velit.</p>

<p>Cras et turpis vel erat pulvinar faucibus. Sed
molestie euismod quam. Nunc rhoncus. Vestibulum iaculis
purus vitae felis. Nunc vitae velit convallis eros
sollicitudin aliquam. Maecenas rutrum. Nam facilisis odio
at sem. In pellentesque wisi id augue. Cras urna urna,
ullamcorper ut, ullamcorper eu, fermentum at, metus.
Pellentesque porta, turpis eu blandit gravida, nulla dui
venenatis magna, at venenatis lacus turpis ut quam. Donec
pharetra. Nulla neque sem, porttitor ac, ultrices in,
bibendum et, purus. Aenean enim tortor, cursus ac,
molestie posuere, ullamcorper eu, dui. Aliquam ac pede.
Vivamus nec lorem quis turpis feugiat rutrum. Suspendisse
aliquam felis ut urna. Etiam dictum odio scelerisque
lacus. Morbi ultrices dolor ac eros. Nunc eget enim in
velit molestie mollis.</p>

<p>Curabitur malesuada tincidunt mauris. Etiam eu risus
at nulla adipiscing viverra. Suspendisse libero pede,
interdum id, cursus a, suscipit nec, orci. Morbi feugiat.
Quisque semper nibh eu ipsum. Nullam malesuada adipiscing
magna. Phasellus ultrices tincidunt urna. Curabitur nisl.
Maecenas eget nisl. Phasellus id dolor a ipsum porttitor
tincidunt. In sapien. Phasellus ac est a magna ornare
nonummy. Sed ut dui. Cras venenatis sapien non magna.
Nullam a mauris eget dolor tincidunt ullamcorper.</p>

</div>
</div>
<div id="clearfooter"></div></div>

<div id="padded_cell">
I've got to put my footer down!
</div>
</div>

<div id="footer"></div>

</body>
</html>

So, how do these sliding faux do-dah, columns work? Right now, all I can say is with a lot and lot of patience.

I found 3 immediate problems when using this layout, one is that you'll pull your hair out trying to create a pixel perfect look, two is that because the min-width doesn't appear to work in IE6 things will start to break up when the view-port or browser window is reduced to a rediculous size, and three, I have noticed that when you try to render this layout in a small screen you won't get your background colors show up.

Erm, I may be back later (much later) to see if I can make sense of this layout. smile

----------------------------------------
We Brits do things differently, but we still get shot at!

[Nov 4, 2008 7:41:08 AM]

[Link]

[ ]

Current timezone is GMT
Mar 21, 2010 8:49:05 PM