Column background stops at end of content?

[Jerry]

Hi Folks,

Ok, here's my story. I was asked to create a website
for the church I attend. I am a complete newbie to
creating websites. So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

My first attempt at creating the church website is
at http://www.mytbc.com I know it is: boring,
incorrectly colored, lacking a visual grab, etc.
But hey, it's my first try and isn't complete! And
it is CSS based (with the exception of one table
on one page)

In my web travels I found that many good looking
sites had colored columns that travel to the bottom
of the page or to a footer no matter how much content
they include.

So I thought that would be the way to go. I also
wanted to have navigation that would make the
active color the same as hover (in this case a
block of gradient color) signifying the current page.

My latest attempt is at http://www.mytbc.com/test

The basic structure is this;

body
container
logo
header
navcon
leftnav
vnav
content
footer
Here are my problems in order of frustration where
1 == about ready to go to tables...

1. The colored background on the left navigation won't
extend to the footer. I read that it needed to be
enclosed in a "containing div", hence the navcon.
Didn't help. I read that the containing div needed
to have 'something' in it to make it expand, so I
used a repeating gif background in navcon. No
luck.

2. If I don't specify at least 13em for margin-left in
#content then if the window is narrow enough the
text flows _under_ the navigation column. Is
there a way to specify that the column is its
own entity not something that is apparently
considered to be extending to the left under
the first column?

3. In Firefox on linux and windows I see the problems
1 & 2. In IE 6 the image _and_ the H1 text is
missing from the header. Any ideas?

I have a feeling that 1 & 2 will boil down to improperly
placed DIVs or clears, at least I hope so. No idea
about 3...

Any help is appreciated!

Thanks.

Jerry

[Spartanicus]

"Jerry" <th*********@charter.net> wrote:

[Column background stops at end of content?]

So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

I don't believe you, this topic has been discussed to death here. In the
last few days this question has been asked here twice already.

--
Spartanicus

[Richard]

On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:

Hi Folks, Ok, here's my story. I was asked to create a website
for the church I attend. I am a complete newbie to
creating websites. So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

Are you using color:blue or background:blue ?

Color is for the text while background is for the entire division.

As for the height problem, all you need to do is to define it.
box {background:black;}
Nothing shows because there is nothing in it and it has no "depth of
perception".
box { width:100px; height:100px; background:blue;}
Now we have given the box a shape so it is filled with the chosen color.
box {width:100px; background:blue; }
This box remains invisible until there is content.
The box will expand as needed by the height.

There is no need to insert a repeating background image.

[Jerry]

"Spartanicus" <[e-mail]> wrote in message
news:2l********************************@news.spart anicus.utvinternet.ie...

"Jerry" <th*********@charter.net> wrote:

[Column background stops at end of content?]

So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.
I don't believe you, this topic has been discussed to death here. In the
last few days this question has been asked here twice already.

Actually I have looked a number of examples. The two examples I
have seen lately in the "How to do a css 2-column layout with 2nd
column autostretch for page max. of 1024x768 resolution?" thread
on 02/25/05

by Laurie;
http://www.student.oulu.fi/~laurirai...float2col.html

by mscir
http://wellstyled.com/files/css-2col.../example2.html

both show what I want to do. But no matter what I try I can't
seem to make my page work with header, gif & text in header,
left navigation column, right content, and footer;
http://www.mytbc.com/test

Jerry

--
Spartanicus

[Jerry]

"Richard" <An*******@127.001> wrote in message
news:cv*********@news2.newsguy.com...

On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:

Hi Folks,

Ok, here's my story. I was asked to create a website
for the church I attend. I am a complete newbie to
creating websites. So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

Are you using color:blue or background:blue ?

Color is for the text while background is for the entire division.

As for the height problem, all you need to do is to define it.
box {background:black;}
Nothing shows because there is nothing in it and it has no "depth of
perception".
box { width:100px; height:100px; background:blue;}
Now we have given the box a shape so it is filled with the chosen color.
box {width:100px; background:blue; }
This box remains invisible until there is content.
The box will expand as needed by the height.

There is no need to insert a repeating background image.

Hi Richard,

