CSS grid with last row center aligned

[Imri Goldberg]

Hi all,
In the spirit of Zohar's presentation on the last pywel-IL, I need to implement a css grid.
I already implemented a couple of css grids/galleries in my time, but now I need to implement a grid
with any leftover elements on the last line should be center aligned (and not left or right aligned).

After thinking about it, and discussing with Benny, it seems that I can't implement this in CSS only, and will need to change the html.
Anyone here has a different idea?

Cheers,
Imri

--
Imri Goldberg
--------------------------------------
http://plnnr.com/ - automatic trip planning
http://www.algorithm.co.il/blogs/
--------------------------------------
-- insert signature here ----

[Idan Gazit]

Can you supply an isolated example of the markup?

[Imri Goldberg]

What do you mean?
The markup can be as simple as
<ul> <li /> <li /> <li /> </ul>.
With this, create a grid of 2x2, where the only element on the third row is center aligned.

Like so
<ascii art>
[]  []
  []
</ascii art>

Is this sufficient, or should I write something more concrete?

By the way, thanks for the reply at such an hour :)
Cheers,
Imri

On Sun, Oct 17, 2010 at 12:54 AM, Idan Gazit <id...@pixane.com> wrote:

Can you supply an isolated example of the markup?

--
You received this message because you are subscribed to the Google Groups "PyWeb-IL" group.
To post to this group, send email to pywe...@googlegroups.com.
To unsubscribe from this group, send email to pyweb-il+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/pyweb-il?hl=en.

[Yehonatan Daniv]

But of course, CSS must go along with proper markup formation. That's where proper styling starts.

For a grid it's recommended to use div elements.

you could implement it like:

<div class="row">
    <div class="col_left"></div>
    <div class="col_right"></div>
</div>
<div class="row">
    <div class="col_center"></div>
</div>

and style it with:
.row {width: 960px; text-align:center; margin:0 auto;clear:both;}
.col_center {width: 650px;}
.col_left, .col_right {float:left; width: 48%;}

or you could even do it with just 4 div elements if your a minimalist. where the top row contains it all, and you apply the clear on the col_right div.

hope this helps.

cheers,
~Y

[Yehonatan Daniv]

oh, 1 mistake

.row {width: 960px; text-align:center;               clear:both;}
.col_center {width: 650px;margin:0 auto;}

.col_left, .col_right {float:left; width: 48%;}

~Y

[Zohar Arad]

Or if you want to keep the UL rather than using DIVs, mark any
leftover LIs with class="leftover" and center them.

so markup would be something like:

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="leftover">...</li>
<li class="leftover">...</li>
</ul>

and CSS would then be:

ul {
text-align:center;
}

ul li {
float:left;
width:250px;
height:250px;
text-align:left;
}

ul li.leftover{
float:none;
display:inline-block;

}

On Oct 17, 8:29 am, Yehonatan Daniv <maggotf...@gmail.com> wrote:
> oh, 1 mistake
>
> .row {width: 960px; text-align:center;               clear:both;}
> .col_center {width: 650px;margin:0 auto;}
> .col_left, .col_right {float:left; width: 48%;}
>
> ~Y
>

> On Sun, Oct 17, 2010 at 8:26 AM, Yehonatan Daniv <maggotf...@gmail.com>wrote:
>
>
>
> > But of course, CSS must go along with proper markup formation. That's where
> > proper styling starts.
>
> > For a grid it's recommended to use div elements.
>
> > you could implement it like:
>
> > <div class="row">
> >     <div class="col_left"></div>
> >     <div class="col_right"></div>
> > </div>
> > <div class="row">
> >     <div class="col_center"></div>
> > </div>
>
> > and style it with:
> > .row {width: 960px; text-align:center; margin:0 auto;clear:both;}
> > .col_center {width: 650px;}
> > .col_left, .col_right {float:left; width: 48%;}
>
> > or you could even do it with just 4 div elements if your a minimalist.
> > where the top row contains it all, and you apply the clear on the col_right
> > div.
>
> > hope this helps.
>
> > cheers,
> > ~Y
>

> > On Sun, Oct 17, 2010 at 1:00 AM, Imri Goldberg <lorgan...@gmail.com>wrote:
>
> >> What do you mean?
> >> The markup can be as simple as
> >> <ul> <li /> <li /> <li /> </ul>.
> >> With this, create a grid of 2x2, where the only element on the third row
> >> is center aligned.
>
> >> Like so
> >> <ascii art>
> >> []  []
> >>   []
> >> </ascii art>
>
> >> Is this sufficient, or should I write something more concrete?
>
> >> By the way, thanks for the reply at such an hour :)
> >> Cheers,
> >> Imri
>

