|
Posted by Ben C on May 12, 2008, 3:54 am
Please log in for more thread options
> Scripsit gaijinco:
>
>> I'm specially having
>> difficulties with center alignment of elements like images and tables.
>> How is the "right" way to do it? (books that I have checked seemed to
>> dodge the issue)
>
> There's a variety of opinions, but it's really not a big issue. Using
> align="center" works most widely, but as a matter of principle, many
> people and organizations frown upon using presentational attributes in
> HTML and favor CSS.
align="center" is horrible. On some elements (like DIV) it means
text-align: center, on others it means centre the element itself (like
TABLE).
But worse than that it has its own bizarre "inheritance" rules (see HTML
4 11.3.2 "Inheritance of alignment specifications") that you have to get
your head around if you want anything in between "everything centered"
or "nothing centered".
Forget all that and use CSS which provides a much clearer and more
concise way to say which elements you want centered in what way.
> If you decide to use CSS for the purpose, note that
> for an image, you can wrap the image in a <div> element and set
> text-align: center on the wrapper, whereas for a table, you need to set
> left and right margin to auto (e.g., margin: 0 auto), and this requires
> Standards Mode (as opposite to Quirks Mode) and doesn't work at all on
> some fairly old browsers.
Or just set display: block (and margin: 0 auto) on the img, which saves
a div.
>> I also have a doubt. html-atributes width and height are preferred
>> over css-properties for images and tables?
>
> Moot point. For an image, setting the dimensions in HTML may speed up
> rendering a bit, and setting them in CSS is somewhat pointless, since
> the dimensions are normally in pixels and should match the actual
> dimensions of the image, so they aren't really "just presentation" the
> same as e.g. the width of a column is. For a table, the secret wisdom
> is: don't set any widths and heights until you find out that you really
> need to, and then set them as flexibly as possible, and CSS usually
> gives you better chances for that (e.g., the em unit).
I'd say that applies to most things apart from images, and not just
tables. I would add to that: set width explicitly if you feel the need
to, but you should hardly ever be setting height explicitly.
If you set width, the contents will flow into the width you set and just
take up more height. No problem. If you set height, there's usually no
guarantee the contents will fit.
|
|
Posted by Jukka K. Korpela on May 12, 2008, 6:35 am
Please log in for more thread options
Scripsit Ben C:
> align="center" is horrible. On some elements (like DIV) it means
> text-align: center, on others it means centre the element itself (like
> TABLE).
For both <img> and <table>, which is what the question was about, it
does what was asked.
In CSS, you would have to use somewhat odd-looking methods. Who would
_guess_ that for centering, you set margin: 0 auto? And you would use
_different_ methods for images and tables.
> But worse than that it has its own bizarre "inheritance" rules (see
> HTML 4 11.3.2 "Inheritance of alignment specifications") that you
> have to get your head around if you want anything in between
> "everything centered" or "nothing centered".
It is confusing indeed, and it involves contradictions in the HTML spec
(<table align="..."> is defined as setting the position of the table as
a whole) but it does not apply here. If you use <table align="center">,
the table gets centered. If you use <div align="center"><img ...></div>,
the image gets centered. Nothing to worry about strange HTML
"inheritance".
If you wish to center an image together with its caption, then the
situation is somewhat different. Then the simplest approach is to make
them a two-cell table, with align="center"; see
http://www.cs.tut.fi/~jkorpela/www/captions.html
> Or just set display: block (and margin: 0 auto) on the img, which
> saves a div.
That's possible, though if you wish to use Strict HTML, the img element
needs to be wrapped inside a block-level container (in the HTML sense)
anyway.
Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
sufficiently old IE versions don't support it at all (but can handle
align="center" fine).
What's the _practical_ benefit you expect to gain from moving away from
the simple <div align="center"><img ...></div> or even the simpler
<center><img ...></center> to a CSS-based approach?
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
|
|
Posted by Ben C on May 12, 2008, 9:18 am
Please log in for more thread options > Scripsit Ben C:
>
>> align="center" is horrible. On some elements (like DIV) it means
>> text-align: center, on others it means centre the element itself (like
>> TABLE).
>
> For both <img> and <table>, which is what the question was about, it
> does what was asked.
>
> In CSS, you would have to use somewhat odd-looking methods. Who would
> _guess_ that for centering, you set margin: 0 auto? And you would use
> _different_ methods for images and tables.
I agree it is a bit odd especially for something that people want to do
so often.
But in the long run it's just as confusing that HTML uses "align=center"
to mean centered-block and centered-inline on different elements.
>> But worse than that it has its own bizarre "inheritance" rules (see
>> HTML 4 11.3.2 "Inheritance of alignment specifications") that you
>> have to get your head around if you want anything in between
>> "everything centered" or "nothing centered".
>
> It is confusing indeed, and it involves contradictions in the HTML spec
> (<table align="..."> is defined as setting the position of the table as
> a whole) but it does not apply here. If you use <table align="center">,
> the table gets centered. If you use <div align="center"><img ...></div>,
> the image gets centered. Nothing to worry about strange HTML
> "inheritance".
Indeed. That was my first point. The strange HTML "inheritance" was the
even worse second point.
> If you wish to center an image together with its caption, then the
> situation is somewhat different. Then the simplest approach is to make
> them a two-cell table, with align="center"; see
> http://www.cs.tut.fi/~jkorpela/www/captions.html
For the sake of completeness, you could also mention using inline-block
in that document, especially as support for it is improving.
I think inline-block is the nicest way to do image galleries with
captions on the images.
>> Or just set display: block (and margin: 0 auto) on the img, which
>> saves a div.
>
> That's possible, though if you wish to use Strict HTML, the img element
> needs to be wrapped inside a block-level container (in the HTML sense)
> anyway.
Yes, good point. (What's "semantically" inline about an image?)
> Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
> sufficiently old IE versions don't support it at all (but can handle
> align="center" fine).
So people using old IE versions won't get things centered. Tough. It's
high time they woke up and smelt the coffee anyway.
> What's the _practical_ benefit you expect to gain from moving away from
> the simple <div align="center"><img ...></div> or even the simpler
><center><img ...></center> to a CSS-based approach?
I don't really know what you mean by "practical", but the main reasons
are these:
1. If someone's trying to learn how to do authoring, they shouldn't
waste their time learning about align=center.
2. One hopes that one day support for deprecated things will be dropped
altogether.
3. If you use align=center you have to put it on every element you want
centered or work with its strange "inheritance" rules. It's much
easier to target the elements you want with CSS selectors.
|
|
Posted by Jukka K. Korpela on May 14, 2008, 12:31 pm
Please log in for more thread options Scripsit Ben C:
> But in the long run it's just as confusing that HTML uses
> "align=center" to mean centered-block and centered-inline on
> different elements.
I concur; many HTML constructs are poorly named and overloaded with
varying meanings.
>> If you wish to center an image together with its caption, then the
>> situation is somewhat different. Then the simplest approach is to
>> make them a two-cell table, with align="center"; see
>> http://www.cs.tut.fi/~jkorpela/www/captions.html
>
> For the sake of completeness, you could also mention using
> inline-block in that document, especially as support for it is
> improving.
My problem with display: inline-block is that when it does not work, the
effects can be devastating. Suppose that you use
<span class="pic"><img ...>caption text</span>
<span class="pic"><img ...>caption text</span>
...
and do all the styling in CSS, using .pic { display: inline-block; }
among other things. When this rule is ignored, the images and their text
will run as a "line" with images as "large letters". Not nice. Using
<div> instead of <span> makes a difference but then the rendering is
poor in a different way.
And there are many reasons why it may fail to work, even on browsers
that support it; see
http://www.cs.tut.fi/~jkorpela/css-caveats.html
My point is: Why would we let browsers render our documents very poorly
(when CSS is "off") just for the sake of out being puristic, refraining
from the use of simple markup? After all, there is no adequate markup
for an image and its caption. (All the nice HTML 3 ideas were forgotten
long ago.) Since your markup can't be adequate, logical, couldn't it at
least make the best effort in producing a basic rendering that reflects
the structure? You can then use all the world's CSS to fine-tune and
even override the basic rendering.
>> That's possible, though if you wish to use Strict HTML, the img
>> element needs to be wrapped inside a block-level container (in the
>> HTML sense) anyway.
>
> Yes, good point. (What's "semantically" inline about an image?)
The Strict HTML requirement is rather formal as such, but an image _can_
conceivably appear as an inline element. We don't need to use small
image in place of special characters any more, but there can be
legitimate reasons to include others small images inside running text,
e.g. in an instruction manual "press the start button <img
src="start.gif" alt="">".
>> Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
>> sufficiently old IE versions don't support it at all (but can handle
>> align="center" fine).
>
> So people using old IE versions won't get things centered. Tough.
The question is whether you want to use a little more complicated CSS
code instead of a simple HTML attribute just to prevent old browsers
from rendering the page the way you want. :-)
>> What's the _practical_ benefit you expect to gain from moving away
>> from the simple <div align="center"><img ...></div> or even the
>> simpler <center><img ...></center> to a CSS-based approach?
>
> I don't really know what you mean by "practical",
Well, something that makes the page better, regarding its purpose. Does
it do its job better if you use CSS, or do you just feel advanced?
> but the main reasons are these:
>
> 1. If someone's trying to learn how to do authoring, they shouldn't
> waste their time learning about align=center.
I might agree on the idea that they should primarily learn to use CSS
for formatting, but in the foreseeable future, I think they should learn
the basic HTML formatting tools, too, and then make educated choices.
But this isn't practical in the sense that CSS-based centering would
make the page any better (to visitors, search engines, or other
parties).
> 2. One hopes that one day support for deprecated things will be
> dropped altogether.
That's hardle a practical benefit, and it's really not realistic.
> 3. If you use align=center you have to put it on every element you
> want centered or work with its strange "inheritance" rules. It's
> much easier to target the elements you want with CSS selectors.
This might mean that things are easier to the author, though there can
be a potential cost that visitors pay (if lack of centering is a
problem, and we need to assume it is _some_ kind of a problem, otherwise
we wouldn't be doing centering).
It depends on what you wish to center in which context. Sometimes you
can use a nice selector, e.g. when you want to center all tables. But if
you wish to center this image here and that table there, you would find
yourself writing class attributes and perhaps trying hard to invent
semantically oriented class names, instead of class="center", which
looks pretty silly.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
|
|
Posted by Stefan Ram on May 14, 2008, 12:45 pm
Please log in for more thread options >from the use of simple markup? After all, there is no adequate markup
>for an image and its caption. (All the nice HTML 3 ideas were forgotten
>long ago.)
The closest approximation in HTML to associate an
image (»data«) with a caption (»term«) is a DL element.
<dl><dt>Jacob Smith</dt><dd><img src="jacob.png" /></dd><dl>
|
| Similar Threads | Posted | | CSS for All Elements (Bullets | February 22, 2005, 12:17 pm |
| CSS gap between inline elements | February 7, 2008, 3:03 am |
| Form and nested elements | November 10, 2004, 11:57 am |
| Visibility of form elements | December 3, 2004, 8:01 pm |
| Presentational and Structural Elements | September 22, 2005, 10:56 am |
| form elements which should not be submitted | March 9, 2006, 3:17 pm |
| custom tags and elements | December 5, 2006, 4:57 am |
| Don't print certain elements from a page | February 17, 2007, 3:38 pm |
| Extending HTML Elements | April 19, 2007, 8:46 am |
| How to push elements to the bottom | August 21, 2007, 6:07 am |
|
XML Sitemap