Thanks for the reply. I tried defining the height in my left navigation
column and it does extend the background color (red) down to the
footer. However, it only extends down that number of pixels. If the
right content column contains a lot of text, or if the browser window
is resized narrower then I'm back in the same situation.

Thanks.

Jerry

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Jerry wrote:

Actually I have looked a number of examples. The two examples I
have seen lately in the "How to do a css 2-column layout with 2nd
column autostretch for page max. of 1024x768 resolution?" thread
on 02/25/05

by Laurie;
You have an extra e there.
http://www.student.oulu.fi/~laurirai...float2col.html
The important bit is that element doesn't need to expand. it is enaugh if
it looks like it expands. In other words, use background for container of
your elements to style smaller element. (if you don't know which one is
smaller, use empty clearer div on non floated column.)
by mscir
http://wellstyled.com/files/css-2col.../example2.html

both show what I want to do.
They work. So obviously you are not doing the same. Why aren't you doing
the same?
But no matter what I try I can't
seem to make my page work with header, gif & text in header,
left navigation column, right content, and footer;
http://www.mytbc.com/test

Ever though that the reason is that you do it different way?

<link rel="stylesheet" href="main.css" type="text/css">
<style type="text/css">
<! @import url(main.css); >
</style>

What us this? Makes no sence.

PS. Ignore Richard, he gives false information every time.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Jerry]

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Jerry wrote:

Actually I have looked a number of examples. The two examples I
have seen lately in the "How to do a css 2-column layout with 2nd
column autostretch for page max. of 1024x768 resolution?" thread
on 02/25/05

by Laurie;
You have an extra e there.

Ooops! Sorry about that Lauri.

http://www.student.oulu.fi/~laurirai...float2col.html

The important bit is that element doesn't need to expand. it is enaugh if
it looks like it expands. In other words, use background for container of
your elements to style smaller element. (if you don't know which one is
smaller, use empty clearer div on non floated column.)

Ok, I'm confused about clearing. Should clear be issued outside both
the floated and non-floated elements? i.e. In your example you have
clear:both in the address element which is outside both the content
and container closing DIVs.

by mscir
http://wellstyled.com/files/css-2col.../example2.html

both show what I want to do.

They work. So obviously you are not doing the same. Why aren't you doing
the same?

I though I was, but obviously I'm not 'cause mine doesn't work very
well :-)

But no matter what I try I can't
seem to make my page work with header, gif & text in header,
left navigation column, right content, and footer;
http://www.mytbc.com/test

Ever though that the reason is that you do it different way?

<link rel="stylesheet" href="main.css" type="text/css">
<style type="text/css">
<! @import url(main.css); >
</style>

What us this? Makes no sence.

Hmm. Not sure. I believe I copied it out of a tutorial that
used @import to use a different stylesheet for whatever
browser supports @import (non IE? can't remember).

I'll get rid of the import.

Thanks for your help Lauri.

Jerry
PS. Ignore Richard, he gives false information every time.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Jerry wrote:

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP************************@news.individual.ne t...

in comp.infosystems.www.authoring.stylesheets, Jerry wrote:

Actually I have looked a number of examples. The two examples I
have seen lately in the "How to do a css 2-column layout with 2nd
column autostretch for page max. of 1024x768 resolution?" thread
on 02/25/05 http://www.student.oulu.fi/~laurirai...float2col.html
The important bit is that element doesn't need to expand. it is enaugh if
it looks like it expands. In other words, use background for container of
your elements to style smaller element. (if you don't know which one is
smaller, use empty clearer div on non floated column.)

Ok, I'm confused about clearing. Should clear be issued outside both
the floated and non-floated elements?

Well it has nothign to do with problem on your page. And as I said, on
end of non floated column you clear the floated column.
i.e. In your example you have
clear:both in the address element which is outside both the content
and container closing DIVs.
Yes, but that is irrelevant to 2 cols.
I though I was, but obviously I'm not 'cause mine doesn't work very
well :-)
How about copying the example and changing it? Thatway it comes obvious.
Hmm. Not sure. I believe I copied it out of a tutorial that
used @import to use a different stylesheet for whatever
browser supports @import

But you are using same stylesheet...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Jerry]

>

> http://www.student.oulu.fi/~laurirai...float2col.html

