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...@gmail.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...@codesmiths.com> wrote:
> On 4 Mar, 12:18, shapper <mdmo...@gmail.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...@gmail.com> wrote:
> On Mar 4, 2:00 pm, Andy Dingley <ding...@codesmiths.com> wrote:
>
>
>
> > On 4 Mar, 12:18, shapper <mdmo...@gmail.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...@gmail.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.

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

On Mar 4, 4:48 pm, "Beauregard T. Shagnasty"
<a.nony.m...@example.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...@codesmiths.com> wrote:
> On 4 Mar, 14:39, shapper <mdmo...@gmail.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