Topic: CSS Box Model Layout Pages that link to <a href="https://ozoneasylum.com/backlink?for=11083" title="Pages that link to Topic: CSS Box Model Layout" rel="nofollow" >Topic: CSS Box Model Layout\

 
Author Thread
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-22-2003 03:37 Edit Quote

Hey guys...now, being relativly new at CSS, I have a layout style I want ot achieve, and I'l lbe buggered if I can figure out how to do it. It's based on the two column CSS Box Model, with a full width header div at the top, two divs just below that, one for the menu and the other for the main content, and another full width div below that for the page footer (copyright info, etc). Here's an image that shows what I'm looking for:

http://www.zeloutis.com/skaarjj/layoutexample.jpg

and thanks to Lacuna for hosting that for me...really must get my own domain one of these days when I have money again...

So, can anyone help me in achieving this?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-22-2003 04:51 Edit Quote
quote:
It's based on the two column CSS Box Model


Not entirely sure what that is supposed to mean....
Get the basic idea of hat you want though, and it seems simple enough. Except that at the moment, getting the left menu to always fill the space will be next to impossible.

rule number 1: forget about absolute positioning, unless it becomes completely necessary.

It *should* be pretty straightforward.

Make your header div.

make a class="left" div, with a width:25% (or whatever) and a float:left.

make a class="right" div, with a width of say 70% or so (you'll need to account for margins and padding and all) also with a float:left.

Make a footer div with a clear:both.

Set margins, borders, padding appropriately.

Don't set "width:100%;" for anything just yet. See how it works.

Go from there....



[This message has been edited by DL-44 (edited 10-22-2003).]

krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

IP logged posted posted 10-22-2003 05:27 Edit Quote

http://www.bluerobot.com

They have some sample layouts there that you can take a look at for guidance.

:::11oh1:::

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-22-2003 11:30 Edit Quote

Skaarjj: I'm afraid this touches on the subject that has come up here before - asking how to make what is essentially a table-based design in CSS is rather missing the point.

Although it is possible things like ending the two columns on the same line will keep you up all night cursing trying to jam it into a table-free layout. Your best bet if you wanted to do this is use one of the Glish layouts and then use overflow:auto on the right column and fix its height at he same as the left column.

For a great set of resources for this kind of thing see:

GN table-free design links section

___________________
Emps

The Emperor dot org

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-22-2003 12:24 Edit Quote

And just to clarify something here, the "box model"

quote:
describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.


(box model specs from the W3C)


___________________________
Suho: www.liminality.org

twItch^
Maniac (V) Mad Scientist

From: the west wing
Insane since: Aug 2000

IP logged posted posted 10-23-2003 01:00 Edit Quote

I resent that you think something as simple as this layout is something that is a table-based layout that CSS should not be used for.

To do it, you nest your two columns into a single class with the same background color as the one you want on the left. This is not meant to be a tabled design. Tables are for the presentation of tabular data. A single extra class and a couple bytes of extra text to do something that, in a table setup, would take 10 times as much.

It's meant not only for simplicity and the segregation of content and design, but also to make smaller files, easier page renderings for the browser, and compliance with regulations set out by governmental and private industries for usability and accessibility.

And I'll debate until I'm blue in the face with anyone who disagrees.

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 10-23-2003 13:00 Edit Quote

I think twItch^ has a very good point here. To be honest, I was a tad perplexed when I first saw the "table design" comment--I could not quite figure out what it was about the design that made it inherently table-based. While it is true that, in the past, designs like this were achieved by abusing tables, this doesn't necessarily mean that it is inherently a table-based design. I don't think there is such a thing as an inherently table-based design, just as I don't think there is such a thing as an inherently css-based design. Granted, new-comers to CSS may produce very similar looking designs (you know what I'm talking about--the "boxy" style), but it doesn't mean that those designs are inherently CSS-based.




___________________________
Suho: www.liminality.org

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-28-2003 12:57 Edit Quote

Well perhaps I was over-stating the case but my point was that getting those borders to line up at the bottom of the 2 columns like that can be done (using something like overflow:auto and aiming for Opera version greater than 6) but it would be a pain (I would be very happy to see someone reproduce the design in CSS). I suspect I've not explained things very well.

___________________
Emps

The Emperor dot org

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-28-2003 14:37 Edit Quote

well, this is what I have so far (with help from Lacuna)
http://emperor.port5.com/skaarjj/baselayout2.html

as you can see I'm having a bit of a problem getting the bottoms of the two centre columns to line up, and I'm quite sure this isn't going ot look right in other browsers...so do oyu guys wanna have a wander through this for me?

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 10-28-2003 14:44 Edit Quote

Skaarjj: Good first attempt. Things line up (horizontally) bettr in IE6 than in Op7 but it is getting there. I can't quite see why things aren't lining up - I would suggest removing the positon stle from the left column as I'm not sure what it is doing. See how that works.

___________________
Emps

The Emperor dot org

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 10-28-2003 14:52 Edit Quote
quote:
as you can see I'm having a bit of a problem getting the bottoms of the two centre columns to line up



In this:

code:
.left {
position: relative;
float: left;
width: 15%;
height: 400px;
background:#fff;
border: solid black 2px;
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
padding-bottom:15px;
}



Yout have padding-bottom:15px. Either take it out or put the same thing for the right side. You have the left sided padded which is making it off a little.

Also, for the margin stuff, you can put this all on one line like: margin: 5px; since they all have the same value. If you have different values for the top bottom left etc.. they go in the order of top, left, bottom, right. with no commas between them. margin: 5px 10px 5px 10px;
The only time that you really need to seperate them is when you have to use auto for the value. Opera freaks out if you have margin: 10px auto 10px auto.

Later,

C:\


~Binary is best~



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu