css - cleanest way to make spacer

[Wilhelm Kutting]

Hi,
i am going to make my pages more css and xhtml compatible.
Before i got athe following code:
---------------------
<p>first text</p>
<p><img src="spacer.gif" width="1" height="80" /></p>
<p>second text</p>
---------------------

By changing the value of the transparent spacer.gif i can arange the
second text on the page where i want it to.

Is there a good way to do this with css?

[Els]

Wilhelm Kutting wrote:

Hi,
i am going to make my pages more css and xhtml compatible.
Before i got athe following code:
---------------------
<p>first text</p>
<p><img src="spacer.gif" width="1" height="80" /></p>
<p>second text</p>
---------------------

By changing the value of the transparent spacer.gif i can
arange the second text on the page where i want it to.

Is there a good way to do this with css?

Yes,
<p>first text</p>
<p class="second">second text</p>

And in your styles (so it'll work for all pages with a 'second-
class paragraph'):
p.second{margin-top:80px;}

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Wilhelm Kutting]

Els wrote:

Wilhelm Kutting wrote:

Hi,
i am going to make my pages more css and xhtml compatible.
Before i got athe following code:
---------------------
<p>first text</p>
<p><img src="spacer.gif" width="1" height="80" /></p>
<p>second text</p>
---------------------

By changing the value of the transparent spacer.gif i can
arange the second text on the page where i want it to.

Is there a good way to do this with css?

Yes,
<p>first text</p>
<p class="second">second text</p>

And in your styles (so it'll work for all pages with a 'second-
class paragraph'):
p.second{margin-top:80px;}

This is margin 80px from the last paragraph
Can i use absolute margin from top of page, too?

[Els]

Wilhelm Kutting wrote:

<p>first text</p>
<p class="second">second text</p>

And in your styles (so it'll work for all pages with a
'second- class paragraph'):
p.second{margin-top:80px;}

This is margin 80px from the last paragraph
Can i use absolute margin from top of page, too?

Yes, but it's not called margin then.
p.second{position:absolute;top:80px}
will set the second paragraph exactly 80 pixels from the top of
the closest positioned parent.
Meaning: if the paragraphs are inside another div which also has
position:absolute, or position:relative, the 80 pixels are
calculated from the top of that div.

WARNING!!: don't even think about using the position property
until you really understand CSS.
Just one small little tiny disadvantage of setting the second
paragraph to 80px from the top of the page: What happens if the
first paragraph is higher because someone adjusted the font-
size?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Wilhelm Kutting]

Els wrote:

Wilhelm Kutting wrote:

<p>first text</p>
<p class="second">second text</p>

And in your styles (so it'll work for all pages with a
'second- class paragraph'):
p.second{margin-top:80px;}

This is margin 80px from the last paragraph
Can i use absolute margin from top of page, too?

Yes, but it's not called margin then.
p.second{position:absolute;top:80px}
will set the second paragraph exactly 80 pixels from the top of
the closest positioned parent.
Meaning: if the paragraphs are inside another div which also has
position:absolute, or position:relative, the 80 pixels are
calculated from the top of that div.

WARNING!!: don't even think about using the position property
until you really understandto CSS.
Just one small little tiny disadvantage of setting the second
paragraph to 80px from the top of the page: What happens if the
first paragraph is higher because someone adjusted the font-
size?

Tahnx, that is a really good point!
My objective is get the site working for blind people with css so i do
not use the absolute thing.

[Els]

Wilhelm Kutting wrote:

Els wrote:

WARNING!!: don't even think about using the position
property until you really understandto CSS.
Just one small little tiny disadvantage of setting the
second paragraph to 80px from the top of the page: What
happens if the first paragraph is higher because someone
adjusted the font- size?

Tahnx, that is a really good point!
My objective is get the site working for blind people with
css so i do not use the absolute thing.

Eh... to get the site working for blind people, the CSS won't
do anything...

Mark up your page with pure html first, but very simple, like:
<h1>Title</h1>
<p>
introduction
</p>
<h2>secondary title</h2>
<p>
information
</p>

etc.

Then, after you're sure it's all readable and accessible,
*then* you start to add CSS, so it will be visually nice
looking for non-blind people.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Spartanicus]

Wilhelm Kutting <wk******@arcor.de> wrote:

i am going to make my pages more css and xhtml compatible.
Only your intention to move to xhtml is on topic here, and the answer
is: don't. Xhtml currently serves no useful purpose, use html 4.01
Strict.
Is there a good way to do this with css?

comp.infosystems.www.authoring.stylesheets is the correct place for
questions regarding css, but instead of moving your questions there you
should at least make a minimum effort to learn the basics yourself.

I'm assuming that you can access the web, there's a plethora of
information on css there, use it.

--
Spartanicus

[Jukka K. Korpela]

Els <el*********@tiscali.nl> wrote:

Yes,
<p>first text</p>
<p class="second">second text</p>

And in your styles (so it'll work for all pages with a 'second-
class paragraph'):
p.second{margin-top:80px;}

This is mostly off-topic for this group (and better suited for
c.i.w.a.stylesheets), but there are HTML issues involved in the sense
that HTML elements have some _default_ rendering in browsers. Partly this
behavior is (obscurely) described in the sample style sheets for HTML in
CSS specifications.

It is important to note in cases like this that paragraphs (p elements)
generally have a default top margin and a default bottom margin.
Moreover, by CSS rules the actual spacing between two consecutive p
elements is the larger of the first element's bottom margin and the
second element's top margin.

Thus, p.second{margin-top:80px;}, if applied by a browser, will set a
_minimum_ vertical spacing between the paragraphs. It is quire probable
that it will also set the actual spacing, but there is really no law
against using a browser with, say, a font size of 100 pixels, in which
case the first paragraph's bottom margin is probably larger than 80
pixels.

The morale is that you should normally not use the px unit but set e.g. a
top margin using the em unit, which equals the size (height) of the font
in use.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Brian]

Els wrote:

Eh... to get the site working for blind people, the CSS won't do
anything...

Not yet. But in principle, there is room for an aural stylesheet.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Els]

Brian wrote:

Els wrote:

Eh... to get the site working for blind people, the CSS
won't do anything...

Not yet. But in principle, there is room for an aural
stylesheet.

True, and of course "display:none" does actually interfere, as
speech browsers seem to honour that value, but as the OP is only
starting out using CSS (or so it seems) I thought I'd generalize
just a little bit :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Brian]

Els wrote:

"display:none" does actually interfere, as speech browsers seem to
honour that value,
You mean screen readers? I suppose there's not much they can do, since
they only read what a screen displays, or would display. Is there a true
aural browser? I don't know of one.
but as the OP is only starting out using CSS (or so it seems) I
thought I'd generalize just a little bit :-)

The right choice, I imagine.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Els]

Brian wrote:

Els wrote:

"display:none" does actually interfere, as speech browsers
seem to honour that value,

You mean screen readers? I suppose there's not much they
can do, since they only read what a screen displays, or
would display. Is there a true aural browser? I don't know
of one.

For the difference between screen readers and speech browsers I
would like to refer you to Jake, he's the expert (or so I think)
:-)
I have no clue about these type of eh.. "surf progams"
whatsoever.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -