Three floating panel layout
newbie
Posted: Wed, 2008-07-23 06:42
First off, sorry to post right away without reading through everything. I've used this site a number of times to find answers, but I've finally created something I'm sorta proud of and what to know how to fix it up so it works perfectly, so I'm a bit excited.
The idea was inspired by this site:
http://d-graff.de/fricca/center.html
First I thought it would just be cool to have a blog with the content just floating in the middle, perfectly fluid and centered. But then I remembered I need an area for my side menus. So I messed around until I got something like
[menu|content|menu]
Still floating really nice in the center.
But it looked clunky and a bit too Italian/Irish/Mexican flag-y to me (all of which are awesome but not what I had in mind). So then it occurred to me that it would be really cool if I had the side bars actually floating out to the sides.
This is as far as I got, and I'm actually really shocked I got this far. Floats and relative positioning have both caused me much stress in the past. Here's what I got:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Three Panel Blog?</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#fff5f0;
color:#000;
font:100.01%/1.4 sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
}
.distance {
width:1px;
height:50%;
background-color:#000;
margin-bottom:-13.75em; /* half of container's height */
float:left;
}
#container {
margin:-28em auto;
position:relative; /* puts container in front of distance */
text-align:left;
height:27.5em;
width:35em;
clear:left;
background-color:#fff8dc;
border:3px solid #000;
}
#container2 {
margin:0 auto;
margin-left: 20%;
position:relative; /* puts container in front of distance */
text-align:left;
height:27.5em;
width:10%;
clear:left;
background-color:#fff8dc;
border:3px solid #000;
}
#container3 {
margin:0 auto;
margin-right: 20%;
position:relative; /* puts container in front of distance */
text-align:left;
height:27.5em;
width:10%;
clear:left;
background-color:#fff8dc;
border:3px solid #000;
}
#container div#leftmenu {
background-color: #e0ffff;
float:left;
width:13em;
height:100%;
font-size:80%;
}
#container div#rightmenu {
background-color: #e0ffff;
float:left;
width:13em;
height:100%;
font-size:80%;
}
#container h1 {
text-align: center;
font-family: Verdana;
}
#container p {
margin: 2em 2.1em;
font-family: Georgia;
}
ul {
text-align: center;
font-family: Verdana;
font-size: 1.2em;
list-style: none;
margin: 100% auto;
}
</style>
</head>
<body>
<div class="distance"></div>
<div id="container2">
<ul>
<li>menu stuff</li>
<li>menu stuff</li>
<li>menu stuff</li>
<li>menu stuff</li>
</ul>
</div>
<div id="container">
<div id="main">
<h1>This looks super cool to me!</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div id="container3">
<ul>
<li>menu stuff</li>
<li>menu stuff</li>
<li>menu stuff</li>
<li>menu stuff</li>
</ul>
</div>
</body>
</html>
I'm sure everyone here will spot the problem right away. I don't know how to make it so the content area stays centered and fluid AND have the side bars stay relative to the content (and ideally shrink to a specified minimum if needed). Part of the problem is that I'm doing this all on a friend's widescreen display, but even if I wasn't, I know that I'm just missing a key piece of the puzzle.
Again, sorry for the eager posting. Can anyone tell me what I'm doing wrong?
Thank you so much!
Anthony
| Attachment | Size |
|---|---|
| threepanelblog.txt | 2.5 KB |
| screenshot1.jpg | 78.55 KB |
| screenshot2.jpg | 71.59 KB |
newbie
Posts: 3
Joined: 2008-07-23
Nothing? Not even a "read a
Posted: Thu, 2008-07-24 00:14
Nothing? Not even a "read a CSS book, noob?"
newbie
Posts: 3
Joined: 2008-07-23
Seriously, I'd like some
Posted: Sat, 2008-07-26 05:38
Seriously, I'd like some acknowledgment of my existence. At least inform me of my infractions so that I can avoid them in the future. I'm very proud of this simple layout and would like some simple feedback on how to make it more fluid. Any advice (even a basic site or a key property I'm overlooking) would be really appreciated.
Thank you.
Guru
Posts: 2368
Joined: 2005-12-14
Location: Victoria British Columbia
crazytonyi wrote:At least
Posted: Sat, 2008-07-26 16:01
You should already know, since the very first sentence in your first post above explains it quite nicely.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
newbie
Posts: 4
Joined: 2008-07-25
Location: Boise, Idaho
Ed Seedhouse is a PRIG
Posted: Sat, 2008-07-26 21:42
You should rename this site to "prig site for slamming people who are just asking for a little help." This forum stinks!!! Going elsewhere. Tonyi, when I find a forum where people are a little bit more professional I'll come back and let you know.
Regular
Posts: 41
Joined: 2007-12-19
Hey bro - I see your excited
Posted: Sun, 2008-07-27 14:59
Hey bro - I see your excited - I feel ya! OK... so what are you trying to do exactly - just have a centered layout? Fluid center with fixed sidebars? I messed with what you got a little bit, but it's pretty busy in there with a few things going on that would take some time to figure out what the originator had in mind. There's an easier way to get it centered. Let me know?
Knowledge is Power