"Growing" a Region - dont think first one went thru

[Ryan R. Rosario]

Hi -

**I apologize for posting this again. I dont think my first one went
thru**

I am in the process of converting a table based website over to a CSS
based website and I am having a problem.

The website "template" consists of 3 regions: header, sidebar and
content. Header spans horizontally across the screen at the top of the
pages. Sidebar spans vertically starting below header and (is supposed
to) continue to the bottom of the document. Content is the rest of the
document.

The problem is that I need the sidebar region to "grow" with the
content region...as it would had it been contained in a table with
both the sidebar and the content.

Is there some CSS trick that will let me link these two regions or
something so that one will grow with the other?

Thanks in Advance,
Ryan

[David Graham]

"Ryan R. Rosario" <uc************ ****@NO-SPAMhotmail.com > wrote in message
news:qi******** *************** *********@4ax.c om...

Hi -

**I apologize for posting this again. I dont think my first one went
thru**

I am in the process of converting a table based website over to a CSS
based website and I am having a problem.

The website "template" consists of 3 regions: header, sidebar and
content. Header spans horizontally across the screen at the top of the
pages. Sidebar spans vertically starting below header and (is supposed
to) continue to the bottom of the document. Content is the rest of the
document.

The problem is that I need the sidebar region to "grow" with the
content region...as it would had it been contained in a table with
both the sidebar and the content.

Is there some CSS trick that will let me link these two regions or
something so that one will grow with the other?

Thanks in Advance,
Ryan

Hi
I have read solutions in this group that basically wrap the content (no
position) and side menu (position: absolute; top: 0; left: 0;) in a div
called 'container'. The advantage of this is the menu stuff can be written
in the html after the content stuff which improves search engine
optimisation. The container div needs position: relative on it so it will
act as the containing block for the absolutely positioned div. The heading
across the top of the screen is just a normal div that is written in the
code before the container div so it naturally takes up the correct place in
the normal flow. The menu div being absolutely positioned, has no effect on
the height of the container div as absolutely positioned things are taken
out of the normal flow and have no effect on the layout of other elements.
However, there is the impression that the side menu is growing with the
growing content as the background color of the container div in the same as
the background color of the side menu. The content div has a background
color that is different to the background color of the container div and the
side menu div. You will need to have a margin-left on the content div equal
to the width of the absolutely positioned side menu to bring it out from
below it. (watch out for problems with broken box model - you need the
tantak fix)
HTH
David

[Barbara de Zoete]

Ryan R. Rosario wrote:

The website "template" consists of 3 regions: header, sidebar and
content. Header spans horizontally across the screen at the top of the
pages. Sidebar spans vertically starting below header and (is supposed
to) continue to the bottom of the document. Content is the rest of the
document.

The problem is that I need the sidebar region to "grow" with the
content region...as it would had it been contained in a table with
both the sidebar and the content.

What I did to simulate this (more or less) is create a tiny background
picture (1px high) that is slightly wider then the maximum width of my menu.
When on screen, the menu stays nicely inside the visual border which in fact
is a background picture that has repeat-y set to it.

Only works if you have no other background picture (unless you can work it
in there somehow) and or if you keep the border same colour on all your
pages with a particular stylesheet.

Also mind the remarks by David Graham on menu placement. Not only is the
advantage that searchengines can get to the content right away. Also if
someone (visualy disabled or other reason) has a browser that reads the page
to him / her, the browser doesn't have to repeatedly read the menu on every
page it visits.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/index.html

[Ryan R. Rosario]

On Sun, 27 Jul 2003 14:37:58 +0100, "David Graham"
<da************ @ntlworld.com> wrote:

Hi
I have read solutions in this group that basically wrap the content (no
position) and side menu (position: absolute; top: 0; left: 0;) in a div
called 'container'. The advantage of this is the menu stuff can be written
in the html after the content stuff which improves search engine
optimisation . The container div needs position: relative on it so it will
act as the containing block for the absolutely positioned div. The heading
across the top of the screen is just a normal div that is written in the
code before the container div so it naturally takes up the correct place in
the normal flow. The menu div being absolutely positioned, has no effect on
the height of the container div as absolutely positioned things are taken
out of the normal flow and have no effect on the layout of other elements.
However, there is the impression that the side menu is growing with the
growing content as the background color of the container div in the same as
the background color of the side menu. The content div has a background
color that is different to the background color of the container div and the
side menu div. You will need to have a margin-left on the content div equal
to the width of the absolutely positioned side menu to bring it out from
below it. (watch out for problems with broken box model - you need the
tantak fix)
HTH
David

Hi!

Thank you for your help. Your method seems to accomplish what I am
trying to do. It seems that I need to create a DIV (region) and then
two DIVs nested inside of it (subregions) but I am having trouble
figuring out how to implement this with CSS.

Here is my CSS:

DIV.sidebar {
/** This region is just a bar with a background in it **/
position: absolute;
height: auto;
top: 184px;
left: 0em;
background-image: url(common/sidebar-tile.jpg);
background-repeat: repeat-y
}

DIV.content {
margin: 0px 0px 0px 0px;
width: 700px;
height: auto;
position: absolute;
top: 200px;
left: 250px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
overflow: hidden;
}

DIV.heading {
position: absolute;
top: 0px;
left: 0em; }

The link to a sample page I am having trouble with:
http://www.math.ucla.edu/~umsa/private/software.shtml
The problem is that the left sidebar, which contains a background
image (I included the bg image in both the CSS file and the SSI
included HTML file to no avail) is not the same height as the
content...it does not "grow" with the content. What changes do I need
to make to my CSS file?

Your help is greatly appreciated :-)

Thanks in Advance,
Ryan

[Ryan R. Rosario]

