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]

Re: Column background stops at end of content?

"Jerry" <thelindseys@ch arter.net> wrote:

[Column background stops at end of content?]
[color=blue]
>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.[/color]

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]

Re: Column background stops at end of content?

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

[color=blue]
> Hi Folks,[/color]
[color=blue]
> 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.[/color]


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:bla ck;}
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]

Re: Column background stops at end of content?


"Spartanicu s" <me@privacy.net > wrote in message
news:2lc021ls6k 8qjq1f5fb6v9q65 vua3hck4u@news. spartanicus.utv internet.ie...[color=blue]
> "Jerry" <thelindseys@ch arter.net> wrote:
>
> [Column background stops at end of content?]
>[color=green]
> >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.[/color]
>
> 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.
>[/color]

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/www/css/examples/float2col.html

by mscir

http://wellstyled.com/files/css-2col-fluid-layout/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

[color=blue]
> --
> Spartanicus[/color]

[Jerry]

Re: Column background stops at end of content?


"Richard" <Anonymous@127. 001> wrote in message
news:cvpe2e01cf m@news2.newsguy .com...[color=blue]
> On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:
>
>[color=green]
> > Hi Folks,[/color]
>[color=green]
> > 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.[/color]
>
>
> 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:bla ck;}
> 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.
>[/color]

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]

Re: Column background stops at end of content?

in comp.infosystem s.www.authoring.stylesheets, Jerry wrote:[color=blue]
>
> 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;[/color]

You have an extra e there.
[color=blue]
> http://www.student.oulu.fi/~laurirai...float2col.html[/color]

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.)
[color=blue]
> by mscir
> http://wellstyled.com/files/css-2col.../example2.html
>
> both show what I want to do.[/color]

They work. So obviously you are not doing the same. Why aren't you doing
the same?
[color=blue]
> 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[/color]

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]

Re: Column background stops at end of content?


"Lauri Raittila" <lauri@raittila .cjb.net> wrote in message
news:MPG.1c8ae5 0c7f042a8a98a33 a@news.individu al.net...[color=blue]
> in comp.infosystem s.www.authoring.stylesheets, Jerry wrote:[color=green]
> >
> > 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;[/color]
>
> You have an extra e there.[/color]

Ooops! Sorry about that Lauri.
[color=blue][color=green]
> > http://www.student.oulu.fi/~laurirai...float2col.html[/color]
>
> 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.)
>[/color]

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.
[color=blue][color=green]
> > by mscir
> > http://wellstyled.com/files/css-2col.../example2.html
> >
> > both show what I want to do.[/color]
>
> They work. So obviously you are not doing the same. Why aren't you doing
> the same?
>[/color]

I though I was, but obviously I'm not 'cause mine doesn't work very
well :-)
[color=blue][color=green]
> > 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[/color]
>
> 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.[/color]

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
[color=blue]
> PS. Ignore Richard, he gives false information every time.
>
> --
> Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
> Utrecht, NL.[/color]

[Lauri Raittila]

Re: Column background stops at end of content?

in comp.infosystem s.www.authoring.stylesheets, Jerry wrote:[color=blue]
>
> "Lauri Raittila" <lauri@raittila .cjb.net> wrote in message
> news:MPG.1c8ae5 0c7f042a8a98a33 a@news.individu al.net...[color=green]
> > in comp.infosystem s.www.authoring.stylesheets, Jerry wrote:[color=darkred]
> > >
> > > 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[/color][/color][/color]
[color=blue][color=green][color=darkred]
> > > http://www.student.oulu.fi/~laurirai...float2col.html[/color]
> >
> > 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.)
> >[/color]
>
> Ok, I'm confused about clearing. Should clear be issued outside both
> the floated and non-floated elements?[/color]

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.
[color=blue]
> i.e. In your example you have
> clear:both in the address element which is outside both the content
> and container closing DIVs.[/color]

Yes, but that is irrelevant to 2 cols.
[color=blue]
> I though I was, but obviously I'm not 'cause mine doesn't work very
> well :-)[/color]

How about copying the example and changing it? Thatway it comes obvious.
[color=blue]
> 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[/color]

But you are using same stylesheet...


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

[Jerry]

Re: Column background stops at end of content?

>[color=blue][color=green][color=darkred]
> > > > http://www.student.oulu.fi/~laurirai...float2col.html
> > >
> > > The important bit is that element doesn't need to expand. it is enaugh[/color][/color][/color]
if[color=blue][color=green][color=darkred]
> > > it looks like it expands. In other words, use background for container[/color][/color][/color]
of[color=blue][color=green][color=darkred]
> > > your elements to style smaller element. (if you don't know which one[/color][/color][/color]
is[color=blue][color=green][color=darkred]
> > > smaller, use empty clearer div on non floated column.)
> > >[/color]
> >
> > Ok, I'm confused about clearing. Should clear be issued outside both
> > the floated and non-floated elements?[/color]
>
> 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.[/color]

Ok.
[color=blue][color=green]
> > i.e. In your example you have
> > clear:both in the address element which is outside both the content
> > and container closing DIVs.[/color]
>
> Yes, but that is irrelevant to 2 cols.[/color]

Ok.
[color=blue][color=green]
> > I though I was, but obviously I'm not 'cause mine doesn't work very
> > well :-)[/color]
>
> How about copying the example and changing it? Thatway it comes obvious.[/color]

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
[color=blue][color=green]
> > 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[/color]
>
> But you are using same stylesheet...
>
>
> --
> Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
> Utrecht, NL.[/color]

[Brian]

Re: Column background stops at end of content?

Richard wrote:
[color=blue]
> Are you using color:blue or background:blue ?
>
> Color is for the text while background is for the entire division.[/color]

What are you talking about?
[color=blue]
> As for the height problem, all you need to do is to define it.
> box {background:bla ck;}[/color]

Since there's no (X)HTML element <box>, that will do nothing useful in a
www context.
[color=blue]
> Nothing shows because there is nothing in it and it has no "depth of
> perception".[/color]

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

--
Brian

[Richard]

Re: Column background stops at end of content?

On Sat, 26 Feb 2005 23:52:09 GMT Brian wrote:
[color=blue]
> Richard wrote:[/color]
[color=blue][color=green]
>> Are you using color:blue or background:blue ?[/color][/color]
[color=blue][color=green]
>> Color is for the text while background is for the entire division.[/color][/color]
[color=blue]
> What are you talking about?[/color]

CSS. Something you know nothing of apparently.
[color=blue][color=green]
>> As for the height problem, all you need to do is to define it.
>> box {background:bla ck;}[/color][/color]
[color=blue]
> Since there's no (X)HTML element <box>, that will do nothing useful in
> a
> www context.[/color]

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.
[color=blue][color=green]
>> Nothing shows because there is nothing in it and it has no "depth of
>> perception".[/color][/color]
[color=blue]
> "Depth of perception"? You're just making this up now, aren't you?
> Please stop giving advice until you get a clue.[/color]

Yes you should stop giving advice.

[color=blue]
> --
> Brian[/color]

[Richard]

Re: Column background stops at end of content?

On Fri, 25 Feb 2005 22:57:35 -0500 Jerry wrote:
[color=blue]
>
> 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.
>[/color]


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.

https://www.somestuff.batcave.net

#container { border: 1px solid black;
width: 98%;
}

#header {
background:#800 000;
}

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

}

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

#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]

Re: Column background stops at end of content?

Richard wrote:[color=blue]
>
> 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.[/color]

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]

Re: Column background stops at end of content?


"Richard" <Anonymous@127. 001> wrote in message
news:cvrpdo0icc @news4.newsguy. com...[color=blue]
> 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[/color]
height;[color=blue]
> 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[/color]
I[color=blue]
> felt was necessary.
> You can add more things if need be, but please try to use the items
> correctly.
>[/color]

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]

Re: Column background stops at end of content?

in comp.infosystem s.www.authoring.stylesheets, Jerry wrote:
[color=blue][color=green]
> > How about copying the example and changing it? Thatway it comes obvious.[/color]
>
> 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.[/color]
[color=blue]
> The latest is at http://www.mytbc.com/test2[/color]

Looked your url, hint:
p {margin:0;paddi ng: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.