> >> On Sun, Oct 17, 2010 at 12:54 AM, Idan Gazit <i...@pixane.com> wrote:
>
> >>> Can you supply an isolated example of the markup?
>
> >>> --
> >>> You received this message because you are subscribed to the Google Groups
> >>> "PyWeb-IL" group.
> >>> To post to this group, send email to pywe...@googlegroups.com.
> >>> To unsubscribe from this group, send email to

> >>> pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscribe@googlegroups.c om>
> >>> .

> >>> For more options, visit this group at
> >>>http://groups.google.com/group/pyweb-il?hl=en.
>
> >> --
> >> Imri Goldberg
> >> --------------------------------------

> >>http://plnnr.com/- automatic trip planning

> >>http://www.algorithm.co.il/blogs/
> >> --------------------------------------
> >> -- insert signature here ----
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "PyWeb-IL" group.
> >> To post to this group, send email to pywe...@googlegroups.com.
> >> To unsubscribe from this group, send email to

> >> pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscribe@googlegroups.c om>
> >> .

[Zohar Arad]

Thinking about it, you can do the above without the extra CSS class
and simply center the entire UL content.
If your UL has a fixed width, everything will appear to be aligned to
the left except for the bottom row.

> > >>> pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscr...@googlegroups.c om>

> > >>> .
> > >>> For more options, visit this group at
> > >>>http://groups.google.com/group/pyweb-il?hl=en.
>
> > >> --
> > >> Imri Goldberg
> > >> --------------------------------------

> > >>http://plnnr.com/-automatic trip planning

> > >>http://www.algorithm.co.il/blogs/
> > >> --------------------------------------
> > >> -- insert signature here ----
>
> > >> --
> > >> You received this message because you are subscribed to the Google Groups
> > >> "PyWeb-IL" group.
> > >> To post to this group, send email to pywe...@googlegroups.com.
> > >> To unsubscribe from this group, send email to

> > >> pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscr...@googlegroups.c om>

[Idan Gazit]

+1, this seems like the most elegant solution.

[Imri Goldberg]

Hi
Your example with the "leftover" class seems to work on an example, and it indeed seems very elegant.
I didn't quite follow you on how to implement the one without the extra class, could you give an example?

To unsubscribe from this group, send email to pyweb-il+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/pyweb-il?hl=en.

--
Imri Goldberg
--------------------------------------
http://plnnr.com/ - automatic trip planning

[Yehonatan Daniv]

Zohar's answer is very  elegant, but, I wouldn't use ULs for grid:

• div containers are less error prone across browsers and easier to implement. once they're filled with content it gets trickier
  
• ul elements are usually used for creating menus, besides actual lists, and therefor it's easier to style them in a general way accordingly. if you use them too sparsely your HTML/CSS will be confusing
• ul and li elements have a specific and defined hierarchy which you must follow, and div elements don't

so in short, KISS.

~Y

On Sun, Oct 17, 2010 at 10:22 AM, Idan Gazit <id...@pixane.com> wrote:

+1, this seems like the most elegant solution.

--
You received this message because you are subscribed to the Google Groups "PyWeb-IL" group.
To post to this group, send email to pywe...@googlegroups.com.

To unsubscribe from this group, send email to pyweb-il+u...@googlegroups.com.

[Zohar Arad]

HTML would be:

<ul id="theList">
<li class="theItem">....</li>
<li class="theItem">....</li>
<li class="theItem">....</li>
<li class="theItem">....</li>
<li class="theItem">....</li>
<li class="theItem">....</li>
<li class="theItem">....</li>
<li class="theItem">....</li>
</ul>

CSS would be:

#theList{
width:900px;
text-align:center;
}
.theItem{
width:300px;
display:inline-block;
}

So, in this example, the UL will fit 3 LIs (3 x 300px) and since its
an exact fit, they won't appear to be centered (although in reality
they are).
Any leftover LIs at the bottom would be centered because the UL has
text-align:center.

Its basically identical to my horizontal centered menu, but with
inline-blocks and a fixed width.

> > > > >>> pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscribe@googlegroups.c om>

> > <pyweb-il%2Bunsubscr...@googlegroups.c om>
> > > > >>> .
> > > > >>> For more options, visit this group at
> > > > >>>http://groups.google.com/group/pyweb-il?hl=en.
>
> > > > >> --
> > > > >> Imri Goldberg
> > > > >> --------------------------------------

> > > > >>http://plnnr.com/-automatictrip planning