The important bit is that element doesn't need to expand. it is enaugh if it looks like it expands. In other words, use background for container of your elements to style smaller element. (if you don't know which one is smaller, use empty clearer div on non floated column.)

Ok, I'm confused about clearing. Should clear be issued outside both
the floated and non-floated elements?

Well it has nothign to do with problem on your page. And as I said, on
end of non floated column you clear the floated column.

Ok.

i.e. In your example you have
clear:both in the address element which is outside both the content
and container closing DIVs.

Yes, but that is irrelevant to 2 cols.

Ok.

I though I was, but obviously I'm not 'cause mine doesn't work very
well :-)

How about copying the example and changing it? Thatway it comes obvious.

Yeah, you're right, I need to sit down and look at what your example
does and how my stylesheet differs where it comes to columns.

I did make a little progres on the IE front. I finally figured out how to
run the page through the HTML and CSS validators and a lot of
XHMTL errors were picked up - I wasn't closing <img>, <link>,
and <br>. The latest is at http://www.mytbc.com/test2 At
least in IE the gif in the header now shows up, and the H1
text in the header shows up - well, only if the browser is narrow.
A wide window and the text disappears...

Thanks for the help.

Jerry

Hmm. Not sure. I believe I copied it out of a tutorial that
used @import to use a different stylesheet for whatever
browser supports @import

But you are using same stylesheet...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Brian]

Richard wrote:

Are you using color:blue or background:blue ?

Color is for the text while background is for the entire division.
What are you talking about?
As for the height problem, all you need to do is to define it.
box {background:black;}
Since there's no (X)HTML element <box>, that will do nothing useful in a
www context.
Nothing shows because there is nothing in it and it has no "depth of
perception".

"Depth of perception"? You're just making this up now, aren't you?
Please stop giving advice until you get a clue.

--
Brian

[Richard]

On Sat, 26 Feb 2005 23:52:09 GMT Brian wrote:

Richard wrote:

Are you using color:blue or background:blue ? Color is for the text while background is for the entire division. What are you talking about?
CSS. Something you know nothing of apparently.
As for the height problem, all you need to do is to define it.
box {background:black;} Since there's no (X)HTML element <box>, that will do nothing useful in
a
www context.
The "box" is an identifer for use in css.
In actual css code, if would look like #box {......}.
Then in the coding section you would see <div ID="box">
Please learn the basics of css.
Nothing shows because there is nothing in it and it has no "depth of
perception".

"Depth of perception"? You're just making this up now, aren't you?
Please stop giving advice until you get a clue.
Yes you should stop giving advice.

--
Brian

[Richard]

On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:

Hi Folks,

Ok, here's my story. I was asked to create a website
for the church I attend. I am a complete newbie to
creating websites. So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

May have resolved your problem.
Below are the changes I made to make it work a little better.
Your main problem is, you're adding stuff that really isn't necessary.
One item you showed as "margin: 10px auto;".
Uh no. You should use auto only if you define the entire margin.
Otherwise specify with margin-bottom:auto.
Why anyone would use auto on margins is beyond me.

Many many years ago my dad taught me a simple rule to live by.
"KISS it!".
Keep it simple stupid!
The more complex you make a simple item, the more difficult it is going to
be handled.

In the issue of the navbar stuff, you'll notice I gave one width, no height;
the other height, no width.
What this does, is allows your navigation items to expand should you add
more later.
Down to the footer.
If you need more room then, simply redefine the height of your main
container.
Or, downsize the text of the navigation items.

Due to your coding, I was also running into an interesting problem I
couldn't figure out, so I went back to the bare basics and added only what I
felt was necessary.
You can add more things if need be, but please try to use the items
correctly.

I couldn't tell you how many times I rewrote my photo gallery to get it to
where I wanted it.
Simple on the outside, yet it took a lot of time and patience to get it that
way.
www.somestuff.batcave.net
#container { border: 1px solid black;
width: 98%;
}

#header {
background:#800000;
}

#header h1 { color:#ffffff;
padding: 1em
font-family: Verdana,Helvetica,sans-serif;
font-style: italic;

}

#navcon {
float: left;
width:200px;
background:#800000;
}

#leftnav {
height:420px;

float:left;
}

#content {
margin-left: 13em;
max-width: 40em;
}

