CSS beginner requests advice

[Mr Colin J Cotter]

Hi,

I am having some trouble using css correctly and I was wondering if a
subscriber to this newsgroup might be able to offer some suggestions.

The problem refers to the page

http://www.gloworms.org.uk/index.htm

My intention was to put the whole page in a dark box which sits on a
white background. Inside the box I have a corner picture, a title
banner, a menu bar and a main text area which I want to position using
position:absolu te. The trouble is, the text in the main text area runs
outside the dark box (you can see this by scrolling down - the text is
white against a white background because of the problem, but there are
a few links which are coloured).

What I would really like to know is:
How can I tell the dark box to stretch so it goes behind all of the
main text area (even though I can't predict the size of the text area
in advance).

Please reply if you have any opinions on my conundrum.

best wishes,

Colin

[Arne]

Re: CSS beginner requests advice


"Mr Colin J Cotter" <colin@erebus.e se.ic.ac.uk> skrev i meddelandet
news:Pine.LNX.4 .44.04012811534 40.25085-100000@erebus.e se.ic.ac.uk...[color=blue]
> Hi,
>
> I am having some trouble using css correctly and I was wondering if[/color]
a[color=blue]
> subscriber to this newsgroup might be able to offer some[/color]
suggestions.[color=blue]
>
> The problem refers to the page
>
> http://www.gloworms.org.uk/index.htm
>
> My intention was to put the whole page in a dark box which sits on a
> white background. Inside the box I have a corner picture, a title
> banner, a menu bar and a main text area which I want to position[/color]
using[color=blue]
> position:absolu te. The trouble is, the text in the main text area[/color]
runs[color=blue]
> outside the dark box (you can see this by scrolling down - the text[/color]
is[color=blue]
> white against a white background because of the problem, but there[/color]
are[color=blue]
> a few links which are coloured).
>
> What I would really like to know is:
> How can I tell the dark box to stretch so it goes behind all of the
> main text area (even though I can't predict the size of the text[/color]
area[color=blue]
> in advance).
>
> Please reply if you have any opinions on my conundrum.
>[/color]

First, why are you using doctype XHTML 1.0 Strict for your page? It's
hard to learn that at the same time as learning CSS :-)

As it is, your page don't validate for any XHTML
(http://tinyurl.com/ys2u7 ) Try to fix the errors and perhaps also the
doctype to HTML 4.01 You may find the errors in CSS easier after that.

BTW I have been lurking on this group for some time, and this is my
first posting. I have learned a lot from the regulars and hope to be
able to contribute more in the future. But I guess it will be some
questions also :-)

--
/Arne (Sweden)
(I hope my English is good enough so you can understand my writings
:-=

[Ian Watts]

Re: CSS beginner requests advice

Mr Colin J Cotter wrote:[color=blue]
> Hi,
>
> I am having some trouble using css correctly and I was wondering if a
> subscriber to this newsgroup might be able to offer some suggestions.
>
>[/color]

I just wanted to pass on some suggestions that I have received from
various people.

1. Indent your HTML so that it is obvious how you have nested your divs

2. Validate your CSS to get rid of errors at

http://jigsaw.w3.org/css-validator/

(yours has a couple)

I have found that when following these suggestions, many problems
disappear. This group has been invaluable in helping me with a few
problems (a newbie myself). If looking at my page will help, then feel
free at

http://members.lycos.co.uk/churchrevival/index.php

http://members.lycos.co.uk/churchrevival/test.css

Hope that helps (it may not), but there are plenty here who can, much
better than I.

Ian

[Colin]

Re: CSS beginner requests advice

> First, why are you using doctype XHTML 1.0 Strict for your page? It's[color=blue]
> hard to learn that at the same time as learning CSS :-)[/color]
To be honest, I am using it because that is what a book told me to do.
I've hacked out the invalid bits and left the rest.
I've fiddled with the css a bit too, and now I seem to get closer to what
I want but I see a bit gap at the bottom. I guess this might be a problem
to investigate myself rather than troubling newsgroups about it...[color=blue]
> BTW I have been lurking on this group for some time, and this is my
> first posting. I have learned a lot from the regulars and hope to be
> able to contribute more in the future. But I guess it will be some
> questions also :-)[/color]
Well thankyou for replying to my message.

-cjc

[Neal]

Re: CSS beginner requests advice

On Wed, 28 Jan 2004 13:53:27 +0000, Ian Watts
<iwatts.remove. this@ntlworld.c om.and.this> wrote:

