Page 2 of 3

Posted: Fri Feb 16, 2007 11:23 pm
by superdezign
So you WANT it to take up the entire window? I believe positioning is in order then. Watch this:

Code: Select all

html, body{height: 100%;}
#container{position: relative; height: 100%;}
#header{height: 80px;}
#wrapper{position: absolute; height: 100%;}
#content{padding-top: 80px;}

Code: Select all

<html><body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="content"></div>
</div>
</div>
That HAS to do it.

Posted: Fri Feb 16, 2007 11:27 pm
by superdezign
CORRECTION:

Code: Select all

#header{height: 80px; float: left;}
and maybe margin: 0; and padding 0; on html and body

Now thank me :wink:

Posted: Fri Feb 16, 2007 11:34 pm
by alex.barylski
I don't think your understanding me... :P

I have:

a) Fixed header (width: 100%; height: 80px)
b) Variable content area (width: 100%; height: 100%)

You *can't* set the height to 100% because it includes the height of the header which forces scrollbars to appear, even when they are not needed.

A footer would be neat, but I just want to the the fixed header and variable body working first.

Just to clarify, by variable height body I mean one which:
1) On an empty document assumes all of it's *remaining* parent element height (ignoring height of header, etc)
2) Expands when there is more content than can be seen visually on screen

Cheers :)

Posted: Fri Feb 16, 2007 11:38 pm
by superdezign
Did you even try what I gave you? It makes something that takes up the entire screen, and the area within it can be written everywhere except the top 80px which are occupied by your header. If this isn't what you need, then you aren't making sense.

Posted: Fri Feb 16, 2007 11:54 pm
by nickvd
superdezign wrote:Absolute positioning is a no-no unless it's within a relatively positioned element, fyi.
Not quite... When you understand how it works, it can be used to create some very difficult layouts, but it can also take quite a bit of time :)

position: absolute will position the element exactly where you want it, relative to a parent container (not always it's direct parent).

Which element it's going to be relative to is determined by the first element up in the tree that has a position specified that is not the default value of static.

If no other parent container is positioned, then it will be positioned relative to the viewport.

Take the following html and experiment, comment out the #one and #two element's position statements and see how it changes the location of #three.

Code: Select all

<html><head>
<title></title>
<style type="text/css">
#one {width: 700px; height: 350px;border:1px solid red;}
#two{width: 400px;height: 200px;border:1px solid green;}
#three{width: 100px;height: 50px;border:1px solid blue;}


#one{position:relative;}
#two{position:relative;}
#three{position:absolute;top:0; right: 0px;}
</style>
</head><body>

<div id="one">one
   <div id="two">two
      <div id="three">three</div>
   </div>
</div>

</body></html>

Posted: Fri Feb 16, 2007 11:59 pm
by superdezign
But when it comes to fluidity, you agree that absolute position relative to body is bad, right?

The only time I find much use for it is layering graphics, really. That, and small pixel by pixel movements, insisted upon by clients that claim to be "designers." Not that they aren't, but they tend to add too much color and too fixed of a width.

Posted: Sat Feb 17, 2007 12:04 am
by nickvd
superdezign wrote:But when it comes to fluidity, you agree that absolute position relative to body is bad, right?

The only time I find much use for it is layering graphics, really. That, and small pixel by pixel movements, insisted upon by clients that claim to be "designers." Not that they aren't, but they tend to add too much color and too fixed of a width.
100%, I try to avoid static designs as much as possible, and I've been searching for the layout that hockey is trying to make for a long long time, and I've come close, but I don't think I've ever found... THE ONE!
hockey wrote:Man it would be handy if there was a CSS repository which had nothing but the wire frame output of CSS layouts, so I could click an icon for a three row design and download that CSS template and fill in the area
Like these? ;)

http://blog.html.it/layoutgala/
http://www.intensivstation.ch/en/templates/

Posted: Sat Feb 17, 2007 12:17 am
by alex.barylski
Edit: Doh!!! That example link looks fantastic, but it's not doing as I need either...as I need the content DIV to be 100% width so I can use it as faux column or create a child DIV and set it's height to 100%....frick...either of you know how to fix that by chance?

Now now, lets stay on track guys...it's me with the problem which we are disscussing...not whose right or wrong about CSS :P

nickvd. That comment you made about not always being relative to the viewport...that can be changed with a selector right?

b > #myid

Would bind any DIV with id 'myid' making absolute elements reltive to <b>???

Anyways, after an exhaustive search I found this article: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Sounds like pretty much what I am after...

I'll explain why.

I have a typical design, it has a fixed header (80px - and would nice to include a footer but I can live with just a header for now) and a content area.

The content area will sometimes have more content than can visibly fit on screen, so scrollbars are inevitable. Other times, it's almost empty with nothing but a wanring message.

