Help with positioning - I'm too stupid

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Jane Withnolastname - 28 Aug 2003 08:36 GMT

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!

Reply to this Message

Nikolaos Giannopoulos - 28 Aug 2003 20:51 GMT

> 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

Reply to this Message

Jane Withnolastname - 29 Aug 2003 03:32 GMT

>> I am trying to re-work an old site by replacing the html with css.
>>
[quoted text clipped - 49 lines]
>
>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
[quoted text clipped - 4 lines]
>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
[quoted text clipped - 4 lines]
>....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
[quoted text clipped - 14 lines]
>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.

Reply to this Message

Stan Brown - 29 Aug 2003 07:23 GMT

In article <naetkvkie1lb9hukmi70eps1eb879vmbm7@4ax.com> in
comp.infosystems.www.authoring.stylesheets, Jane Withnolastname
<JaneWithnolastnameNOSPAM@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.

Signature

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/

Reply to this Message

Nikolaos Giannopoulos - 29 Aug 2003 23:56 GMT

> 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

Reply to this Message

Jane Withnolastname - 30 Aug 2003 06:12 GMT

>> 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.
[quoted text clipped - 3 lines]
>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.

Sorry, I meant your explanation helped me to understand the meaning of
"absolute". Once I see it explained like that, it seems so simple. It
did not, however, help me to "program" positioning.

>> 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
[quoted text clipped - 3 lines]
>don't at least read the first chapter of any CSS book or the most basic
>of articles on CSS.

OK. I guess I thought that was more advanced.

>> Since it is a relative
>> term, I don't think you can just translate pixels into "em" (I don't
[quoted text clipped - 4 lines]
>have no clue about this then you are definitely wasting the time of
>others who may be reading this post.

Maybe stupid is the wrong word, but I have troubles grasping certain
concepts that introduce many new elements (especially new meanings for
old words) all at once. I wasn't pretending to be ignorant. I really
don't know what it means. Obviously, that is not "endearing" and I see
now, thanks to you and Stan, that I have been using this group as a
shortcut to actually learning a few things first.
For that I am truly sorry, to you and Stan and anybody else who
bothered to read my posts.

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

? Out of my head.... Is that an incredibly stupid question? I don't
know....

>>>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
[quoted text clipped - 4 lines]
>Right, BUT not today. Maybe tomorrow and most likely never. Stan was
>right this attitude is tiresome....

Actually, I read it about half an hour after I posted my message. I
also read the CSS tutorial on the same site, though it pretty much
covered stuff I already knew. I have looked at other sites and will
continue to do so.

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

OK, I will. Thank you for your help and thanks to everyone else who
was helpful. I have bookmarked a number of the sites suggested and I
see that I need to go read those now instead of posting more stupid /
ignorant / obvious questions here.
I will continue to read others' posts here and maybe I will find some
interesting ideas. But until I am truly stumped and cannot find my
question already answered elsewhere, I will not post here.
Thanks.

Reply to this Message

Nikolaos Giannopoulos - 30 Aug 2003 16:43 GMT

> Sorry, I meant your explanation helped me to understand the meaning of
> "absolute". Once I see it explained like that, it seems so simple. It
> did not, however, help me to "program" positioning.

Right. And that's why I recommended the tutorial. But you said that
you would read it later.

The problem is in your attitude not the content of your posts:
+ You asked an advanced question
+ You asked for a tutorial on an advanced topic to help you
+ I answered your question and I am glad the explanation was sufficient
+ I suggested an advanced tutorial that I found to be useful
+ I told you that this area is difficult to master but that you need to
read tutorials or a book and that it will eventually make sense
+ You solved *this* problem with the content of my reply
+ You ignored the suggestion to read the advanced tutorial
+ You suggested that you will probably forget everything tomorrow
+ You followed up with an an extremely rudimentary question on em's that
clearly shows that you have not read even the most basic of chapters on CSS

In summary: You asked for help and additional information; got the
help; got the additional information; said thank you and rejected the
additional information. In a nut shell, my time is worth wasting
helping you out but your time is not worth wasting helping yourself out.

Doesn't sound right does it.

>>>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.
>
> OK. I guess I thought that was more advanced.

em is a unit of measurement just like px (pixels), %, etc.... "In CSS,
1em is equivalent to the value of the elements font-size"[1]. if the
font-size is "equivalent" to 12px then 2em is "equivalent" to 24px. I
say equivalent since you may specify font-size of 100% instead of 12px
and as such you may not know the exact font-size factor that is used.
And that is the nice thing about this unit in that you don't have to
know what font-size is used - you just know that the value you specify
will be that value times the font-size. That's why it is called a
relative unit of measurement. If the font-size was changed to another
value then anything that specified em's would be adjusted accordingly.

However, IE 5.X Win has some issues with em units being used to specify
a margin (and possibly other bugs exist as well - I am not sure). In
general I just use % as the unit for everything except when it makes
sense to use px e.g. absolute positioning of a block.

>>>Since it is a relative
>>>term, I don't think you can just translate pixels into "em" (I don't
[quoted text clipped - 4 lines]
> old words) all at once. I wasn't pretending to be ignorant. I really
> don't know what it means.

Then that is your cue to look it up. The CSS specs can be found here:

http://www.w3.org/Style/CSS/

Specifically the CSS1 and CSS2 specs are (off the above links side bar):

http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS2

And to read up on units see here:

http://www.w3.org/TR/CSS1#units

> Obviously, that is not "endearing" and I see
> now, thanks to you and Stan, that I have been using this group as a
> shortcut to actually learning a few things first.
> For that I am truly sorry, to you and Stan and anybody else who
> bothered to read my posts.

Nobody will or at least should fault you for not knowing about
something. Everyone has to ask basic questions at some point.

I think you need to realize the distinction of asking a basic question
and demonstrating no capacity to try yet wanting to be spoon fed
answers. Like I said its about attitude not content.

> Actually, I read it about half an hour after I posted my message. I
> also read the CSS tutorial on the same site, though it pretty much
> covered stuff I already knew.

Then I suggest you re-read the tutorial on "Using Style Sheets" (there
are only 2) and specifically re-read the section on "Lengths and Units" at:

http://brainjar.com/css/using/default5.asp

> OK, I will. Thank you for your help and thanks to everyone else who
> was helpful. I have bookmarked a number of the sites suggested and I
> see that I need to go read those now instead of posting more stupid /
> ignorant / obvious questions here.

Good idea ;-)

> I will continue to read others' posts here and maybe I will find some
> interesting ideas. But until I am truly stumped and cannot find my
> question already answered elsewhere, I will not post here.
> Thanks.

Reading other posts and following along is an excellent way to
complement reading on your own. No, you don't have to be truly stumped
to ask a question - but I have already made this point see above.

Good Luck,

--Nikolaos

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2003

Help with positioning - I'm too stupid