for some odd reazn, on my pages, i have some centered text. however, the text isnt centered relative to the width of the element its contained in has, but instead, the witdh of the top-level element it is contained in.
so for instance, i have this:
<div style="width: 100%;">
<div style="width: 40%; float: left;">
Left Text
</div>
<div style="width: 60%;">
<center>
Right Text
</center>
</div>
</div>
now then, the "Right Text" will be centered relative to the witdh of the top=level element, which is 100% instead of to the right div, at 60%.
heres one example:http://terminal.x5788.net/contact.php?s=3
thanx
[[[terminal]]]When you use the float property, the element floats out of the document flow, therefore having unaffected children, siblings (in your case), and parents. Try using the clear property in your child elements.umm..would i implement this by stating clear: left; under the css declarations for the right div? or by doing clear: right; for the left div? or what?
btw, thanx for the reply!<div style="width: 100%;">
<div style="width: 40%; float: left;">
Left Text
</div>
<div style="width: 60%; text-align: center; clear: both;">
Right Text
</div>
</div>Also, if you don't want it to go to a new line, float the other element.
<div style="width: 100%;">
<div style="width: 40%; float: left;">
Left Text
</div>
<div style="width: 60%; text-align: center; float: left;">
Right Text
</div>
</div>ok..cool! thanx a bunch!Happy to help.
hmm...now with this solution you gave me...do you have to use the text-align attribute only? or if i use the <center> tag, is that fine too?Originally posted by xataku_nakusute
hmm...now with this solution you gave me...do you have to use the text-align attribute only? or if i use the <center> tag, is that fine too?
No, it's not fine; the text-align (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/text.html#propdef-text-align">http://www.w3.org/TR/CSS2/text.html#propdef-text-align</a><!-- m -->) property does the same thing as the CENTER (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER">http://www.w3.org/TR/html401/present/gr ... def-CENTER</a><!-- m -->) element, except the CENTER element is deprecated (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/conform.html#deprecated">http://www.w3.org/TR/html401/conform.html#deprecated</a><!-- m -->).Originally posted by Jona
No, it's not fine; the text-align (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/text.html#propdef-text-align">http://www.w3.org/TR/CSS2/text.html#propdef-text-align</a><!-- m -->) property does the same thing as the CENTER (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER">http://www.w3.org/TR/html401/present/gr ... def-CENTER</a><!-- m -->) element, except the CENTER element is deprecated (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/conform.html#deprecated">http://www.w3.org/TR/html401/conform.html#deprecated</a><!-- m -->). With one exception: <center> also applies to block-level elements.
Originally posted by fredmv
With one exception: <center> also applies to block-level elements.
Come again? It is a block-level element, but it's deprecated, so the text-align CSS property should be used in its place. A div with text-align:center; would do the same thing as the center tag, and still be valid. Am I missing something?Originally posted by Jona
Come again? It is a block-level element, but it's deprecated, so the text-align CSS property should be used in its place. A div with text-align:center; would do the same thing as the center tag, and still be valid. Am I missing something? I think you slightly misunderstood me. I'm saying that <center> applies to block-level elements, meaning that any child elements contained within it — whether block-level or inline-level, will be centered. However, child elements of an element with the CSS rule text-align: center applied, will only center inline-level elements.Originally posted by fredmv
I think you slightly misunderstood me. I'm saying that <center> applies to block-level elements, meaning that any child elements contained within it — whether block-level or inline-level, will be centered. However, child elements of an element with the CSS rule text-align: center applied, will only center inline-level elements.
How observant you are!
Actually that never crossed my mind, so I never tried it! But thanks for the enlightenment. Just don't give anyone any reasons to use proprietary code.No problem whatsoever and I couldn't agree more — CSS all the way.wow..ok..thisd make a good topic to discuss, lol
but umm..well...it still didnt work for me...
and i believe thats cuz of the fact that i have to use netscape since my MSIE is all messed up...
and yeah, with netscape, the text-align property only applies to text, while on msie as i noticed, takes up the property and applies it to most underlying elements...making it seem to me as though the text-align attribute and the <center> tag were synonymous(sp?)
anyways, if the <center> tag is depricated, does that mean that if i use it, im not going with strict XHTML specs?If you use it you're not even going with transitional HTML specs.hmm...then is there any way i can avoid this?I think most people use both text-align:center and margin:auto to get the desired effect. Usually works for me.hmm...well...im using netscape, and it doesnt seem to recognize it at all...ionno why..Originally posted by xataku_nakusute
...and i believe thats cuz of the fact that i have to use netscape since my MSIE is all messed up...
No, that's wrong; MSIE is always wrong. The text-align property should only apply to text.
From the W3C CSS2 specification: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/text.html#propdef-text-align">http://www.w3.org/TR/CSS2/text.html#propdef-text-align</a><!-- m -->
This property describes how inline content of a block is aligned.
Originally posted by xataku_nakusute
...anyways, if the <center> tag is depricated, does that mean that if i use it, im not going with strict XHTML specs?
That's exactly right.Originally posted by ray326
I think most people use both text-align:center and margin:auto to get the desired effect. Usually works for me.
Originally posted by xataku_nakasute
hmm...well...im using netscape, and it doesnt seem to recognize it at all...ionno why..
I believe Ray meant to use margin: auto on each of the DIVs you want centered, text-align only applies to text and images. If margin: auto applied to all underlying elements, you could use body { margin: auto } and every block-level element on the page would be centered.I believe Ray meant to use margin: auto on each of the DIVs you want centered, text-align only applies to text and images. True.
so for instance, i have this:
<div style="width: 100%;">
<div style="width: 40%; float: left;">
Left Text
</div>
<div style="width: 60%;">
<center>
Right Text
</center>
</div>
</div>
now then, the "Right Text" will be centered relative to the witdh of the top=level element, which is 100% instead of to the right div, at 60%.
heres one example:http://terminal.x5788.net/contact.php?s=3
thanx
[[[terminal]]]When you use the float property, the element floats out of the document flow, therefore having unaffected children, siblings (in your case), and parents. Try using the clear property in your child elements.umm..would i implement this by stating clear: left; under the css declarations for the right div? or by doing clear: right; for the left div? or what?
btw, thanx for the reply!<div style="width: 100%;">
<div style="width: 40%; float: left;">
Left Text
</div>
<div style="width: 60%; text-align: center; clear: both;">
Right Text
</div>
</div>Also, if you don't want it to go to a new line, float the other element.
<div style="width: 100%;">
<div style="width: 40%; float: left;">
Left Text
</div>
<div style="width: 60%; text-align: center; float: left;">
Right Text
</div>
</div>ok..cool! thanx a bunch!Happy to help.
hmm...now with this solution you gave me...do you have to use the text-align attribute only? or if i use the <center> tag, is that fine too?Originally posted by xataku_nakusute hmm...now with this solution you gave me...do you have to use the text-align attribute only? or if i use the <center> tag, is that fine too?
No, it's not fine; the text-align (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/text.html#propdef-text-align">http://www.w3.org/TR/CSS2/text.html#propdef-text-align</a><!-- m -->) property does the same thing as the CENTER (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER">http://www.w3.org/TR/html401/present/gr ... def-CENTER</a><!-- m -->) element, except the CENTER element is deprecated (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/conform.html#deprecated">http://www.w3.org/TR/html401/conform.html#deprecated</a><!-- m -->).Originally posted by Jona
No, it's not fine; the text-align (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/text.html#propdef-text-align">http://www.w3.org/TR/CSS2/text.html#propdef-text-align</a><!-- m -->) property does the same thing as the CENTER (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER">http://www.w3.org/TR/html401/present/gr ... def-CENTER</a><!-- m -->) element, except the CENTER element is deprecated (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/conform.html#deprecated">http://www.w3.org/TR/html401/conform.html#deprecated</a><!-- m -->). With one exception: <center> also applies to block-level elements.
Originally posted by fredmv With one exception: <center> also applies to block-level elements.
Come again? It is a block-level element, but it's deprecated, so the text-align CSS property should be used in its place. A div with text-align:center; would do the same thing as the center tag, and still be valid. Am I missing something?Originally posted by Jona
Come again? It is a block-level element, but it's deprecated, so the text-align CSS property should be used in its place. A div with text-align:center; would do the same thing as the center tag, and still be valid. Am I missing something? I think you slightly misunderstood me. I'm saying that <center> applies to block-level elements, meaning that any child elements contained within it — whether block-level or inline-level, will be centered. However, child elements of an element with the CSS rule text-align: center applied, will only center inline-level elements.Originally posted by fredmv
I think you slightly misunderstood me. I'm saying that <center> applies to block-level elements, meaning that any child elements contained within it — whether block-level or inline-level, will be centered. However, child elements of an element with the CSS rule text-align: center applied, will only center inline-level elements.
How observant you are!
Actually that never crossed my mind, so I never tried it! But thanks for the enlightenment. Just don't give anyone any reasons to use proprietary code.
No problem whatsoever and I couldn't agree more — CSS all the way.wow..ok..thisd make a good topic to discuss, lolbut umm..well...it still didnt work for me...
and i believe thats cuz of the fact that i have to use netscape since my MSIE is all messed up...
and yeah, with netscape, the text-align property only applies to text, while on msie as i noticed, takes up the property and applies it to most underlying elements...making it seem to me as though the text-align attribute and the <center> tag were synonymous(sp?)
anyways, if the <center> tag is depricated, does that mean that if i use it, im not going with strict XHTML specs?If you use it you're not even going with transitional HTML specs.hmm...then is there any way i can avoid this?I think most people use both text-align:center and margin:auto to get the desired effect. Usually works for me.hmm...well...im using netscape, and it doesnt seem to recognize it at all...ionno why..Originally posted by xataku_nakusute
...and i believe thats cuz of the fact that i have to use netscape since my MSIE is all messed up...
No, that's wrong; MSIE is always wrong. The text-align property should only apply to text.
From the W3C CSS2 specification: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/text.html#propdef-text-align">http://www.w3.org/TR/CSS2/text.html#propdef-text-align</a><!-- m -->
This property describes how inline content of a block is aligned.
Originally posted by xataku_nakusute
...anyways, if the <center> tag is depricated, does that mean that if i use it, im not going with strict XHTML specs?
That's exactly right.Originally posted by ray326
I think most people use both text-align:center and margin:auto to get the desired effect. Usually works for me.
Originally posted by xataku_nakasute
hmm...well...im using netscape, and it doesnt seem to recognize it at all...ionno why..
I believe Ray meant to use margin: auto on each of the DIVs you want centered, text-align only applies to text and images. If margin: auto applied to all underlying elements, you could use body { margin: auto } and every block-level element on the page would be centered.I believe Ray meant to use margin: auto on each of the DIVs you want centered, text-align only applies to text and images. True.