Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Body background colour

Reply
Thread Tools

Body background colour

 
 
Tim Streater
Guest
Posts: n/a
 
      03-10-2011
I have a page with the body background-color set to non-white. The last
div on the page is used as a footer, and I've set its background to
white.

Now, if the page as a whole has insufficient material in it to fill the
browser window, then that part of the window below the final div takes
the colour of the body's background-color.

How can I control the colour of that portion of the browser window (I'd
like it to be white)?

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      03-11-2011
In article
<(E-Mail Removed)>,
Tim Streater <(E-Mail Removed)> wrote:

> I have a page with the body background-color set to non-white. The last
> div on the page is used as a footer, and I've set its background to
> white.
>
> Now, if the page as a whole has insufficient material in it to fill the
> browser window, then that part of the window below the final div takes
> the colour of the body's background-color.
>
> How can I control the colour of that portion of the browser window (I'd
> like it to be white)?


First suggestion is to be happy to set the background of the
footer to the same as the background to the viewport (set by html
or body bg) and to choose a nice contrasting color for the text.

Of course, everything depends on your design as a whole, but
generally, without knowing specifics, this looks better too. A
footer is something that is *apart* from all else and leaving it
on the viewport at the bottom with a nice readable color lends
itself to this separateness.

However, if something about your design makes it better for the
main content area or non-footer area to be white backgrounded I
can imagine that it is because you want something from above (for
example, a main content wrapper, with white background) to extend
further than it does and to *meet* the footer in a vertical sort
of way. And maybe your footer is a sticky one that keeps to the
bottom?

Or the footer to be just under but married in appearance by
background to the content. The latter should not be difficult,
the footer can safely be given a small height or padding. This
might solve your problem with little effort, but the footer
begins where the non-footer ends in this case. This is almost
always fine imo and much less trouble than trying to force
footers to the bottom of viewports.

