What is the HTML5 equivalent to the align attribute in table cells? - css

I'm refactoring an old site, and that maze is full of tables.
We're moving to HTML5 and I need to fix a table full of
<td align="center">
code.
I found a partial solution by creating a class
.centered {
text-align: center;
}
and assigning it to every TD containing text.
But this is not working on images and some other elements.
margin: auto;
won't work either.
What's the fastest way to center ALL content inside a TD?

If they're block level elements they won't be affected by text-align: center;. Someone may have set img { display: block; } and that's throwing it out of whack. You can try:
td { text-align: center; }
td * { display: inline; }
and if it looks as desired you should definitely replace * with the desired elements like:
td img, td foo { display: inline; }

You can use inline css :
<td style = "text-align: center;">

According to the HTML5 CR, which requires continued support to “obsolete” features, too, the align=center attribute is rather tricky. Rendering rules for tables say: td elements with that attribute “are expected to center text within themselves, as if they had their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.”
And aligning descendants is defined as so that a browser will “align only those descendants that have both their 'margin-left' and 'margin-right' properties computing to a value other than 'auto', that are over-constrained and that have one of those two margins with a used value forced to a greater value, and that do not themselves have an applicable align attribute. When multiple elements are to align a particular descendant, the most deeply nested such element is expected to override the others. Aligned elements are expected to be aligned by having the used values of their left and right margins be set accordingly.”
So it really depends on the content.

you can use this code as replacement for table align
table
{
margin:auto;
}

Add this code into your StyleSheet:
margin-top:80px;

Related

Is the "display" property inherited or not?

This might be a silly question, but I don't understand why the display property (per the following link: https://www.w3.org/TR/CSS22/propidx.html) is not listed as inherited.
Yes, <strong>strong</strong> will stay inline (and will not turn into block) if we put it inside <p>sentence</p>, but what about display: none? It seems that display: none is a special case and in such a case the value is inherited? And so when we talk about the display property we should say that it is not inherited except when its value is none, right?
Also, are there other such properties and values? I mean the ones that are inherited in most cases, but not in all cases.
Example 1:
<style>
p { display: block; }
strong { display: inline; }
</style>
<!-- `aaa` will stay inline -->
<p>foo <strong>aaa</strong> bar</p>
Example 2:
<style>
p { display: none; }
strong { display: inline; }
</style>
<!-- `aaa` will disappear, so I think it has inherited `display: none`
from its parent. -->
<p>foo <strong>aaa</strong> bar</p>
It's because of the way display:none is defined.
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either
The child elements aren't inheriting display:none from the parent element.
If they were, a child element with display:block !important would cause a contradiction. The parent element would not be displayed, but the child element (inside the parent) would be, so the child should both be displayed and not displayed at the same time.

Formatting Cell Data

I am writing a fairly (should be) simple HTML5 site that is a HTML5 table of the Periodic Table of elements. I am trying to format the data of each cell (each element) to show the abbreviation of the element, the atomic number and the atomic weight. I wrote a few CSS classes to format these cells in the table but it renders each piece of information on a new line in the cell. How can I get the data all on the same line so it fits the site of the cell?
These are the CSS classes:
/* class for element abbreviation */
h2
{
text-align:center;
font-size:12px;
}
h6.anum
{
text-align:left;
vertical-align:top;
font-size:8px;
}
h6.aweight
{
text-align:right;
vertical-align:top;
font-size:8px;
}
And this is the relevant entry in the HTML5 code:
<td><h6 class="anum">1</h6><h2>H</h2><h6 class="aweight">1.01<h6></td>
This displays more or less like this in the cell:
1
H
1.01
I would like text to be on the same line with the 1 and 1.01 in the left and right corner respectively.
I will admit this is probably done incredibly poorly from a design standpoint but this is my first HTML class so... I'm still learning.
h1 - h6 in HTML are block elements, meaning they usually stretch out to fill their container and have a blank line on either side of them. If you want them to sit next to each other, perhaps on the same line, you will need to set display: inline on them to coerce them to regular inline elements. You may also need to adjust the margin to make them sit more closely to one another.
Example CSS:
h1 {
display: inline;
margin: 0.25em auto;
/* More styles */
}
However, this isn't necessarily the way I would do it. Personally, I would put these in a div with position: relative and then absolutely position the h6 elements the way I want them. See example Fiddle

Two identical divs except for spacing & indentation-- why do they display differently?

