tableless layout blues

[Amy]

Hello all,

Well, I've decided to take the plunge and go for this no table
theory... so far I'm not impressed - the whole thing is driving me mad!!!!

I'm sure once I finally get it working it'll be groovy and I'll
never took back - I suppose it's just hard to change, I've got really used
to creating WebPages with tables it's second nature!

So.... http://www.amykimber.com/amy/a.htm - what am I doing wrong?

Have I got to layer up my sections - on top of each other? In which
case, which side do I work from? I can get bits to work, but not when I put
text into them....

I think I've started off on the wrong tree, can you kind people
point me in the right direction?

Many thanks,

Amy K

[Nikolaos Giannopoulos]

Amy wrote:

Hello all,

Well, I've decided to take the plunge and go for this no table
theory... so far I'm not impressed - the whole thing is driving me mad!!!!

As it will, I'm sure, until it gels... and it does take some time and
some getting used to.

An excellent tutorial on CSS positioning (at least IMO):
http://brainjar.com/css/positioning/

Read it. Apply the concepts in it.... Read it again. Play around with
the concepts in it.... Read it again.

You get the idea.

BTW another poster suggested studying a layout - that is a good idea to
get you started but if you really want to understand things your going
to need to learn the concepts... at some point ;-)

Good Luck,

--Nikolaos

[John W.]

Nikolaos Giannopoulos <ni******@solmar.ca>:

Amy wrote:

Hello all,

Well, I've decided to take the plunge and go for this no table
theory... so far I'm not impressed - the whole thing is driving me mad!!!!
As it will, I'm sure, until it gels... and it does take some time and
some getting used to.

An excellent tutorial on CSS positioning (at least IMO):
http://brainjar.com/css/positioning/

Read it. Apply the concepts in it.... Read it again. Play around with
the concepts in it.... Read it again.

You get the idea.

BTW another poster suggested studying a layout -

Next time I will write:
.... study + dissect the site (not a "single" lay-out) untill you know
what is happening and why :-)
that is a good idea to
get you started but if you really want to understand things your going
to need to learn the concepts... at some point ;-)

You can also look at the recommendations, try to implement them and
keep on trying because they are difficult to understand.
Or you can get hold of the recommendations and study "working"
exemples as well.

What's the best way you think?
John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

[Amy]

Hello again,

Cracked it :-) Thank you all for your help - I had the basic idea,
but not the concept ergo I made a compleate mess of the thing - veyr ugly.

Ok, http://www.amykimber.com/amy/test.asp - this is what I've got -
it's w3c valid (page and css) but is it 'correct'? Am I still doing things
the 'wrong' way? Could be - I'm starting to design my page from the bottom
up, trying to get everything correct as I go along, so any comments welcome!

My 'toptopbar' - the blue bit right at the very top - is
"height:5px", top margin of 0px... therefore, if I want the top bannar (next
section down, with my log in - #topbar) to start about 2ish below this,
shouldn't this secion have a top of , say, 7px? But when I do this it all
overlapps, so I've just had to keep fiddeling with the top margin number
until it looked right - 21px, this doesn't make sence to me :-/ Anyone?

Also, is there a list somewhere of all the possible properties of a
<div> tag? Just want to know what's possible :-)

Oh yes - I'm currently using two style sheets - one with all my
general stuff in, and a second one with my link styles in - I split them
just becasue it seemed easyer to deal with - can this cause any problems?
Seems ok to me but you never know!

Again, many thanks for all your help - in this thread and others,
I've seen the light - not entirly convinced yet, but cirtainly getting that
way!

Amy K

[Amy]

"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:<HMc6b.370780$o%2.167232@sccrnsc02>...

Amy wrote:

Well, I've decided to take the plunge and go for this no table theory... so far I'm not impressed - the whole thing is driving me mad!!!!

No doubt. When most people do this -- I've been down this road, and it happened to me, too -- they already have a layout, which might not be appropriate for the content. If you want my advice, scrap the layout.
<gasp>
Yes, you read that right.

oh....

Actually, this is more or less what I did - I just created a new page in
dreamweaver (what ever this groups oppinion to it is, it's great for bashing
out ideas in before moving to notepad - IMHO of course!) and drew div boxes.

so, I've got my nice div boxes, put come content in them and, well, they
look great in IE but netscape.... <sigh>

So... I've got a div-ed up page, but in netscape nothing lines up :-( I've
tried to use %s where possible, what should I do?

Amy

http://www.amykimber.com/amy/test.asp

[Amy]

"Amy" <am*******@yahoo.com> wrote in message
news:bj*******************@news.demon.co.uk...

Hello again,

<snip>

<sigh> It sucks in Netscape.... please can someone point me in the right
direction? In the meantime I'm off to search goggle.... oh, and download
Opera...

Amy K

[John W.]

"Amy" <am*******@yahoo.com>:

Hello again,

Cracked it :-) Thank you all for your help - I had the basic idea,
but not the concept ergo I made a compleate mess of the thing - veyr ugly.