#footer { border-top: 1px solid gray;
margin: 0pt;
clear: both;
color: #fff;
text-align: center;
background-color: #800000;
}

[kchayka]

Richard wrote:

Your main problem is, you're adding stuff that really isn't necessary.
One item you showed as "margin: 10px auto;".
Uh no. You should use auto only if you define the entire margin.
Otherwise specify with margin-bottom:auto.
Why anyone would use auto on margins is beyond me.

It's only beyond you because you're an idiot and haven't bothered either
reading the CSS specs or searching google for info on margin:auto.

Please stop posting until you get a clue, eh?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jerry]

"Richard" <An*******@127.001> wrote in message
news:cv********@news4.newsguy.com...

On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:
May have resolved your problem.
Below are the changes I made to make it work a little better.
Your main problem is, you're adding stuff that really isn't necessary.
One item you showed as "margin: 10px auto;".
Uh no. You should use auto only if you define the entire margin.
Otherwise specify with margin-bottom:auto.
Why anyone would use auto on margins is beyond me.

Many many years ago my dad taught me a simple rule to live by.
"KISS it!".
Keep it simple stupid!
The more complex you make a simple item, the more difficult it is going to
be handled.

In the issue of the navbar stuff, you'll notice I gave one width, no height; the other height, no width.
What this does, is allows your navigation items to expand should you add
more later.
Down to the footer.
If you need more room then, simply redefine the height of your main
container.
Or, downsize the text of the navigation items.

Due to your coding, I was also running into an interesting problem I
couldn't figure out, so I went back to the bare basics and added only what I felt was necessary.
You can add more things if need be, but please try to use the items
correctly.

Richard,

Thanks for looking at my problem further. I do appreciate your effort.

I included, I think verbatim, the changes you suggested. The result
can be seen at http://www.mytbc.com/test3

While the CSS is simpler it doesn't address my original goal of
having the red (#800000) background extend on the left from
below the header to the footer no matter how tall the content
(or user resizing browser) makes that navigation column.

Thanks.

Jerry

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Jerry wrote:

How about copying the example and changing it? Thatway it comes obvious.
Yeah, you're right, I need to sit down and look at what your example
does and how my stylesheet differs where it comes to columns.

The latest is at http://www.mytbc.com/test2

Looked your url, hint:
p {margin:0;padding:0.5em 0;border-left:12em solid red;}
#content {margin:0 !important;}

It is just one approach.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Jerry]

"Lauri Raittila" <la***@raittila.cjb.net> wrote in message
news:MP***********************@news.individual.net ...

in comp.infosystems.www.authoring.stylesheets, Jerry wrote:

How about copying the example and changing it? Thatway it comes

obvious.
Yeah, you're right, I need to sit down and look at what your example
does and how my stylesheet differs where it comes to columns.

The latest is at http://www.mytbc.com/test2

Looked your url, hint:
p {margin:0;padding:0.5em 0;border-left:12em solid red;}
#content {margin:0 !important;}

It is just one approach.

Thanks Lauri!
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

[Richard]

On Sun, 27 Feb 2005 18:25:50 -0500 Jerry wrote:

"Richard" <An*******@127.001> wrote in message
news:cv********@news4.newsguy.com...

On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:
May have resolved your problem.
Below are the changes I made to make it work a little better.
Your main problem is, you're adding stuff that really isn't necessary.
One item you showed as "margin: 10px auto;".
Uh no. You should use auto only if you define the entire margin.
Otherwise specify with margin-bottom:auto.
Why anyone would use auto on margins is beyond me.

Many many years ago my dad taught me a simple rule to live by.
"KISS it!".
Keep it simple stupid!
The more complex you make a simple item, the more difficult it is going
to be handled. In the issue of the navbar stuff, you'll notice I gave one
width, no

height;

the other height, no width.
What this does, is allows your navigation items to expand should you add
more later.
Down to the footer.
If you need more room then, simply redefine the height of your main
container.
Or, downsize the text of the navigation items.

Due to your coding, I was also running into an interesting problem I
couldn't figure out, so I went back to the bare basics and added only
what

I

felt was necessary.
You can add more things if need be, but please try to use the items
correctly.

Richard,

Thanks for looking at my problem further. I do appreciate your effort.