I'm trying to use text-align:justify to space divs equally in another div. For some reason it works if the html is indented but not otherwise. Unfortunately the application I'm working on often makes all the html run together in a big string so I need to figure out how.
Here is a link to a code pen with both problems:
http://www.codepen.io/evanhobbs/pen/LDgJc
And here is the code:
1- Identical to number 2 but with the all the spacing/indentation
<div class="equal-justify-wrapper">
<div>one</div>
<div>two</div>
<div>three</div>
<span class="equal-justify-stretcher"></span>
</div>
2-. Identical to number 1 but with the all the spacing/indentation removed
<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>
CSS
.equal-justify-wrapper {
list-style: none;
background-color:red;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.equal-justify-wrapper > div {
width: auto;
//height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background: #000;
color: yellow;
}
.equal-justify-stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
That is because when there is no whitespace between them they are considered a single word.(imagine a long word where you had inserted tags to colorize some letters. you would not want to have the word split there.)
In the first case the whitespace (enter/tab) acts as a word boundary.
You need to introduce some white space between the tags for properties like text-align: justify; on the parent to take effect.
It sounds like this is correct behaviour. See Alignment: the 'text-align' property and Inline formatting contexts:
In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value.
If [the text-align] property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.
No white space, no justify.
The browser could use letter spacing to justify the single word in the second example. This would still result in a different displayed text for both cases though.
The problem is with the framework you are using, because it removes whitespace too eagerly. To solve this you should find a way to keep the whitespace. You could try using the unicode html entity of the space character:

How to align JSF components to center

In my JSF 2 - Primefaces 3 web application, I am using <p:panelGrid> and <p:panel>. I have multiple components inside them which are left justified. I need to all to be center align. How can we do this I tried to use div but it does not work.
Look at the generated HTML output and alter CSS accordingly.
If the HTML element which you'd like to center is a block element (<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto; on the element itself.
If the HTML element which you'd like to center is an inline element (<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center; on its parent block element.
If you want to set the content of a primefaces:panelGrid to center you can try this:
<h:panelGrid column="1">
<h:panelGroup style="display:block; text-align:center">
your contents...
</h:panelGroup>
</h:panelGrid>
We are using RichFaces, but the solution that we used in this case may apply to Primefaces as well. We used to style the inner elements with css.
Once you render the page in the browser, you can look up the source code and find out what HTML elements are rendered. Then create specific CSS classes and style the whole panel or the inner elements in panelGrid to that class.
Most of the time, this was the easiest solution and also sufficient.
Try with css and p:panelGrid columnClasses attribute:
<p:panelGrid columnClasses="centered">
...
</p:panelGrid>
then in your stylesheet create a class like:
.centered {
text-align: center;
}
If you have components in your p:panelGrid column other than just text, add the margin attribute to your css class:
.centered {
text-align: center;
margin-left: 50%;
}

matching container element width with that of child

I want to have a setup like this:
<div id="block">
<div class="btn">2</div>
<div class="btn">1235e</div>
<div class="btn">really long one</div>
</div>
jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/
Where the btns and block div get their width based on the content. Just like it appears in the fiddle, except that the width of the btns are based on their text rather than their container
I cannot use a table because I need to be able to apply styling to get vastly different appearance, so I need the html markup to stay basically the same. If it's absolutely necessary I could apply some js.
I tried a couple different ways of displaying, but not sure how to acheive this. I don't wish to hard-code any widths as the content will be changing, and I need it to work in older versions of IE (though I can use libraries like IE9.js).
Here's an example of how the #block will be sized to be as wide as its longest button:
#block {
float: left;
}
.btn {
float: left;
clear: both;
}
The floated elements will expand only to their content's width. It's assuming you want each button on its own line.
If you want the buttons to flow together, remove the clear:both from the .btn rule. However if you do want them all on one line you'll have to be aware of float drop. This will happen if the widths of all your buttons added together is greater than the available width. In this case, the rightmost button will drop down below the other buttons.
Update: based on OP's comment, here's the CSS for a table cell style where #block and all .btn elements expand to the widest button's width:
#block {
display: inline-block;
}
.btn {
display: block;
}
Along with an example.
Where the btns and block div get their width based on the content.
I'm not 100% sure whether I get you right, but using display:inline elements like spans instead of <div>s should solve your problem.
make them float or inline, that way they won't act like blocks (wont be 100% width).

Resources