Ok, http://www.amykimber.com/amy/test.asp - this is what I've got -
it's w3c valid (page and css) but is it 'correct'? Am I still doing things
the 'wrong' way? Could be - I'm starting to design my page from the bottom
up, trying to get everything correct as I go along, so any comments welcome!

My 'toptopbar' - the blue bit right at the very top - is
"height:5px", top margin of 0px... therefore, if I want the top bannar (next
section down, with my log in - #topbar) to start about 2ish below this,
shouldn't this secion have a top of , say, 7px? But when I do this it all
overlapps, so I've just had to keep fiddeling with the top margin number
until it looked right - 21px, this doesn't make sence to me :-/ Anyone?

Also, is there a list somewhere of all the possible properties of a
<div> tag? Just want to know what's possible :-)

Oh yes - I'm currently using two style sheets - one with all my
general stuff in, and a second one with my link styles in - I split them
just becasue it seemed easyer to deal with - can this cause any problems?
Seems ok to me but you never know!

Again, many thanks for all your help - in this thread and others,
I've seen the light - not entirly convinced yet, but cirtainly getting that
way!

Another poster suggested <http://brainjar.com/css/positioning/> did
you study that?
You want the official recommendations?
Look and study first here:
<http://www.w3.org/TR/2002/WD-CSS21-20020802/box.html>
and then look and study here:
<http://www.w3.org/TR/2002/WD-CSS21-20020802/visuren.html>

HANWeekend
John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

[Eric Jarvis]

Amy wrote:

So... I've got a div-ed up page, but in netscape nothing lines up :-( I've
tried to use %s where possible, what should I do?

Google for "@import hack"...basically Netscape 4 doesn't recognise @import
for the stylesheet so it uses the one delivered by link rel...giving you a
totally different stylesheet for Netscape 4 (and one or two other rarer
browsers)

--
eric
www.ericjarvis.co.uk
"Hey Lord don't ask me questions
There ain't no answer in me"

[Eric Jarvis]

William Tasso wrote:

Eric Jarvis wrote:

Amy wrote:

So... I've got a div-ed up page, but in netscape nothing lines up
:-( I've tried to use %s where possible, what should I do?

Google for "@import hack"...basically Netscape 4 doesn't recognise
@import for the stylesheet so it uses the one delivered by link
rel...giving you a totally different stylesheet for Netscape 4 (and
one or two other rarer browsers)

not sure if it's rarer, but this also applies to ie4

when did you last see IE4 appearing noticeably in site logs?

--
eric
www.ericjarvis.co.uk
"Hey Lord don't ask me questions
There ain't no answer in me"

[Alan J. Flavell]

On Sun, Sep 7, Eric Jarvis inscribed on the eternal scroll:

William Tasso wrote:

not sure if it's rarer, but this also applies to ie4

when did you last see IE4 appearing noticeably in site logs?

Does that matter? If there is someone out there using it, isn't it
nice to know that the same technique rates to help it to view one's
web site?

I'm not saying it's worth putting any extra effort into it on IE4's
behalf, but if I understand William's remark right, he's merely
remarking on a side-benefit of a technique that's going to be used to
accommodate NN4 anyway. I see that as positive - don't knock it ;-)

cheers

[Mikko Rantalainen]

Amy wrote:

[<URL:http://www.amykimber.com/amy/test.asp>]
<sigh> It sucks in Netscape.... please can someone point me in the right
direction?

Netscape what? Netscape was the name of corporation that was bought by
AOL Time Warner and later discontinued. Netscape provided products like
"Navigator" and "Communicator".

Did you mean Netscape Navigator/Communicator 4.x or Netscape
Communicator 6.x or Netscape Communicator 7.x?

Other stuff to check:
http://www.amykimber.com/amy/styles/style-links.css

There's no property 'colour'. Use 'color' instead. Also, I'd suggest
using lovercase for everything unless you know you /need/ uppercase for
something.

http://www.amykimber.com/amy/styles/style.css

Don't use absolute positioning unless you really need that. Absolute
positioning is broken in MSIE where it often prevents selecting any text
and other problems aren't unheard of.

Stuff like "border: 1px none #000000;" doesn't make sense.
http://www.w3.org/TR/CSS21/box.html#...yle-properties
"border: none;" is enough to prevent displaying the border

Also, never use pixel unit for size of blocks (divs) that contain text.
You cannot know the computed pixel size of the text so you shouldn't try
to set the size of the container by random either.

--
Mikko

[Mikko Rantalainen]

Amy wrote:

[<URL:http://www.amykimber.com/amy/test.asp>]
<sigh> It sucks in Netscape.... please can someone point me in the right
direction?

Netscape what? Netscape was the name of corporation that was bought by
AOL Time Warner and later discontinued. Netscape provided products like
"Navigator" and "Communicator".

Did you mean Netscape Navigator/Communicator 4.x or Netscape
Communicator 6.x or Netscape Communicator 7.x?

Other stuff to check:
http://www.amykimber.com/amy/styles/style-links.css

There's no property 'colour'. Use 'color' instead. Also, I'd suggest
using lovercase for everything unless you know you /need/ uppercase for
something.

http://www.amykimber.com/amy/styles/style.css

Don't use absolute positioning unless you really need that. Absolute
positioning is broken in MSIE where it often prevents selecting any text
and other problems aren't unheard of.

Stuff like "border: 1px none #000000;" doesn't make sense.
http://www.w3.org/TR/CSS21/box.html#...yle-properties
"border: none;" is enough to prevent displaying the border

Also, never use pixel unit for size of blocks (divs) that contain text.
You cannot know the computed pixel size of the text so you shouldn't try
to set the size of the container by random either.

--
Mikko

[Nikolaos Giannopoulos]

John W. wrote:

Nikolaos Giannopoulos <ni******@solmar.ca>:

Next time I will write:
... study + dissect the site (not a "single" lay-out) untill you know
what is happening and why :-)
There is nothing wrong with your advice its just that if someone say,
for example, tries to use absolute positioning then they can always copy
by example but they'll have a hard time figuring out why the "rest" of
the layout is not following the last absolutely positioned layout.
There is nothing in the example to fill them in here except some divine
intervention ;-)

that is a good idea to
get you started but if you really want to understand things your going
to need to learn the concepts... at some point ;-)

You can also look at the recommendations, try to implement them and
keep on trying because they are difficult to understand.
Or you can get hold of the recommendations and study "working"
exemples as well.

The problem is that it is hard to figure out what is happening when
studying a complex example - especially with CSS-P - unless you either:

(a) Incrementally change one of these examples - which is not a bad idea
IMO its just that you'll still probably end up missing some "key" concepts.

(b) Study a layout wherein there are small variances in the example to
grasp the concepts - otherwise known as a tutorial.

I prefer (b) at times and at other times (a) BUT only when (a) is not
complex.

What's the best way you think?

Personally I kind of iterate over the following when learning a new concept:

(1) Check out a simple example
(2) Read a tutorial
(3) Look at / modify other more elaborate examples
(4) Read parts of the spec
(5) Repeat (1) - (5) as necessary

--Nikolaos

[Nikolaos Giannopoulos]

John W. wrote:

Nikolaos Giannopoulos <ni******@solmar.ca>:

Next time I will write:
... study + dissect the site (not a "single" lay-out) untill you know
what is happening and why :-)
There is nothing wrong with your advice its just that if someone say,
for example, tries to use absolute positioning then they can always copy
by example but they'll have a hard time figuring out why the "rest" of
the layout is not following the last absolutely positioned layout.
There is nothing in the example to fill them in here except some divine
intervention ;-)