> > > > >>http://www.algorithm.co.il/blogs/
> > > > >> --------------------------------------
> > > > >> -- insert signature here ----
>
> > > > >> --
> > > > >> You received this message because you are subscribed to the Google
> > Groups
> > > > >> "PyWeb-IL" group.
> > > > >> To post to this group, send email to pywe...@googlegroups.com.
> > > > >> To unsubscribe from this group, send email to

> > > > >> pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscribe@googlegroups.c om>

> > <pyweb-il%2Bunsubscr...@googlegroups.c om>
> > > > >> .
> > > > >> For more options, visit this group at
> > > > >>http://groups.google.com/group/pyweb-il?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "PyWeb-IL" group.
> > To post to this group, send email to pywe...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > pyweb-il+u...@googlegroups.com<pyweb-il%2Bunsubscribe@googlegroups.c om>

> > .
> > For more options, visit this group at
> >http://groups.google.com/group/pyweb-il?hl=en.
>
> --
> Imri Goldberg

> --------------------------------------http://plnnr.com/- automatic trip planninghttp://www.algorithm.co.il/blogs/

[Imri Goldberg]

Thanks!

To unsubscribe from this group, send email to pyweb-il+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/pyweb-il?hl=en.

--
Imri Goldberg
--------------------------------------
http://plnnr.com/ - automatic trip planning

[Idan Gazit]

Again, zohar beats me to the punch :)

Note that inline-block is necessary to this strategy, and (as usual) IE 6 & 7 don't support it properly.

Offhand, I can't think of any solution with "flat" markup (e.g. no divs inside div.rows) which wouldn't require inline-block.

Unlike Yehonatan, I don't think that using a UL like this is semantically incorrect so long as you're displaying a listing of comparable items.

-I

[Zohar Arad]

If you need IE compatibility you might be able to do a simple margin
trick.

So, lets say I have a row with maximum 3 items at 300px per item.

I could calculate on the server the number of remaining items in the
last row and add an extra class like this:

<ul>
<li class="theItem">...</li>
<li class="theItem">...</li>
<li class="theItem">...</li>
<li class="theItem">...</li>
<li class="theItem">...</li>
<!-- last row -->
<li class="theItem leftover2">...</li>
<li class="theItem">...</li>
</ul>

My IE specific CSS will then simply use floats instead of display
inline-block and add a margin like this:

/** IE Specific **/
.theItem{
float:left;
width:300px;
}

.leftover1{
margin-left:300px;
}

.leftover2{
margin-left:150px;
}

You can of course use any IE selector targeting you see fit. My
favorite is adding conditional comments around the body tag:
<!--[if IE 6 ]>
<body class="ie" id="ie6">
<![endif]-->
<!--[if IE 7 ]>
<body class="ie" id="ie7">
<![endif]-->
<!--[if gte IE 8 ]>
<body class="ie" id="ie8">
<![endif]-->
<!--[if !IE]><!-->
<body>
<!--<![endif]-->

[Yehonatan Daniv]

or, you could use DIVs (:

--
You received this message because you are subscribed to the Google Groups "PyWeb-IL" group.
To post to this group, send email to pywe...@googlegroups.com.

To unsubscribe from this group, send email to pyweb-il+u...@googlegroups.com.

[Amit Aronovitch]

(1) +1 for Zohar's solution
    Contents should be isolated from style - you might wish to have an alternative style with different width of grid etc.
    --> * The div solution is not as elegant.
         * The compatibility issue is still open (the html in Zohar's solution depends on the width ratio, which is defined in the css).

(2) (In FF at least) you must set the width of the UL a little higher than 3x300 (910 works, 905 does not - you get two colums).
    Firebug sees no padding/margin/border on the list items.
    I thought thats a rounding problem, but it remains true even if you specify widths in pixels (bug? feature? what do other browsers do?)

(3) (In FF at least) Whenever the items are other than display:block, the bullets do not show up. Setting up a margin on the list items does not help.
    Is that by design? What if you do want to see them?

(4) Plug: Bidi issue with "display:inline" lists - should be solved in HTML5/CSS3
 
<ul id="theList">
 <li class="theItem">The user משה</li>
 <li class="theItem">2 other users</li>
</ul>

with

.theItem{
   display:inline;
}

Renders as  "The user משה 2 other users". Requires nasty tricks to solve.
This is one of the issues addressed here: http://www.w3.org/International/docs/html-bidi-requirements
See current progress in HTML5's bugzilla: http://www.w3.org/Bugs/Public/show_bug.cgi?id=10815

  Cheers,
      AA