Help with positioning - I'm too stupid

[Jane Withnolastname]

I am trying to re-work an old site by replacing the html with css.

On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)

The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.

I plan to eliminate the table as soon as I figure out how to replicate
it using css elements, but first I'd like to get it positioned under
the image. I'm sure there is a way, but I am really too stupid to
actually understand absolute and relative and whatever else there is
in positioning.

(I ran the page through the Validator and I have it set to 4.01
Strict. The first point of contention it has is with the table, which
comes after the image, so I'm not too worried about that since, as I
said, I'll be getting rid of the table. I'm assuming, therefore, that
I haven't mucked anything up that is making it display this way.)

I feel like this might have something to do with layers, but if you
thought positioning made my head spin....

Anyway, I'd appreciate a demonstration, but I will gladly check out
any sort of idiot-proof tutorial you can point me to :)
Thanks!

[Nikolaos Giannopoulos]

Jane Withnolastname wrote:

I am trying to re-work an old site by replacing the html with css.

On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
An excellent tutorial on CSS positioning (at least IMO):
http://brainjar.com/css/positioning/

The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.
When you use absolute positioning the block is taken out of the "normal"
flow of positioning from top of the page to bottom that you would
normally see if you didn't use any absolute positioning.

i.e. think of it like this if you had 3 relative positioned blocks A, B
then they would display as:

A
B
C

if you specify absolute positioning for A then you would have something
like this (for example - I'm just abitrarily showing where A has been
absolutely positioned to illustrate the point):

B
C

A

What you need to do is absolute position B and make B the container of C
and all the other blocks in your page like:

A
B
C

i.e. using your example:

<div id="horizon">
<div id="content">
<div class="bodytext">A</div>
</div>
</div>
<div id="B-aka-container">
<p>C</p>
<p>D</p>
</div>

and include an absolute position rule for B-aka-container.

NOTE: There are some things that don't strike me well about this example
as it uses negative offsets, wraps text with divs instead of p's, and
utilizes fixed point font sizes instead of %; just to mention a few of
the ugly things I can see.

Do yourself a favor - look elsewhere or at the very least if you really
need this and can't find it elsewhere adhere to as little of this
example as possible.

I plan to eliminate the table as soon as I figure out how to replicate
it using css elements, but first I'd like to get it positioned under
the image. I'm sure there is a way, but I am really too stupid to
actually understand absolute and relative and whatever else there is
in positioning.
Your not "stupid". In fact most people that profess that they are smart
are usually idiots IMO ;-)

BTW the learning curve for positioning is somewhat steep as it takes a
while to get the hang of things. Read the tutorial that I mentioned and
then read a couple more. After a while it will all gel ;-)

(I ran the page through the Validator and I have it set to 4.01
Strict. The first point of contention it has is with the table, which
comes after the image, so I'm not too worried about that since, as I
said, I'll be getting rid of the table. I'm assuming, therefore, that
I haven't mucked anything up that is making it display this way.)
Take out the table and put something like this in place:

<p>Trying to move this below center</p>

you want to eliminate as many variables as possible - and then you could
add the table back and try to re-work it into CSS.

I feel like this might have something to do with layers, but if you
thought positioning made my head spin....

Forget layers - that's a Netscape contrived thing that you luckily don't
ever have to worry about... (again).

--Nikolaos

[Jane Withnolastname]

On Thu, 28 Aug 2003 15:51:31 -0400, Nikolaos Giannopoulos
<ni******@solmar.ca> wrote:

Jane Withnolastname wrote:

I am trying to re-work an old site by replacing the html with css.

On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
An excellent tutorial on CSS positioning (at least IMO):
http://brainjar.com/css/positioning/

The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.

When you use absolute positioning the block is taken out of the "normal"
flow of positioning from top of the page to bottom that you would
normally see if you didn't use any absolute positioning.

i.e. think of it like this if you had 3 relative positioned blocks A, B
then they would display as:

A
B
C

if you specify absolute positioning for A then you would have something
like this (for example - I'm just abitrarily showing where A has been
absolutely positioned to illustrate the point):

B
C

A

What you need to do is absolute position B and make B the container of C
and all the other blocks in your page like:

A
B
C

i.e. using your example:

<div id="horizon">
<div id="content">
<div class="bodytext">A</div>
</div>
</div>
<div id="B-aka-container">
<p>C</p>
<p>D</p>
</div>

and include an absolute position rule for B-aka-container.

Thanks for the link. I didn't look at it yet, because your explanation
and tips were perfect for me. I think I sorta get it now. At least,
enough to fix the position of my table. Anyway, I did bookmark that
site for future reference (like tomorrow, when I've forgotten
everything again!)
NOTE: There are some things that don't strike me well about this example
as it uses negative offsets, wraps text with divs instead of p's, and
utilizes fixed point font sizes instead of %; just to mention a few of
the ugly things I can see.

Do yourself a favor - look elsewhere or at the very least if you really
need this and can't find it elsewhere adhere to as little of this
example as possible.
I would love to use something else, because this is all very
complicated, but I looked and looked and this was all I could find.
I am using this to center a combination of an image and text. The text
is three very short lines, separated by breaks. The lines are no
longer than the width of the image (374px), so I don't anticipate the
need for wrapping.
Having said that, I am re-writing my site using "em" instead of "px"
and "pt", etc. and would really like to implement that into this
style, but I am at a loss for how to do that. Since it is a relative
term, I don't think you can just translate pixels into "em" (I don't
even know what that stands for, but I know I'm supposed to use it!)
but if I could approximate it on my screen, I would be confident it
would display appropriately for others. Is there a tool or is this
sort of thing covered in that tutorial?

I plan to eliminate the table as soon as I figure out how to replicate
it using css elements, but first I'd like to get it positioned under
the image. I'm sure there is a way, but I am really too stupid to
actually understand absolute and relative and whatever else there is
in positioning.

....In fact most people that profess that they are smart
are usually idiots IMO ;-)