[color=blue]
> http://jigsaw.w3.org/css-validator/[/color]

OP would do well to bookmark that page as well as

http://validator.w3.org/

and use them often. First best thing I ever learned about web authoring.

[Colin]

Re: CSS beginner requests advice

> 1. Indent your HTML so that it is obvious how you have nested your divs
Thanks for suggesting, I do that with all my other kinds of programming,
who knows why I didn't do it for HTML![color=blue]
> 2. Validate your CSS to get rid of errors at
> http://jigsaw.w3.org/css-validator/[/color]
Thanks, I repaired the errors.[color=blue]
> I have found that when following these suggestions, many problems
> disappear. This group has been invaluable in helping me with a few
> problems (a newbie myself). If looking at my page will help, then feel
> free at
> http://members.lycos.co.uk/churchrevival/index.php
> http://members.lycos.co.uk/churchrevival/test.css[/color]
Looks very good, unfortunately doesn't quite cover what I want to do. I
suspect my problem is something to do with positioning of nested divs.

-Colin

[Stephen Poley]

Re: CSS beginner requests advice

On Wed, 28 Jan 2004 11:54:17 +0000, Mr Colin J Cotter
<colin@erebus.e se.ic.ac.uk> wrote:
[color=blue]
>I am having some trouble using css correctly and I was wondering if a
>subscriber to this newsgroup might be able to offer some suggestions.
>
>The problem refers to the page
>
>http://www.gloworms.org.uk/index.htm
>
>My intention was to put the whole page in a dark box which sits on a
>white background. Inside the box I have a corner picture, a title
>banner, a menu bar and a main text area which I want to position using
>position:absol ute. The trouble is, the text in the main text area runs
>outside the dark box (you can see this by scrolling down - the text is
>white against a white background because of the problem, but there are
>a few links which are coloured).
>
>What I would really like to know is:
>How can I tell the dark box to stretch so it goes behind all of the
>main text area (even though I can't predict the size of the text area
>in advance).[/color]

Your problem is that you want the background to adjust to the content -
thus requiring it to be in the main flow - but have absolutely
positioned things, thus taking them out of the main flow.

My own approach for this layout would be to drop the absolute/relative
positioning, and use floats for the banjo and the menu. Other people may
have other suggestions.

You can also simplify a few things. For example, take out all the
"background-color:transpare nt;" settings - AFAIK you only ever need to
specify that if you are specifying color at the same time, or if you
need to override another setting higher up the cascade.

Similarly you can drop most of your class="menu" attributes in your
HTML: just set it once on the DIV. Then specify the formatting of links
in that DIV with '.menu A' in your stylesheet, and so on.

HTH

--
Stephen Poley

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

[Stan Brown]

background-color:transpare nt (Re: CSS beginner requests advice)

It seems "Stephen Poley" wrote in
comp.infosystem s.www.authoring.stylesheets:[color=blue]
>You can also simplify a few things. For example, take out all the
>"background-color:transpare nt;" settings - AFAIK you only ever need to
>specify that if you are specifying color at the same time, or if you
>need to override another setting higher up the cascade.[/color]

Any known issues with this? My style sheet is at

http://www.acad.sunytccc.edu/instruct/sbrown/screen.css

I want links to be the same color in different regions of the pages,
but the different regions have different background colors. So I
have a:link, a:visited, a:hover, a:active, and a[name] selectors
with color and background, then the same five selectors as
descendants of .maintitle, then the same five as descendants of h1,
etc etc etc. I could sweep all that away and just have the five
plain selectors for a, if "transparen t" were safe, but I think I
read somwehere that it's not.

I tried googling
background transparent problem group"*.stylesh eets
and got lots of hits but the first dozen or so didn't answer my
question.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA

http://OakRoadSystems.com/

HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Colin]

Re: CSS beginner requests advice

Thanks for your helpful reply.[color=blue]
> Your problem is that you want the background to adjust to the content -
> thus requiring it to be in the main flow - but have absolutely
> positioned things, thus taking them out of the main flow.[/color]
Aha - this I did not know. Thankyou.[color=blue]
> My own approach for this layout would be to drop the absolute/relative
> positioning, and use floats for the banjo and the menu. Other people may
> have other suggestions.[/color]
Great suggestion. OK, I have done that, and it looks like we are nearly
there. The only thing that I need to change now is I want the main1 div to
go to the right-hand edge of the background div, and start from the same
place on the left all the way down. What I mean is that I want the
"column" below the menu div to be empty. How can I achieve this?

When I have this all sorted out I will make a post explaining what I did a
bit more clearly - maybe this will help some other people too.