On Sun, 27 Jul 2003 14:37:58 +0100, "David Graham"
<da************ @ntlworld.com> wrote:

Hi
I have read solutions in this group that basically wrap the content (no
position) and side menu (position: absolute; top: 0; left: 0;) in a div
called 'container'. The advantage of this is the menu stuff can be written
in the html after the content stuff which improves search engine
optimisation . The container div needs position: relative on it so it will
act as the containing block for the absolutely positioned div. The heading
across the top of the screen is just a normal div that is written in the
code before the container div so it naturally takes up the correct place in
the normal flow. The menu div being absolutely positioned, has no effect on
the height of the container div as absolutely positioned things are taken
out of the normal flow and have no effect on the layout of other elements.
However, there is the impression that the side menu is growing with the
growing content as the background color of the container div in the same as
the background color of the side menu. The content div has a background
color that is different to the background color of the container div and the
side menu div. You will need to have a margin-left on the content div equal
to the width of the absolutely positioned side menu to bring it out from
below it. (watch out for problems with broken box model - you need the
tantak fix)
HTH
David

Hi!

Thank you for your help. Your method seems to accomplish what I am
trying to do. It seems that I need to create a DIV (region) and then
two DIVs nested inside of it (subregions) but I am having trouble
figuring out how to implement this with CSS.

Here is my CSS:

DIV.sidebar {
/** This region is just a bar with a background in it **/
position: absolute;
height: auto;
top: 184px;
left: 0em;
background-image: url(common/sidebar-tile.jpg);
background-repeat: repeat-y
}

DIV.content {
margin: 0px 0px 0px 0px;
width: 700px;
height: auto;
position: absolute;
top: 200px;
left: 250px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
overflow: hidden;
}

DIV.heading {
position: absolute;
top: 0px;
left: 0em; }

The link to a sample page I am having trouble with:
http://www.math.ucla.edu/~umsa/private/software.shtml
The problem is that the left sidebar, which contains a background
image (I included the bg image in both the CSS file and the SSI
included HTML file to no avail) is not the same height as the
content...it does not "grow" with the content. What changes do I need
to make to my CSS file?

Your help is greatly appreciated :-)

Thanks in Advance,
Ryan

[David Graham]

"David Graham" <da************ @ntlworld.com> wrote in message
news:uk******** *************@n ewsfep2-win.server.ntli .net...

sidemenu div needs left:0 as well as top:0

I should also add that the headind div is not nested inside the container
div - the structure is like below:

<div class="heading" >
..........
</div> <!-- end heading -->

<div class="containe r">
<div class="content" >
...........
</div> <!-- end content -->
<div class="sidemenu e">
.............
</div> <!-- end sidemenue -->
</div> <!-- end container -->

HTH
David

[Stephen Poley]

On Mon, 28 Jul 2003 16:31:30 +0300, Lauri Raittila
<la***@raittila .cjb.net> wrote:

In article <jd************ *************** *****@4ax.com>, Ryan R. Rosario
wrote:

Thank you for your help. Your method seems to accomplish what I am
trying to do. It seems that I need to create a DIV (region) and then
two DIVs nested inside of it (subregions) but I am having trouble
figuring out how to implement this with CSS.

Example:
http://www.student.oulu.fi/~laurirai...olute_pos.html

Doesn't work in Opera 7 though - the two columns are different heights.
Though my own attempt at something similar,
http://www.xs4all.nl/~sbpoley/webmatters/layout3.html doesn't either, so
I guess we have to put that down to an Opera 7 bug.

My version is a little simpler, though it doesn't give one the option of
placing the menu at then end.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Lauri Raittila]

In article <us************ *************** *****@4ax.com>, Stephen Poley
wrote:

On Mon, 28 Jul 2003 16:31:30 +0300, Lauri Raittila
<la***@raittila .cjb.net> wrote:

In article <jd************ *************** *****@4ax.com>, Ryan R. Rosario
wrote:

Thank you for your help. Your method seems to accomplish what I am
trying to do. It seems that I need to create a DIV (region) and then
two DIVs nested inside of it (subregions) but I am having trouble
figuring out how to implement this with CSS.
Example:
http://www.student.oulu.fi/~laurirai...olute_pos.html

Doesn't work in Opera 7 though - the two columns are different heights.

I see I tested it bit badly. Using Opera 7 ;-)

(but that was because I made it as example for something else.)
Though my own attempt at something similar,
http://www.xs4all.nl/~sbpoley/webmatters/layout3.html doesn't either, so
I guess we have to put that down to an Opera 7 bug.
That one works here, 7.2b2.
My version is a little simpler, though it doesn't give one the option of
placing the menu at then end.

Or having lots of links. This is somewhat better, but it should brake on
Opera anyway when having lots of links:
http://www.student.oulu.fi/~laurirai...float2col.html

So Opera is buggy. I don't know why there is difference, as there
shouldn't be.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[brucie]

In post <qi************ *************** *****@4ax.com>
Ryan R. Rosario said...

The website "template" consists of 3 regions: header, sidebar and
content. Header spans horizontally across the screen at the top of the
pages. Sidebar spans vertically starting below header and (is supposed
to) continue to the bottom of the document. Content is the rest of the
document.

The problem is that I need the sidebar region to "grow" with the
content region...as it would had it been contained in a table with
both the sidebar and the content.

perhaps you can adapt one of these (but neither are supported by IE
because its shit)

1-3-1 100% available height layout
http://usenet.alt-html.org/1-3-1-css-layout.html

2-1-3-1 content of areas dictates height layout
http://usenet.alt-html.org/2-1-3-1-css-layout.html
--
brucie a. blackford. 29/July/2003 11:15:09 pm kilo.
http://loser.brucies.com/