 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007to center using CSS... a bit weird?
in http://www.0011.com/test_size3.html to center the logo "HTML 4.01 check" button at the bottom of the page, I used <div style="width: 10px; margin: 0px auto"> </div> to wrap around that button.... if using HTML, i would have used <center> However, I know the 10px above is wrong... I could use 60px or 100px... which is closer to the size of that image there.... however, does that mean I need to know exactly what width that image is to properly center it? because while in HTML, I just need to use <center> and forget about it... how come CSS requires knowing the size... so if Peter comes in and change to a different image, and he didn't know about changing the width for the CSS style, then it is not properly centered? > in > [quoted text clipped - 10 lines] > > if using HTML, i would have used <center> You *are* using HTML, it's just that <center> is long deprecated as presentation should be specified through CSS. > However, I know the 10px above is wrong... I could use 60px or > 100px... which is closer to the size of that image there.... however, > does that mean I need to know exactly what width that image is to > properly center it? CSS has the 'text-align' property, which actually applies to all inline content of an element. You just need something of the following form, replacing the ellipses with the relevant attributes: <div style="text-align:center;"> <a ...><img ...></a> </div>  SignatureSafalra (Stephen Morley) The 'white-space' Property In CSS: http://www.safalra.com/web-design/css/white-space-property/ On Oct 28, 5:13 am, "Safalra (Stephen Morley)" <use...@safalra.com> wrote: > CSS has the 'text-align' property, which actually applies to all inline > content of an element. You just need something of the following form, [quoted text clipped - 3 lines] > <a ...><img ...></a> > </div> that's nice... how about to center a textbox... inside the textbox the text should be left-justified. in that case, then use <div style="width: 100px; margin: 0 auto"> ? so... to center text and img, use "text-align:center" to center a div, use fixed width and auto left and right margin... any more case to consider besides text/img vs div? i wonder why this disparity... wasn't it somewhat more elegant using <center> ? > [snip centring things] > so... to center text and img, use "text-align:center" > to center a div, use fixed width and auto left and right margin... > > any more case to consider besides text/img vs div? i wonder why this > disparity... wasn't it somewhat more elegant using <center> ? No - mixing content and presentation is decidedly inelegant. Of course you're still doing that by using the style attribute, but the next step is to move on to external stylesheets and leave your HTML pure and semantic. On that topic, and to answer your other question, tables don't need a width to be centred - the following code in a stylesheet will centre all tables: table{ margin:0 auto; } SignatureSafalra (Stephen Morley) The 'white-space' Property In CSS: http://www.safalra.com/web-design/css/white-space-property/ > wasn't it somewhat more elegant using <center> ? <center> is presentational. All 'presentation' should be in CSS now. Let's say you have old pages with <center> sprinkled throughout. If you decide later that looks amateurish (it does), you would have to prowl through all the markup removing those tags, <center> ... </center> With CSS, and _one_ text-align: center; in the CSS, you can change to left-justify for your entire site simply by removing that _one_ line from the CSS. (for a simple site... but you get the idea. <g>) Signature-bts -Motorcycles defy gravity; cars just suck On Oct 28, 7:57 am, "Beauregard T. Shagnasty" <a.nony.m...@example.invalid> wrote: > > wasn't it somewhat more elegant using <center> ? > [quoted text clipped - 7 lines] > left-justify for your entire site simply by removing that _one_ line > from the CSS. (for a simple site... but you get the idea. <g>) that's nice... i get the idea. now how about... the <div style="clear: both"> </div> after floating items (div's) doesn't that line have to be integrated with the content? any other method that you don't have to mix it with content? > On Oct 28, 7:57 am, "Beauregard T. Shagnasty" > [quoted text clipped - 17 lines] > doesn't that line have to be integrated with the content? any other > method that you don't have to mix it with content? by the way, isn't the <b> and <br> also somewhat "presentational" too? how come those can pass the Strict... In article <1193645831.589295.311770@q5g2000prf.googlegroups.com>, (some talk about <center>...) > by the way, isn't the <b> and <br> also somewhat "presentational" > too? how come those can pass the Strict... The idea about center is that it can be done in css well. I have heard arguments to and fro about <b> and semantics and I have no clear picture. But about <br>, this seems to me to have some meaning, it is not mere style in a poem that one line ends and another begins, it is part of the poem that cannot be done away with; it is not as if there could as easily be alternatives. So perhaps <br> has an informational content, a meaning in some contexts. Signaturedorayme > (some talk about <center>...) > >> by the way, isn't the <b> and <br> also somewhat "presentational" >> too? how come those can pass the Strict... I stopped using <b> a long time ago, preferring <strong>. > The idea about center is that it can be done in css well. I have > heard arguments to and fro about <b> and semantics and I have no [quoted text clipped - 4 lines] > perhaps <br> has an informational content, a meaning in some > contexts. I do little poetry, but <br> works well with it. Or .. use a styled <pre> element. <pre class="poetry"> There once was a man from Nantucket<br> ... </pre> <br> also makes perfect sense in an <address>. Signature-bts -Motorcycles defy gravity; cars just suck let it be known on Sun, 28 Oct 2007 04:28:50 -0700 Summercool <Summercoolness@gmail.com> scribed: |in | [quoted text clipped - 20 lines] |and change to a different image, and he didn't know about changing the |width for the CSS style, then it is not properly centered? If you have Firefox installed (you should anyway to check you pages/site) you should download and install the Firebug add-in. IMHO I think it's very good at showing what the different elements are when you hover over them in the tree and it highlights that element in the page (you'll have to install it to understand, sorry). It helped me understand where the margins and paddings are added to the overall div and so on. <http://www.mozilla.com/en-US/> <https://addons.mozilla.org/en-US/firefox/> hth Signaturecf <cfnews@NOcharterSPAM.net> I may be dumb, but I'm not stupid. Terry Bradshaw > in > [quoted text clipped - 20 lines] > and change to a different image, and he didn't know about changing the > width for the CSS style, then it is not properly centered? Drop the width, display the image as a block level element and the image will center. i.e. html: <div id="valid"><img src="whereverUhaveIt"></div> css: #valid img { display: block; margin: 0 auto; text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/ } HTH Bill > html: > <div id="valid"><img src="whereverUhaveIt"></div> [quoted text clipped - 4 lines] > text-align: center /*for ie below 6 and ie6 and 7 in quirks mode*/ > } Actually, you can drop display:block and margin:auto. text-align:center should do all by itself. SignatureBerg > > html: > > <div id="valid"><img src="whereverUhaveIt"></div> [quoted text clipped - 10 lines] > -- > Berg Berg, text-align: center doesn't do it. In FF and Opera and IE, the image will display flush left in the containing div. To get the img centered in those browsers, both of the other rules are needed. There may be another way to do it then thw display: block, margin: auto, but text- align: center by itself isn't it. If I declare a width the size of the image on the containing div, then I can set the margin to auto and it will be centered in ff, opera and IE6 & 7 (didn't test it on others); text-align: center can be added to center the img in IE5.5. But, I understood the original questioner (summercool?) to be asking how to do this without knowing the width for the image, so that's what I came up with Bill >> > html: >> > <div id="valid"><img src="whereverUhaveIt"></div> [quoted text clipped - 13 lines] > Berg, > text-align: center doesn't do it. No you need to set text-align: center on the _container_ not on the img itself. Setting it on the img itself is meaningless as it is a replaced element and doesn't itself contain any text. > In FF and Opera and IE, the image > will display flush left in the containing div. To get the img centered > in those browsers, both of the other rules are needed. But not text-align: center. You're centering the img as a block (which works fine), Bergamot is centering it as an inline. > >> > html: > >> > <div id="valid"><img src="whereverUhaveIt"></div> [quoted text clipped - 24 lines] > But not text-align: center. You're centering the img as a block (which > works fine), Bergamot is centering it as an inline. Ben C, Berg and all, You're right; I stand corrected. I thought I had run thru all the combinations of settings on the container AND the image, but must have gotten confused in my own tests :-). So centering text-align: center on the containing div does center the img in all browsers after all! I apologize if my error confused anyone on the list. Bill |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.