Horizontal Aligned List. Centered.

Hello,

I am trying to create an horizontal list inside a table footer.
The list should expand to contain all its items. I don't want a list
item to go to a "second row".

I have the following:
..Grid tfoot th
{
border: none;
text-align: center;
}
..Grid tfoot th ul.Pager
{
list-style: none;
overflow: auto;
}
..Grid tfoot th ul.Pager li
{
float: left;
}

The list is horizontally displayed (not sure if I am using the most
correct CSS) but I am not sure how to centered.

The first approach was to give the list a width and then make text-
align center in Table tfoot th.
However, this did not centered the list and I am not sure, since I am
using a width, that some list items will not go to a "second" row.

Could someone advice me on this?

Thank You,
Miguel

On 4 Mar, 12:18, shapper <mdmo... (AT) gmail (DOT) com> wrote:

I am trying to create an horizontal list [...]
The list should expand to contain all its items. I don't want a list
item to go to a "second row".

If "Preserve 1 × N grid layout above all else, including line-
wrapping" is the most important characteristic, then use a <table>.
This is the HTML element for implying this sort of grid-like
behaviour.

However I doubt that you _must_ avoid line-wrapping the list. In most
case it should be adequate to use float on the <li> element (as you
did), to give their container an adequate width, and to let the
browser deal with the rest. It will wrap eventually, but only when
it's a very long list in a very small container, at which point a grid-
like layout would have been forced to scroll or truncate anyway. Make
sure you use colspan on the <th> that contains the list and don't use
excessive margins or padding.

On Mar 4, 2:00 pm, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:

On 4 Mar, 12:18, shapper <mdmo... (AT) gmail (DOT) com> wrote:

I am trying to create an horizontal list [...]
The list should expand to contain all its items. I don't want a list
item to go to a "second row".

If "Preserve 1 × N grid layout above all else, including line-
wrapping" is the most important characteristic, then use a <table>.
This is the HTML element for implying this sort of grid-like
behaviour.

However I doubt that you _must_ avoid line-wrapping the list. In most
case it should be adequate to use float on the <li> element (as you
did), to give their container an adequate width, and to let the
browser deal with the rest. It will wrap eventually, but only when
it's a very long list in a very small container, at which point a grid-
like layout would have been forced to scroll or truncate anyway. Make
sure you use colspan on the <th> that contains the list and don't use
excessive margins or padding.

Hello,

My pager HTML code is as follows:

<ul class="Pager">
<li><a href="...">&lt;&lt;</a></li>
<li><a href="...">&lt;</a></li>
<li><a href="...">1</a></li>
<li><a href="...">2</a></li>
</ul>

And I am using the following CSS:

ul.Pager
{
display: table;
list-style: none;
margin: 0px auto;
padding: 0px;
text-align: center;
width: auto;
}
ul.Pager li
{
display: table-cell;
list-style: none;
padding-right: 5px;
}
ul.Pager li a
{
background: url(../Images/PagerButton_Background.jpg) repeat-x;
border: 1px solid #D4D4D4;
color: #A0A0A0;
cursor: pointer;
display: block;
font: bold 70% helvetica, sans-serif, verdana, arial;
outline: none;
padding: 4px 0px 4px 0px;
text-decoration: none;
width: 1.8em;
}

It looks fine. Not sure if it is the best way but it is working.

Thanks,
Miguel

On Mar 4, 2:39 pm, shapper <mdmo... (AT) gmail (DOT) com> wrote:

On Mar 4, 2:00 pm, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:



On 4 Mar, 12:18, shapper <mdmo... (AT) gmail (DOT) com> wrote:

I am trying to create an horizontal list [...]
The list should expand to contain all its items. I don't want a list
item to go to a "second row".

If "Preserve 1 × N grid layout above all else, including line-
wrapping" is the most important characteristic, then use a <table>.
This is the HTML element for implying this sort of grid-like
behaviour.

However I doubt that you _must_ avoid line-wrapping the list. In most
case it should be adequate to use float on the <li> element (as you
did), to give their container an adequate width, and to let the
browser deal with the rest. It will wrap eventually, but only when
it's a very long list in a very small container, at which point a grid-
like layout would have been forced to scroll or truncate anyway. Make
sure you use colspan on the <th> that contains the list and don't use
excessive margins or padding.

Hello,

My pager HTML code is as follows:

ul class="Pager"
li><a href="...">&lt;&lt;</a></li
li><a href="...">&lt;</a></li
li><a href="...">1</a></li
li><a href="...">2</a></li
/ul

And I am using the following CSS:

ul.Pager
{
display: table;
list-style: none;
margin: 0px auto;
padding: 0px;
text-align: center;
width: auto;}

ul.Pager li
{
display: table-cell;
list-style: none;
padding-right: 5px;}

ul.Pager li a
{
background: url(../Images/PagerButton_Background.jpg) repeat-x;
border: 1px solid #D4D4D4;
color: #A0A0A0;
cursor: pointer;
display: block;
font: bold 70% helvetica, sans-serif, verdana, arial;
outline: none;
padding: 4px 0px 4px 0px;
text-decoration: none;
width: 1.8em;

}

It looks fine. Not sure if it is the best way but it is working.

Thanks,
Miguel

Just updated the li a padding to:
padding: 0.3em 0 0.3em 0;

Now it is better when resizing the browser text.

Any suggestion to improve my code is welcome.

Thank You,
Miguel

On 4 Mar, 14:39, shapper <mdmo... (AT) gmail (DOT) com> wrote:

ul.Pager li {
display: table-cell;

It looks fine. Not sure if it is the best way but it is working.

Not something I'd recommend. Support for the CSS display:table-*
property values on non-<table> HTML elements isn't that good.

On Mar 4, 4:48 pm, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

shapper wrote:
shapper wrote:
ul.Pager li a
{ <snip
font: bold 70% helvetica, sans-serif, verdana, arial;
...

It looks fine. Not sure if it is the best way but it is working.

Now it is better when resizing the browser text.

I hope, because 70% is flyspeck size and likely unreadable.

Any suggestion to improve my code is welcome.

font: 100% Helvetica, Arial, sans-serif;

The generic fallback belongs on the end.

See: http://k75s.home.att.net/fontsize.html

--
-bts
-Friends don't let friends drive Vista

Hi Beauregard,

Thanks for the tip. I always had sans-serif in the end but never knew
why.

Thanks,
Miguel

On Mar 4, 3:58 pm, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:

On 4 Mar, 14:39, shapper <mdmo... (AT) gmail (DOT) com> wrote:

ul.Pager li {
display: table-cell;
It looks fine. Not sure if it is the best way but it is working.

Not something I'd recommend. Support for the CSS display:table-*
property values on non-<table> HTML elements isn't that good.

Hi Andy,

This was the only way I could find to make this work without using a
table.
The pager can have 1 to 10 numbers ...
.... for me it seems better to have a list inside a table footer then
other table inside the table footer ...
I don't like tables so much ... I use it only for tabular data.

The other options would be just using span tags ... but, again, a list
seemed better to me.

I will try to find another option ...

Thanks,
Miguel

On 4 Mar, 17:46, shapper <mdmo... (AT) gmail (DOT) com> wrote:

This was the only way I could find to make this work without using a
table.

So use a table.

I don't like tables so much ... I use it only for tabular data.

Why not? What's _wrong_ with <table>? <table> is the way in which
HTML expresses the presentational requirement to display in a grid-
like manner, which is just what you want here.