that is a good idea to
get you started but if you really want to understand things your going
to need to learn the concepts... at some point ;-)

You can also look at the recommendations, try to implement them and
keep on trying because they are difficult to understand.
Or you can get hold of the recommendations and study "working"
exemples as well.

The problem is that it is hard to figure out what is happening when
studying a complex example - especially with CSS-P - unless you either:

(a) Incrementally change one of these examples - which is not a bad idea
IMO its just that you'll still probably end up missing some "key" concepts.

(b) Study a layout wherein there are small variances in the example to
grasp the concepts - otherwise known as a tutorial.

I prefer (b) at times and at other times (a) BUT only when (a) is not
complex.

What's the best way you think?

Personally I kind of iterate over the following when learning a new concept:

(1) Check out a simple example
(2) Read a tutorial
(3) Look at / modify other more elaborate examples
(4) Read parts of the spec
(5) Repeat (1) - (5) as necessary

--Nikolaos

[Philipp Lenssen]

Mikko Rantalainen wrote:

Amy wrote:

[<URL:http://www.amykimber.com/amy/test.asp>]
<sigh> It sucks in Netscape.... please can someone point me in the
right direction?

Netscape what? Netscape was the name of corporation that was bought
by AOL Time Warner and later discontinued. Netscape provided products
like "Navigator" and "Communicator".

Did you mean Netscape Navigator/Communicator 4.x or Netscape
Communicator 6.x or Netscape Communicator 7.x?

Other stuff to check:
http://www.amykimber.com/amy/styles/style-links.css

There's no property 'colour'. Use 'color' instead. Also, I'd suggest
using lovercase for everything unless you know you need uppercase for
something.

Lover what?

--
Google Blogoscoped
http://blog.outer-court.com

[Philipp Lenssen]

Mikko Rantalainen wrote:

Amy wrote:

[<URL:http://www.amykimber.com/amy/test.asp>]
<sigh> It sucks in Netscape.... please can someone point me in the
right direction?

Netscape what? Netscape was the name of corporation that was bought
by AOL Time Warner and later discontinued. Netscape provided products
like "Navigator" and "Communicator".

Did you mean Netscape Navigator/Communicator 4.x or Netscape
Communicator 6.x or Netscape Communicator 7.x?

Other stuff to check:
http://www.amykimber.com/amy/styles/style-links.css

There's no property 'colour'. Use 'color' instead. Also, I'd suggest
using lovercase for everything unless you know you need uppercase for
something.

Lover what?

--
Google Blogoscoped
http://blog.outer-court.com

[Amy]

Hello again,

Right, I've taken a lot of the advice given here, I'm workign my way
through a pile of reading,

Can you please have a look at this:-

http://www.amykimber.com/amy/top.htm
http://www.amykimber.com/amy/styles/style.css

I'm trying to get everything workong one div at a time! Ok, I've
changed the possition to fixed for the top-top bar, cos, well I always want
that fixed at the top, and I've just picked 'relitive' at random - I can't
really see much differences between doing this and specifying in absolute
(http://www.w3schools.com/css/pr_class_position.asp was my reference)

Why does this still look different in netscape 7 and IE6? Will it
always look different?

I've removed the XML declaration line from the top of the fiel as
well cos that does things to IE aparently <sigh>

thanks,

Amy K

[Amy]

Hello again,

Right, I've taken a lot of the advice given here, I'm workign my way
through a pile of reading,

Can you please have a look at this:-

http://www.amykimber.com/amy/top.htm
http://www.amykimber.com/amy/styles/style.css

I'm trying to get everything workong one div at a time! Ok, I've
changed the possition to fixed for the top-top bar, cos, well I always want
that fixed at the top, and I've just picked 'relitive' at random - I can't
really see much differences between doing this and specifying in absolute
(http://www.w3schools.com/css/pr_class_position.asp was my reference)

Why does this still look different in netscape 7 and IE6? Will it
always look different?

I've removed the XML declaration line from the top of the fiel as
well cos that does things to IE aparently <sigh>

thanks,

Amy K

[Amy]

"Mikko Rantalainen" <mi**@st.jyu.fi> wrote in message
news:bj**********@mordred.cc.jyu.fi...

Amy wrote:

[<URL:http://www.amykimber.com/amy/test.asp>]
<sigh> It sucks in Netscape.... please can someone point me in the right
direction?

ok, netscape whatever 7, I use IE myself - why? Cos when you view-sourse it
opens in notepad... this used to be important when I just html pages, I've
just stuck with it :-)
Other stuff to check:
http://www.amykimber.com/amy/styles/style-links.css

There's no property 'colour'. Use 'color' instead.
I'm not actually using this stylesheet yet, so who gives a monkeys - no
interesting links yet :-) If I do use it, I'll get around to that... though
I thought I picked that error up AGES ago.... hmm....

Anyway, what's wrong with colour?!?! Hmm? Arrrrg! AmericaniZation <sigh>
Just when I get the hang of english I deside to go into computing which is
all written in america <weeps into the cornflakes>
Don't use absolute positioning unless you really need that. Absolute
positioning is broken in MSIE where it often prevents selecting any text
and other problems aren't unheard of.
Ah.... right. So what do I do? possition: what? (with all due respects,
saying something like this isn't particularly helpful to a beginer unless
you give some guidence as to what they should look for instead)
Stuff like "border: 1px none #000000;" doesn't make sense.
Then why did my editor (dreamweaver MX) produce it?
Also, never use pixel unit for size of blocks (divs) that contain text.
sept for the ones with my logo in, which will be 140 or what ever pixels
deep... everything else is - or will be %s :-)
You cannot know the computed pixel size of the text so you shouldn't try
to set the size of the container by random either.

/me deletes 'Amy's Random Size Picker' :-)

Thanks for the advice... I'm getting there, very slowely....

[Amy]

"Mikko Rantalainen" <mi**@st.jyu.fi> wrote in message
news:bj**********@mordred.cc.jyu.fi...

Amy wrote:

[<URL:http://www.amykimber.com/amy/test.asp>]
<sigh> It sucks in Netscape.... please can someone point me in the right
direction?

ok, netscape whatever 7, I use IE myself - why? Cos when you view-sourse it
opens in notepad... this used to be important when I just html pages, I've
just stuck with it :-)
Other stuff to check:
http://www.amykimber.com/amy/styles/style-links.css

There's no property 'colour'. Use 'color' instead.
I'm not actually using this stylesheet yet, so who gives a monkeys - no
interesting links yet :-) If I do use it, I'll get around to that... though
I thought I picked that error up AGES ago.... hmm....

Anyway, what's wrong with colour?!?! Hmm? Arrrrg! AmericaniZation <sigh>
Just when I get the hang of english I deside to go into computing which is
all written in america <weeps into the cornflakes>
Don't use absolute positioning unless you really need that. Absolute
positioning is broken in MSIE where it often prevents selecting any text
and other problems aren't unheard of.
Ah.... right. So what do I do? possition: what? (with all due respects,
saying something like this isn't particularly helpful to a beginer unless
you give some guidence as to what they should look for instead)
Stuff like "border: 1px none #000000;" doesn't make sense.
Then why did my editor (dreamweaver MX) produce it?
Also, never use pixel unit for size of blocks (divs) that contain text.
sept for the ones with my logo in, which will be 140 or what ever pixels
deep... everything else is - or will be %s :-)
You cannot know the computed pixel size of the text so you shouldn't try
to set the size of the container by random either.

