tableless layout blues

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

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

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

"Brian" <usenet1 (AT) mangymutt (DOT) com.invalid-remove-this-part> wrote

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" <amykimber (AT) yahoo (DOT) com> wrote

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

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"

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"

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

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