-Colin

[Chris Morris]

Re: background-color:transpare nt (Re: CSS beginner requests advice)

Stan Brown <the_stan_brown @fastmail.fm> writes:[color=blue]
> etc etc etc. I could sweep all that away and just have the five
> plain selectors for a, if "transparen t" were safe, but I think I
> read somwehere that it's not.[/color]

Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
count that as a problem. I laughed/cried a lot when I worked out why.

--
Chris

[Michael Rozdoba]

Re: background-color:transpare nt (Re: CSS beginner requests advice)

Chris Morris wrote:
[color=blue]
> Stan Brown <the_stan_brown @fastmail.fm> writes:
>[color=green]
>>etc etc etc. I could sweep all that away and just have the five
>>plain selectors for a, if "transparen t" were safe, but I think I
>>read somwehere that it's not.[/color]
>
>
> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
> count that as a problem. I laughed/cried a lot when I worked out why.[/color]

It wouldn't be parsing the first seven characters, ignoring/zeroing any
non-hex digits, would it? I wonder if anyone's tried to find a word
which generates an appropriate colour?

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Steve Pugh]

Re: background-color:transpare nt (Re: CSS beginner requests advice)

Michael Rozdoba <mroz@nowhere.i nvalid> wrote:[color=blue]
>Chris Morris wrote:[color=green]
>>
>> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
>> count that as a problem. I laughed/cried a lot when I worked out why.[/color]
>
>It wouldn't be parsing the first seven characters, ignoring/zeroing any
>non-hex digits, would it? I wonder if anyone's tried to find a word
>which generates an appropriate colour?[/color]

Dunno about appropriate but... this is a long time Netscape behaviour
and I had a friend who used to (we're talking back in the NS 1.1 or NS
2 days) set his bgcolor, text, link, etc. colours on <body> by using
obscenities that just happened to produce the desired colours. Ah,
students days, cheap beer, free Internet access and low standards of
humour.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Neal]

Re: background-color:transpare nt (Re: CSS beginner requests advice)

On Thu, 29 Jan 2004 16:51:13 +0000, Michael Rozdoba <mroz@nowhere.i nvalid>
wrote:
[color=blue]
> Chris Morris wrote:
>[color=green]
>> Stan Brown <the_stan_brown @fastmail.fm> writes:
>>[color=darkred]
>>> etc etc etc. I could sweep all that away and just have the five plain
>>> selectors for a, if "transparen t" were safe, but I think I read
>>> somwehere that it's not.[/color]
>>
>>
>> Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
>> count that as a problem. I laughed/cried a lot when I worked out why.[/color]
>
> It wouldn't be parsing the first seven characters, ignoring/zeroing any
> non-hex digits, would it? I wonder if anyone's tried to find a word
> which generates an appropriate colour?
>[/color]


If your theory is true, in Netscape 'color: souffle;' would be awfully
green. I don't think I'm ordering that at the Netscape Cafe...

[Michael Rozdoba]

Re: background-color:transpare nt (Re: CSS beginner requests advice)

Steve Pugh wrote:[color=blue]
> Michael Rozdoba <mroz@nowhere.i nvalid> wrote:[/color]

[netscape colours]
[color=blue][color=green]
>>It wouldn't be parsing the first seven characters, [snip] ?[/color][/color]
[color=blue]
> Dunno about appropriate but... this is a long time Netscape behaviour
> and I had a friend who used to (we're talking back in the NS 1.1 or NS
> 2 days) set his bgcolor, text, link, etc. colours on <body> by using
> obscenities that just happened to produce the desired colours. Ah,
> students days, cheap beer, free Internet access and low standards of
> humour.[/color]

LOL. Low standards? That sounds positively sophisticated for students. I
might have to pay http://browsers.evolt.org/?navigator/ a visit.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Stan Brown]

Re: background-color:transpare nt (Re: CSS beginner requests advice)

It seems "Chris Morris" wrote in
comp.infosystem s.www.authoring.stylesheets:[color=blue]
>Stan Brown <the_stan_brown @fastmail.fm> writes:[color=green]
>> etc etc etc. I could sweep all that away and just have the five
>> plain selectors for a, if "transparen t" were safe, but I think I
>> read somwehere that it's not.[/color]
>
>Netscape 4 interprets it as #0a000a and 'inherit' as #00e000 if you
>count that as a problem. I laughed/cried a lot when I worked out why.[/color]

Sigh. Thanks.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA

http://OakRoadSystems.com/

HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/