473,326 Members | 2,147 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

CSS beginner requests advice

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:absolute. 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
Jul 20 '05 #1
20 2547

"Mr Colin J Cotter" <co***@erebus.ese.ic.ac.uk> skrev i meddelandet
news:Pi**************************************@ereb us.ese.ic.ac.uk...
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:absolute. 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.


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
:-=

Jul 20 '05 #2
Mr Colin J Cotter wrote:
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.


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
Jul 20 '05 #3
> 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 :-) 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... 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 :-)

Well thankyou for replying to my message.

-cjc

Jul 20 '05 #4
On Wed, 28 Jan 2004 13:53:27 +0000, Ian Watts
<iw****************@ntlworld.com.and.this> wrote:

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


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.
Jul 20 '05 #5
> 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!
2. Validate your CSS to get rid of errors at
http://jigsaw.w3.org/css-validator/ Thanks, I repaired the errors. 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

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

Jul 20 '05 #6
On Wed, 28 Jan 2004 11:54:17 +0000, Mr Colin J Cotter
<co***@erebus.ese.ic.ac.uk> wrote:
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:absolute. 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).


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:transparent;" 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/
Jul 20 '05 #7
It seems "Stephen Poley" wrote in
comp.infosystems.www.authoring.stylesheets:
You can also simplify a few things. For example, take out all the
"background-color:transparent;" 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.


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 "transparent" were safe, but I think I
read somwehere that it's not.

I tried googling
background transparent problem group"*.stylesheets
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/
Jul 20 '05 #8
Thanks for your helpful reply.
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. Aha - this I did not know. Thankyou. 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.

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

Jul 20 '05 #9
Stan Brown <th************@fastmail.fm> writes:
etc etc etc. I could sweep all that away and just have the five
plain selectors for a, if "transparent" were safe, but I think I
read somwehere that it's not.


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
Jul 20 '05 #10
Chris Morris wrote:
Stan Brown <th************@fastmail.fm> writes:
etc etc etc. I could sweep all that away and just have the five
plain selectors for a, if "transparent" were safe, but I think I
read somwehere that it's not.

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.


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
Jul 20 '05 #11
Michael Rozdoba <mr**@nowhere.invalid> wrote:
Chris Morris wrote:

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.


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?


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #12
On Thu, 29 Jan 2004 16:51:13 +0000, Michael Rozdoba <mr**@nowhere.invalid>
wrote:
Chris Morris wrote:
Stan Brown <th************@fastmail.fm> writes:
etc etc etc. I could sweep all that away and just have the five plain
selectors for a, if "transparent" were safe, but I think I read
somwehere that it's not.

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.


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?

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...
Jul 20 '05 #13
Steve Pugh wrote:
Michael Rozdoba <mr**@nowhere.invalid> wrote:
[netscape colours]
It wouldn't be parsing the first seven characters, [snip] ?

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.


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
Jul 20 '05 #14
It seems "Chris Morris" wrote in
comp.infosystems.www.authoring.stylesheets:
Stan Brown <th************@fastmail.fm> writes:
etc etc etc. I could sweep all that away and just have the five
plain selectors for a, if "transparent" were safe, but I think I
read somwehere that it's not.


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.


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/
Jul 20 '05 #15
Stan Brown wrote:

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 "transparent" were safe, but I think I
read somwehere that it's not.


Correct, it is not safe. Using transparent can lead to the same
problems as not setting a background color at all.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #16
Neal <ne*****@spamrcn.com> writes:
On Thu, 29 Jan 2004 16:51:13 +0000, Michael Rozdoba
Chris Morris wrote:
Netscape 4 interprets [transparent] as #0a000a and 'inherit' as
#00e000 if you count that as a problem. I laughed/cried a lot
when I worked out why.
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?


Well, I thought so. However...
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...


Well, I tested this
http://www.dur.ac.uk/c.i.morris/ns4.html

Souffle appears to be a shade of cyan, closer to souffff, I think.
Obviously this isn't solely what's going on...

--
Chris
Jul 20 '05 #17
Chris Morris <c.********@durham.ac.uk> wrote:
Neal <ne*****@spamrcn.com> writes:

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...


Well, I tested this
http://www.dur.ac.uk/c.i.morris/ns4.html

Souffle appears to be a shade of cyan, closer to souffff, I think.


Comes out as #00FFE0 (yes E0 not 0E, so cyan like Chris reports) for
me. Odd that.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #18
Chris Morris wrote:

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.


I keep trying to work this out, but cannot (despite reading followups
to the post I quoted here). Care to share?

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #19
Brian <us*****@julietremblay.com.invalid-remove-this-part> writes:
Chris Morris wrote:
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.


I keep trying to work this out, but cannot (despite reading followups
to the post I quoted here). Care to share?


The rule that works for these (though acts unexpectedly for souffle,
so perhaps it's not the whole story) is

inherit =:
i Well, it must be a hash, colours start with hashes
n Not a hex digit, call it 0
h Not a hex digit, call it 0
e E
r Call it 0
i Call it 0
t Call it 0
inherit = #00e000

transparent
#0a000a
(and ignore the rest, colour codes are seven characters)

--
Chris
Jul 20 '05 #20
Chris Morris wrote:
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.

I laughed so hard, I nearly cried! ;-)
inherit =:
i Well, it must be a hash, colours start with hashes
n Not a hex digit, call it 0
h Not a hex digit, call it 0
e E
r Call it 0
i Call it 0
t Call it 0
inherit = #00e000

transparent
#0a000a
(and ignore the rest, colour codes are seven characters)


rotfl. Wow, I almost pity the clown who wrote that code!

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #21

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
by: Rod Carrol | last post by:
Hello all, As a beginner I've been exeperiencing lots of errors while building my website, (I'm currently attempting to implement a member login/registration piece for my site using mySQL and...
18
by: mitchellpal | last post by:
Hi guys, am learning c as a beginner language and am finding it rough especially with pointers and data files. What do you think, am i being too pessimistic or thats how it happens for a beginner?...
5
by: Minlar Ginger | last post by:
HIi all: I am a new beginner to python, would you like give me some advice on studying it? Welcome to list some book on python for me. Thanks a lot.
6
by: xfile | last post by:
Hello, I am very new to donet and wondering how to solve the following scenario: (1) Our current hosted site has .Net 1.1 and can be upgraded to 2.0 if needed. Some downtime are expected and...
2
by: nakista | last post by:
Hello ,i'm a beginner in C++ .So i'm finding some documents for beginner .If you know ,please send me some useful links or advice. Thanks for helping!!!
1
by: Blue_hatter | last post by:
Hey Guys, I'm a newbie to the whole C++ Programming thing as I think I said before in a post. The thing is, I have this idea that might help me to learn at a better pace than I am doing currently....
6
by: Solo.Wolve | last post by:
I've just finished the K&R c, And begin to study c++ myself,so can anyone give me some advice?such as some books to read,and something to notice? Thank you very much.
3
by: Ben Keshet | last post by:
I have a probably simple beginner's question - I have a script that I am currently able to print its output. instead, i want to write it into a file - I tried different versions of write() but...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.