0

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

5
Contributors
9
Replies
10
Views
7 Years
Discussion Span
Last Post by Arkinder
0

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

0

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

Edited by Hawkeye Python: n/a

0

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.

Edited by drjohn: n/a

0

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

0

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.

Edited by Hawkeye Python: n/a

0

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.

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.