Normally a div will have as much height as its content dictates
but you can change this behaviour by giving a height. Often a
specific heigh in px or ems is not what is wanted but you can
give it a percentage height. Everything depends, and with no url,
I merely remark that if the wrapper somehow goes from the top and
you want it to go to the or nearly the bottom, regardless of
viewport, you can give 100% height (remembering to tell the
browser what it is a percentage of (you need to set html and body
too).

--
dorayme
 
Reply With Quote
 
 
 
 
Tim Streater
Guest
Posts: n/a
 
      03-11-2011
In article <(E-Mail Removed)>,
dorayme <(E-Mail Removed)> wrote:

> Normally a div will have as much height as its content dictates
> but you can change this behaviour by giving a height. Often a
> specific heigh in px or ems is not what is wanted but you can
> give it a percentage height. Everything depends, and with no url,
> I merely remark that if the wrapper somehow goes from the top and
> you want it to go to the or nearly the bottom, regardless of
> viewport, you can give 100% height (remembering to tell the
> browser what it is a percentage of (you need to set html and body
> too).


This is where I'm at so far (still a lot to do here):

<http://www.clothears.org.uk>

Looking better but now there are unwanted scroll bars

I'm using the pale blue background just to soften things up a bit.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-11-2011
Tim Streater wrote:

> This is where I'm at so far (still a lot to do here):
>
> <http://www.clothears.org.uk>
>
> Looking better but now there are unwanted scroll bars


Remove the height and width attributes from the CSS for div.footer
Not necessary. In fact, this following seems to work quite well.

div.footer {
margin: 3em auto 0 auto;
background-color: white;
border: black solid 1px;
text-align: center;
}

Change all your use of pixels in the CSS to percentages and em units.
Use pixels only for borders and actual image sizes. See:
http://tekrider.net/html/fontsize.php

> I'm using the pale blue background just to soften things up a bit.


Normally a good idea; bright white can be too sharp on the eyes. I
frequently use something like: background-color: #f5f5f5;

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      03-11-2011
In article <ildab0$m7s$(E-Mail Removed)-september.org>,
"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote:

> Tim Streater wrote:
>
> > This is where I'm at so far (still a lot to do here):
> >
> > <http://www.clothears.org.uk>
> >
> > Looking better but now there are unwanted scroll bars

>
> Remove the height and width attributes from the CSS for div.footer
> Not necessary. In fact, this following seems to work quite well.
>
> div.footer {
> margin: 3em auto 0 auto;
> background-color: white;
> border: black solid 1px;
> text-align: center;
> }


True except that my original issue remains.

> Change all your use of pixels in the CSS to percentages and em units.
> Use pixels only for borders and actual image sizes. See:
> http://tekrider.net/html/fontsize.php


Thanks for the pointer.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-11-2011
Tim Streater wrote:

> "Beauregard T. Shagnasty" wrote:
>> Tim Streater wrote:
>>> This is where I'm at so far (still a lot to do here):
>>>
>>> <http://www.clothears.org.uk>
>>>
>>> Looking better but now there are unwanted scroll bars

>>
>> Remove the height and width attributes from the CSS for div.footer
>> Not necessary. In fact, this following seems to work quite well.
>>
>> div.footer {
>> margin: 3em auto 0 auto;
>> background-color: white;
>> border: black solid 1px;
>> text-align: center;
>> }

>
> True except that my original issue remains.


What? Scrollbars for short content? <looks again>
Remove completely:
html {
height: 100%;
}

Might as well remove it from body {} too. Doesn't seem to be necessary
on your page at all.

Use color codes instead of words. Most of those you've picked are not
valid names (even if some browsers recognize them), such as AliceBlue.
<http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2 Fwww.clothears.org.uk%2F>

Here is a plethora of color codes:
http://www.somacon.com/p142.php
AliceBlue is: #F0F8FF;

Remove the font-size from p .. it's redundant as p will inherit from
body.

>> Change all your use of pixels in the CSS to percentages and em units.
>> Use pixels only for borders and actual image sizes. See:
>> http://tekrider.net/html/fontsize.php

>
> Thanks for the pointer.


Welcome.

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      03-11-2011
In article <ildm80$8bs$(E-Mail Removed)-september.org>,
"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote:

> Tim Streater wrote:
>
> > "Beauregard T. Shagnasty" wrote:
> >> Tim Streater wrote:
> >>> This is where I'm at so far (still a lot to do here):
> >>>
> >>> <http://www.clothears.org.uk>
> >>>
> >>> Looking better but now there are unwanted scroll bars
> >>
> >> Remove the height and width attributes from the CSS for div.footer
> >> Not necessary. In fact, this following seems to work quite well.
> >>
> >> div.footer {
> >> margin: 3em auto 0 auto;
> >> background-color: white;
> >> border: black solid 1px;
> >> text-align: center;
> >> }

> >
> > True except that my original issue remains.

>
> What? Scrollbars for short content? <looks again>




No, that on my home page (where at the moment there is not much
content), that part of the viewport below the footer has the same colour
as the body, which exercises me (I want it to be white).

> Remove completely:
> html {
> height: 100%;
> }
>
> Might as well remove it from body {} too. Doesn't seem to be necessary
> on your page at all.


Perhaps I misunderstood dorayme in that case.

> Use color codes instead of words. Most of those you've picked are not
> valid names (even if some browsers recognize them), such as AliceBlue.
> <http://jigsaw.w3.org/css-validator/v...ing=0&uri=http
> %3A%2F%2Fwww.clothears.org.uk%2F>
>
> Here is a plethora of color codes:
> http://www.somacon.com/p142.php
> AliceBlue is: #F0F8FF;


I'll check that out later.

> Remove the font-size from p .. it's redundant as p will inherit from
> body.


Thanks again.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
Gus Richter
Guest
Posts: n/a
 
      03-11-2011
On 3/10/2011 6:57 PM, Tim Streater wrote:
> I have a page with the body background-color set to non-white. The last
> div on the page is used as a footer, and I've set its background to white.
>
> Now, if the page as a whole has insufficient material in it to fill the
> browser window, then that part of the window below the final div takes
> the colour of the body's background-color.
>
> How can I control the colour of that portion of the browser window (I'd
> like it to be white)?



Actually there is a point of understanding in order here. The whole page
has the non-white background and the footer portion has a white
background which is layered over the non-white one and now I believe
you're requesting to have the portion below the footer changed to white.

The proper way is to declare body to have a white background, wrap the
content in a wrapper and declare the wrapper to have your non-white
background.

That way the whole page is white and the portion inside the wrapper is
non-white layered on top of the white body.

--
Gus

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      03-11-2011
Tim Streater wrote:

> "Beauregard T. Shagnasty" wrote:
> [schnippety]
>> What? Scrollbars for short content? <looks again>

>
> No, that on my home page (where at the moment there is not much
> content), that part of the viewport below the footer has the same
> colour as the body, which exercises me (I want it to be white).


Hmm, <looks again> I don't see any AliceBlue below the footer here in my
browser(s). That bottom border is flush against the bottom of my
viewport. My window may be narrower than yours, around 850px. Though
what Gus just said is a good strategy for making sure there is no
AliceBlue down there.

You should add a <br> after the word "therein" in the footer. It would
center that "Website Hosted By" graphic, thus centering and balancing
the look of things.

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      03-11-2011
In article <ildtgb$v4i$(E-Mail Removed)-september.org>,
Gus Richter <(E-Mail Removed)> wrote:

> On 3/10/2011 6:57 PM, Tim Streater wrote:
> > I have a page with the body background-color set to non-white. The last
> > div on the page is used as a footer, and I've set its background to white.
> >
> > Now, if the page as a whole has insufficient material in it to fill the
> > browser window, then that part of the window below the final div takes
> > the colour of the body's background-color.
> >
> > How can I control the colour of that portion of the browser window (I'd
> > like it to be white)?

>
> Actually there is a point of understanding in order here. The whole page
> has the non-white background and the footer portion has a white
> background which is layered over the non-white one and now I believe
> you're requesting to have the portion below the footer changed to white.
>
> The proper way is to declare body to have a white background, wrap the
> content in a wrapper and declare the wrapper to have your non-white
> background.
>
> That way the whole page is white and the portion inside the wrapper is
> non-white layered on top of the white body.


Yes, thanks, and of course I should have thought of that myself. Life
has too many notes at the moment.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
What is the point of having 16 bit colour if a computer monitor can only display 8 bit colour? How do you edit 16 bit colour when you can only see 8 bit? Scotius Digital Photography 6 07-13-2010 03:33 AM
Getting default colour for <input> - or just the old colour jodleren Javascript 2 01-12-2008 02:57 PM
Background colour problem in Firefox acalcium@aol.com Firefox 4 03-13-2006 11:14 AM
Colour blindness, photography and colour management Tor Lillqvist Digital Photography 12 05-24-2004 08:57 AM
changing a background image to a background colour? Dj Frenzy Javascript 3 02-10-2004 08:08 PM



Advertisments