/me deletes 'Amy's Random Size Picker' :-)

Thanks for the advice... I'm getting there, very slowely....

[Mikko Rantalainen]

Amy / 2003-09-08 21:52:

"Mikko Rantalainen" <mi**@st.jyu.fi> wrote in message
news:bj**********@mordred.cc.jyu.fi...

Don't use absolute positioning unless you really need that. Absolute
positioning is broken in MSIE where it often prevents selecting any text
and other problems aren't unheard of.
Ah.... right. So what do I do? possition: what? (with all due respects,

Well, as so often in other CSS issues, too, the correct CSS to use is:
--clip--
/* this space intentionally left blank */
--clap--

Boxes are automatically sized according to the content and layed one
after another. If you want something side-by-side either use
display:table (doesn't work in MSIE), some method for floating (see
numerous 2 column tableless layouts linked from this newsgroup) or
position the smallest elements absolutely to margin of normally
flowed element.

Stuff like "border: 1px none #000000;" doesn't make sense.

Then why did my editor (dreamweaver MX) produce it?

Perhaps it says something about the quality of that piece of software?

Also, never use pixel unit for size of blocks (divs) that contain text.

sept for the ones with my logo in, which will be 140 or what ever pixels
deep... everything else is - or will be %s :-)

If the only content is your logo, the containing element is already
shrinkwrapped to have minimum height. If you don't specify anything
the layout will correctly 'heal' itself even after you resize the logo.

Thanks for the advice... I'm getting there, very slowely....

At least you have the motivation to learn. Learning CSS is hard but
I think the most important skill is to apply as little rules as
possible. Don't overdo CSS.

--
Mikko

[Mikko Rantalainen]

Amy / 2003-09-08 21:52:

"Mikko Rantalainen" <mi**@st.jyu.fi> wrote in message
news:bj**********@mordred.cc.jyu.fi...

Don't use absolute positioning unless you really need that. Absolute
positioning is broken in MSIE where it often prevents selecting any text
and other problems aren't unheard of.
Ah.... right. So what do I do? possition: what? (with all due respects,

Well, as so often in other CSS issues, too, the correct CSS to use is:
--clip--
/* this space intentionally left blank */
--clap--

Boxes are automatically sized according to the content and layed one
after another. If you want something side-by-side either use
display:table (doesn't work in MSIE), some method for floating (see
numerous 2 column tableless layouts linked from this newsgroup) or
position the smallest elements absolutely to margin of normally
flowed element.

Stuff like "border: 1px none #000000;" doesn't make sense.

Then why did my editor (dreamweaver MX) produce it?

Perhaps it says something about the quality of that piece of software?

Also, never use pixel unit for size of blocks (divs) that contain text.

sept for the ones with my logo in, which will be 140 or what ever pixels
deep... everything else is - or will be %s :-)

If the only content is your logo, the containing element is already
shrinkwrapped to have minimum height. If you don't specify anything
the layout will correctly 'heal' itself even after you resize the logo.

Thanks for the advice... I'm getting there, very slowely....

At least you have the motivation to learn. Learning CSS is hard but
I think the most important skill is to apply as little rules as
possible. Don't overdo CSS.

--
Mikko