Well, yes, I've found that too. :p
BTW the learning curve for positioning is somewhat steep as it takes a
while to get the hang of things. Read the tutorial that I mentioned and
then read a couple more. After a while it will all gel ;-)

I will, thank you.

(I ran the page through the Validator and I have it set to 4.01
Strict. The first point of contention it has is with the table, which
comes after the image, so I'm not too worried about that since, as I
said, I'll be getting rid of the table. I'm assuming, therefore, that
I haven't mucked anything up that is making it display this way.)

Take out the table and put something like this in place:

<p>Trying to move this below center</p>

you want to eliminate as many variables as possible - and then you could
add the table back and try to re-work it into CSS.

I feel like this might have something to do with layers, but if you
thought positioning made my head spin....

Forget layers - that's a Netscape contrived thing that you luckily don't
ever have to worry about... (again).

Thank god!!!

I'm gonna go look at that link now, check out their CSS tutorial and
see if I can figure out how to replace a table with css....
Thanks again.

[Stan Brown]

In article <na********************************@4ax.com> in
comp.infosystems.www.authoring.stylesheets, Jane Withnolastname
<Ja**********************@yahoo.com> wrote:

Since it is a relative
term, I don't think you can just translate pixels into "em" (I don't
even know what that stands for, but I know I'm supposed to use it!)

The bookstores have tons of books on CSS. The Web has scads of
tutorials.

As a teacher myself, might I suggest that you would be well advised
to study one of them? This business of cutely boasting of your
ignorance is wearing a bit thin, at least for me -- and it can't be
much fun for you either. When you don't know _anything_, it's not
very productive to focus on details until you first get a general
overview of the territory.

There's no shame in having elementary questions: we all started from
a position of 100% ignorance. But the net, like god, helps those who
help themselves.

--
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/
validator: http://jigsaw.w3.org/css-validator/

[Nikolaos Giannopoulos]

Jane Withnolastname wrote:

On Thu, 28 Aug 2003 15:51:31 -0400, Nikolaos Giannopoulos
<ni******@solmar.ca> wrote:

Thanks for the link. I didn't look at it yet, because your explanation
and tips were perfect for me. I think I sorta get it now.
I'm glad it helped however what you got was the workaround for this
specific problem. My help was not intended to replace the tutorial. If
you don't read this (or another) tutorial or a book on CSS-P then you
will most likely not get much further next time around.

Having said that, I am re-writing my site using "em" instead of "px"
and "pt", etc. and would really like to implement that into this
style, but I am at a loss for how to do that.
Unfortunately, I don't think anyone will help you on this one if you
don't at least read the first chapter of any CSS book or the most basic
of articles on CSS.

Since it is a relative
term, I don't think you can just translate pixels into "em" (I don't
even know what that stands for, but I know I'm supposed to use it!)
Calling yourself stupid is something that I don't agree with but
pretending to be ignorant is not something many will tolerate. If you
have no clue about this then you are definitely wasting the time of
others who may be reading this post.

but if I could approximate it on my screen, I would be confident it
would display appropriately for others. Is there a tool or is this
sort of thing covered in that tutorial?
You got to be kidding. Where are you getting this junk from -

BTW the learning curve for positioning is somewhat steep as it takes a
while to get the hang of things. Read the tutorial that I mentioned and
then read a couple more. After a while it will all gel ;-)

I will, thank you.

Right, BUT not today. Maybe tomorrow and most likely never. Stan was
right this attitude is tiresome....

I'm gonna go look at that link now, check out their CSS tutorial and
see if I can figure out how to replace a table with css....

Do yourself (and everyone else here) a favor - before jumping into CSS-P
read a couple tutorials and maybe even a book on CSS.

--Nikolaos