tableless layout blues

John W. wrote:

Nikolaos Giannopoulos <nikolaos (AT) solmar (DOT) 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

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

"Mikko Rantalainen" <mira (AT) st (DOT) jyu.fi> 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?

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 / 2003-09-08 21:52:

"Mikko Rantalainen" <mira (AT) st (DOT) jyu.fi> wrote in message
news:bji7ll$7o7$1 (AT) mordred (DOT) 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