Positioning of elements

[Hawkeye Python]

Hi! I'm starting HTML/CSS and I'm having this problem with positioning of elements...

I've used this to position a text:

HTML

<center>
(...)
<p id="txt_principal">lorem ipsum (...)</p>
(...)
</center>

CSS

#txt_principal{
font: italic normal 14px Verdana, sans-serif;
color: #DDD;
text-align:justify;
position:absolute;
margin-top: 25px;
margin-left: 205px;
margin-right: 400px;
}

But whenever the window is resized the text gets out of position, as you can see on the video below.

http://www.youtube.com/watch?v=2akmS-LY-Hg

[shaya4207]

By adding 'margin-left: 205px' & 'margin-right: 400px' you're killing the '<center>', the correct way to do it is delete the '<center>' tags, and put 'margin-left: auto; margin-right: auto;' that will automatically center you div

[Hawkeye Python]

Thanks for the help but it didn't work.

Without the center tag and using auto margin the result was the following:
[img]http://img291.imageshack.us/img291/4258/autod.jpg[/img]

<!-- NO CENTER TAGS WHAT SO EVER -->
<p id="txt_principal">Lorem ipsum (...)</p>

#txt_principal{
font: italic normal 14px Verdana, sans-serif;
color: #DDD;
text-align:justify;
position:absolute;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
}

Without the center tag and using the specific margin (window maximized) the result was the following:
[img]http://img638.imageshack.us/img638/3894/maxzl.jpg[/img]

<!-- NO CENTER TAGS WHAT SO EVER -->
<p id="txt_principal">Lorem ipsum (...)</p>

#txt_principal{
font: italic normal 14px Verdana, sans-serif;
color: #DDD;
text-align:justify;
position:absolute;
margin-top: 25px;
margin-left: 205px;
margin-right: 400px;
}

If it helps here are the files:
http://www.teste442.xpg.com.br/download/Web.7z

[shaya4207]

Sorry, you need togive it a width

[drjohn]

No, you need to set it in a div, give the div a name (class or id, whichever is most appropriate), give the div a width and set margin:auto. And of course drop the position:absolute completely - it's almost always a bad idea to use position:absolute.

If you expect to have more than one similarly styled paragraph in the div, and only paragraphs with those styles in it, apply the paragraph styles thus

#divName p { styles in here }. This way you don't need to add classes to each paragraph in that div, they will be applied automatically for you.

PS Perhaps you've noticed that on the web text is hardly ever justified at all (I can't remember the last time I saw it used, it's so rare). That's because text:justify; generally makes the text harder to read as the spaces between words can become very variable and annoy the reader. So I'd suggest dropping that as well.

[shaya4207]

No, you need to set it in a div, give the div a name (class or id, whichever is most appropriate), give the div a width and set margin:auto. And of course drop the position:absolute completely - it's almost always a bad idea to use position:absolute.

If you expect to have more than one similarly styled paragraph in the div, and only paragraphs with those styles in it, apply the paragraph styles thus

#divName p { styles in here }. This way you don't need to add classes to each paragraph in that div, they will be applied automatically for you.

PS Perhaps you've noticed that on the web text is hardly ever justified at all (I can't remember the last time I saw it used, it's so rare). That's because text:justify; generally makes the text harder to read as the spaces between words can become very variable and annoy the reader. So I'd suggest dropping that as well.

Yeah, I was still kinda tired in the morning when I replied that from my phone ;), but you're 100% right...

[Hawkeye Python]

No, you need to set it in a div, give the div a name (class or id, whichever is most appropriate), give the div a width and set margin:auto. And of course drop the position:absolute completely - it's almost always a bad idea to use position:absolute.

If you expect to have more than one similarly styled paragraph in the div, and only paragraphs with those styles in it, apply the paragraph styles thus

#divName p { styles in here }. This way you don't need to add classes to each paragraph in that div, they will be applied automatically for you.

PS Perhaps you've noticed that on the web text is hardly ever justified at all (I can't remember the last time I saw it used, it's so rare). That's because text:justify; generally makes the text harder to read as the spaces between words can become very variable and annoy the reader. So I'd suggest dropping that as well.

This just made things worst. Position:absolute and margin are the only ways of positioning elements that are shown on tutorials. If there are other ways I don't know how.

I'll read some more before starting my own page. Thanks for your help.

[drjohn]

Find some new tutorials!!!

What about floating? Do your tutorials mention that? It's a very common way to control layout. You really should avoid position:absolute as much as possible. I can't remember coming across many (any?) tutorials that only used position:absolute as the main way to control layout. Seriously. It is NOT the normal way to do things.

[RGStrat]

I agree with drjohn. It's not good sense to control a layout through position absolute. Too many ways to go wrong.

[Arkinder]

This just made things worst. Position:absolute and margin are the only ways of positioning elements that are shown on tutorials. If there are other ways I don't know how.

I'll read some more before starting my own page. Thanks for your help.

Perhaps you're doing it wrong.

Regards, Arkinder