I included, I think verbatim, the changes you suggested. The result
can be seen at http://www.mytbc.com/test3

While the CSS is simpler it doesn't address my original goal of
having the red (#800000) background extend on the left from
below the header to the footer no matter how tall the content
(or user resizing browser) makes that navigation column.

Thanks.

Jerry

Here's an idea then.
Take the image of the church and turn it into a transparent gif.
Simply overlay the image on the header background and it won't look so
awkward.

Put the oval shape on a pure color background that is not a color in the
image.
Make that your transparent color.
Or...downsize the image a bit, or increase the header height.

And you can always leave it as it is and have only the header and footer the
odd color you want.

[Barbara de Zoete]

On Sun, 27 Feb 2005 18:25:50 -0500, Jerry <th*********@charter.net> wrote:

"Richard" <An*******@127.001> wrote in message
news:cv********@news4.newsguy.com...

Why anyone would use auto on margins is beyond me.

This should really start ringing and flashing all the alarms you have.
Thanks for looking at my problem further. I do appreciate your effort.

Please take a little time now and save a lot of time later and Google usenet
groups for RtS aka Bullis. Find out why you better not take anything that RtS
sais for granted or even serious.
<http://groups.google.com/groups?q=ignore+RtS+OR+Bullis+group:alt.html>

Ignoring him al together is your best bet.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Alexandre]

Jerry wrote:

Hi Folks,

Ok, here's my story. I was asked to create a website
for the church I attend. I am a complete newbie to
creating websites. So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

My first attempt at creating the church website is
at http://www.mytbc.com I know it is: boring,
incorrectly colored, lacking a visual grab, etc.
But hey, it's my first try and isn't complete! And
it is CSS based (with the exception of one table
on one page)

In my web travels I found that many good looking
sites had colored columns that travel to the bottom
of the page or to a footer no matter how much content
they include.

So I thought that would be the way to go. I also
wanted to have navigation that would make the
active color the same as hover (in this case a
block of gradient color) signifying the current page.

My latest attempt is at http://www.mytbc.com/test

The basic structure is this;

body
container
logo
header
navcon
leftnav
vnav
content
footer
Here are my problems in order of frustration where
1 == about ready to go to tables...

1. The colored background on the left navigation won't
extend to the footer. I read that it needed to be
enclosed in a "containing div", hence the navcon.
Didn't help. I read that the containing div needed
to have 'something' in it to make it expand, so I
used a repeating gif background in navcon. No
luck.

2. If I don't specify at least 13em for margin-left in
#content then if the window is narrow enough the
text flows _under_ the navigation column. Is
there a way to specify that the column is its
own entity not something that is apparently
considered to be extending to the left under
the first column?

3. In Firefox on linux and windows I see the problems
1 & 2. In IE 6 the image _and_ the H1 text is
missing from the header. Any ideas?

I have a feeling that 1 & 2 will boil down to improperly
placed DIVs or clears, at least I hope so. No idea
about 3...

Any help is appreciated!

Thanks.

Jerry

[Jerry]

"Jerry" <th*********@charter.net> wrote in message
news:Ss*****************@fe02.lga...

Hi Folks,

Ok, here's my story. I was asked to create a website
for the church I attend. I am a complete newbie to
creating websites. So, I did the usual -- did a bunch
of googling, found that using CSS saves time in the
long run, bought a couple books, googled more,
read online tutorials, read many posts in this
and other groups, etc.

My first attempt at creating the church website is
at http://www.mytbc.com I know it is: boring,
incorrectly colored, lacking a visual grab, etc.
But hey, it's my first try and isn't complete! And
it is CSS based (with the exception of one table
on one page)

In my web travels I found that many good looking
sites had colored columns that travel to the bottom
of the page or to a footer no matter how much content
they include.

So I thought that would be the way to go. I also
wanted to have navigation that would make the
active color the same as hover (in this case a
block of gradient color) signifying the current page.

Well, one more try. I changed the divs around a
bit and the result is at http://www.mytbc.com/test4

As you can see I got the #navcon container div to
propagate redbg.gif down to #footer, but it messes
up the 2nd column so the text starts to the right and
below the navigation area (#leftnav).

Any other suggestions?

Thanks.

Jerry