If I had a footer, then I would want that footer aligned or bound to the bottom of the content area. If there is no content, the the footer is almost flush with the header, so figuring a way to align the footer to the bottom is ideal in terms of aesthetics. Thankfully I don't have a footer for this project, but other projects will alsmot certainly have a footer (so I figured why not learn now while i'm on a roll?).

Here is why I wanted a "full-height" content area (not because of a footer).

Some pages are just single wide column and others have a right column which is light in color. That right column should fill the entire height, but I can't use faux columns, because I already have the layout gutter/side walls painted on the <body>

basically a single pixel high image which is 640 pixels wide with white in the middel and a greyish gradient on the left and right sides which is repeated vertically and centered in the body tag.

The only way I seen to have a right column fill the entire vertical space, was to set it's height to 100% but doing this has negative side effects because a DIV assumes the height of it's parent.

By having a DIV inside a full-height parent DIV the right aligned DIV can now have a custom picture, bk color, etc...so I don't use faux columns (cuz I can't). I can't use faux columns, because only *some* pages will require that right aligned column, so instead of building two master templates, I build one and just add more layout to the full-height content area.

Anyways, hopefully that helps further clear up my requirements...again...dumping my thoughts is helping me better understand what it is I am trying to accomplish.

Cheers :)

Posted: Sat Feb 17, 2007 12:38 am
by nickvd
Hockey wrote:nickvd. That comment you made about not always being relative to the viewport...that can be changed with a selector right?

p > .myid

Would bind any DIV with id 'myid' making absolute elements reltive to <p>???
.. changed to <p> since <b> is yuk ;) and to a class since you can only have one id per page


The p > #myid would select any element with the class 'myid', ONLY if it is a DIRECT CHILD to the <p> element

Code: Select all

<p>
  <span class="myid">this gets selected</span>
  <a href="#">
    <span class="myid">this does not since it's not a direct child to the <p> tag, but to the <a> tag</span>
  </a>
</p>
So, to answer your question, depends... If the <p> is positioned (anything but 'static'), then yes.. if it is not, then it will be relative to the viewport.

Posted: Sat Feb 17, 2007 12:41 am
by nickvd
http://www.xs4all.nl/~peterned/examples/csslayout1.html

Does this work in IE? I didn't see it mentioned, and I don't have it here :) It seems like the answer to your problems (from what I understand of them ;), minus the fixed header)
hockey wrote:Some pages are just single wide column and others have a right column which is light in color. That right column should fill the entire height, but I can't use faux columns, because I already have the layout gutter/side walls painted on the <body>
Have you thought of applying something to the <html> tag?

...

To answer your next question, yes it can/does work :) (though not consistent on old browsers)

Posted: Sat Feb 17, 2007 1:52 am
by alex.barylski
hey nickvd...

That example works in IE and FF Windows XP and FF on Ubuntu

Here's the problem, the content area isn't really height: 100% not sure how else to explain it but if you remove all the colors and replace each DIV with a unique color (red, green, blue, etc) you will see it's somehow accomplished without setting content area to 100%...

I need that 100% because the content area is replace by "pages" each of which define their own layout. some no columns and this instance, a single right aligned column. No faux columns can be used - if that is what you mean applying something to <html>?

<body> is already used to paint the gutters of the display so anything attached to HTML would just be drawn over top of anyways, no?

Cheers :)

Posted: Sat Feb 17, 2007 2:30 am
by nickvd
Not over, under...

Posted: Sat Feb 17, 2007 5:53 am
by alex.barylski
I'm not sure I understand nickvd...

Not over, under?

So I can apply a background effect (right and left gutters) to the HTML and use BODY for my columns?

Although interesting, that won't work - I'll explain.

I have a master layout (for the sake of argument lets say it's in Smarty) and depending on the menu item selected, the application pulls on a page.

These pages are then responsible for defining their own layout (1, 2, maybe 3 columns).

How do I tell the master layout to use the BODY or HTML tag style, depending on whether the page needs a column or not?

Posted: Sat Feb 17, 2007 6:04 am
by alex.barylski
superdezign: Here is the code I used from you

Code: Select all

<html>
<style>
  html, body{height: 100%;}
  #container{position: relative; height: 100%;}
  #header{height: 80px; float: left; background-color: red}
  #wrapper{position: absolute; height: 100%; background-color: green}
  #content{padding-top: 80px; background-color: purple}
</style>
<body>
<div id="container">
  <div id="header">
    This is the header
  </div>
  <div id="wrapper">
    <div id="content">
      Content area
    </div>
  </div>
</div>
This is the result???

http://i173.photobucket.com/albums/w41/ ... ra/wtf.gif

I'm not sure what you mean? :?

What am I missing?

Posted: Sat Feb 17, 2007 6:32 am
by superdezign
What am I missing?
width: 100% on the container, body, and header.

I still don't quite get why you are looking for the content to extend beyond the content.