So the new threads page is going to be all HTML5 goodness, and one of the requirements is that it should look good on a small screen as it does on a big screen.
This means that the tables for layout have to go. They just do not work as on the small screen it forces scrolling of the window, and really the content should have flowed to fit the screen.
So here's what it's going to look like in ASCII art:
[CODE]
Thread Meta StartedBy LastPost
+=============================+===========+===========+===========+
| | Views | Started | LastPost |
Thread Title +===========+===========+===========+
| | Forum | Author | Author |
+=============================+===========+===========+===========+
+=============================+===========+===========+===========+
| | Views | Started | LastPost |
Thread Title +===========+===========+===========+
| | Forum | Author | Author |
+=============================+===========+===========+===========+
[/CODE]
And when viewed on a mobile this should happen.
[CODE]
Thread
+=============================+
Thread Title +
+=============================+
| Views | Forum |
+=============+===============+
| Started | Author | <-- This row will be "display:none" for mobile
+=============+===============+
| LastPost | Author |
+=============+===============+
[/CODE]
The challenge is:
How do I lay out the first one using
,
, and any CSS, but no tables?
(note the double height thread title line)
How can I then adjust only CSS to achieve the second layout?
All text will be class="small" except for the thread title which just inherits.
Answers in the thread, use the [ CODE ] bbcode to post ASCII.
So the new threads page is going to be all HTML5 goodness, and one of the requirements is that it should look good on a small screen as it does on a big screen.
This means that the tables for layout have to go. They just do not work as on the small screen it forces scrolling of the window, and really the content should have flowed to fit the screen.
So here's what it's going to look like in ASCII art:
[CODE]
Thread Meta StartedBy LastPost
+=============================+===========+===========+===========+
| | Views | Started | LastPost |
| | Forum | Author | Author |
+=============================+===========+===========+===========+
+=============================+===========+===========+===========+
| | Views | Started | LastPost |
| | Forum | Author | Author |
+=============================+===========+===========+===========+
[/CODE]
And when viewed on a mobile this should happen.
[CODE]
Thread
+=============================+
+=============================+
| Views | Forum |
+=============+===============+
| Started | Author | <-- This row will be "display:none" for mobile
+=============+===============+
| LastPost | Author |
+=============+===============+
[/CODE]
The challenge is:
How do I lay out the first one using
(note the double height thread title line)
How can I then adjust only CSS to achieve the second layout?
All text will be class="small" except for the thread title which just inherits.
Answers in the thread, use the [ CODE ] bbcode to post ASCII.