Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) m (→Screenshot) |
||
(30 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
Read the whole story: | Read the whole story: | ||
# Site Admin Block: "Look Ma, (nearly) no DIVs!" [[User:Frank_Ralf/ | # [[User:Frank_Ralf/Moodle_HTML| Site Admin Block: "Look Ma, (nearly) no DIVs!"]] | ||
# [[User:Frank_Ralf/Semantic_HTML2| Site Admin Block: Better image placement]] | |||
# [[User:Frank_Ralf/Semantic_HTML3| Course Categories - The Ugly Duckling]] | |||
# [[User:Frank_Ralf/Semantic_HTML4| Course Categories - Clearing the Tables]] | |||
# [[User:Frank_Ralf/Semantic_HTML5| formslib - Checkboxes: A Case of "Divitis"?]] | |||
Line 19: | Line 19: | ||
==== The code: ==== | ==== The code: ==== | ||
Stripped down to the barest possible, only the relevant part shown. | |||
<code php> | <code php> | ||
Line 43: | Line 43: | ||
[[Image:Course Categories - Lists from scratch 1.png]] | [[Image:Course Categories - Lists from scratch 1.png]] | ||
Discussion | ==== Discussion ==== | ||
* The font sizes got lost because we deleted the class attributes. | * The font sizes got lost because we deleted the class attributes. | ||
* The nested list provides for the indentation. | * The nested list provides for the indentation. | ||
Line 56: | Line 56: | ||
==== Bigger font ==== | ==== Bigger font ==== | ||
At first we get rid of the list marker, increase the font-size of the list items, and make the text bold: | At first we get rid of the list marker, increase the font-size of the list items, and make the text bold with the following CSS: | ||
<code php> | <code php> | ||
li { | li { | ||
font-size: medium; | font-size: medium; | ||
Line 67: | Line 64: | ||
list-style: none; | list-style: none; | ||
} | } | ||
</code> | </code> | ||
Line 116: | Line 110: | ||
==== Final touches ==== | ==== Final touches ==== | ||
With some more CSS and after some trial & error we get this: | With some more CSS and after some trial & error we get this result: | ||
[[Image:Course Categories - Lists from scratch 5.png]] | [[Image:Course Categories - Lists from scratch 5.png]] | ||
And this is the CSS | And this is the CSS. | ||
* Note that we first '''reset all margins and padding''' from the browser and/or other stylesheets so those won't get in our way. | |||
* Also note that we make the '''sub-categories a little smaller''' than the categories and move them a little away from the next categories. | |||
<code php> | <code php> | ||
/* resetting all margins and padding from the browser and other style sheets */ | |||
ul, li { | |||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 149: | Line 146: | ||
ul ul li { | ul ul li { | ||
font-size: x-small; | font-size: x-small; | ||
padding-bottom: | padding-bottom: 0; | ||
padding-left: 1.5em; | padding-left: 1.5em; | ||
} | } | ||
</code> | </code> | ||
==== The silver lining ==== | |||
The only thing that's still missing are the lines between the category entries. Here's where our semantic markup makes things actually a little harder than usual. Because a nested list (the sub-categories) is completely enclosed by the preceding list item we cannot just underline the list items as the following screenshot demonstrates: | |||
[[Image:Course Categories - Lists from scratch 5 colored new.png]] | |||
You see that the red underlining of the first category appears under its sub-category (green underlining) so it looks like it isn't underlined at all. | |||
Here's one possible solution to this problem: Instead of giving the sub-categories a bottom border we give them a '''top border''' which will look like an underlining of their category. Here's only the additional CSS: | |||
<code php> | |||
li { | |||
border-bottom: 1px solid #C6BDA8; | |||
} | |||
/* sub-categories */ | |||
ul ul li { | |||
border-bottom: 0; | |||
border-top: 1px solid #C6BDA8; | |||
} | |||
</code> | |||
That's the way it looks: | |||
[[Image:Course Categories - Lists from scratch 6.png]] | |||
And for a final comparison, here's the original code again: | |||
[[Image:Course Categories - Original Code 2.png]] | |||
=== The result === | |||
More semantic and much leaner and therefore more maintainable code, especially for the sub-categories: | |||
BEFORE: | |||
[[Image:Course Categories-Original HTML.png]] | |||
AFTER: | |||
[[Image:Course Categories-List-HTML.png]] | |||
Best demonstrated by the code for the subcategory: | |||
BEFORE: | |||
<code php> | |||
<table class="categorylist"> | |||
<tbody> | |||
<tr> | |||
<td class="category indentation" valign="top"> | |||
<img class="spacer" src="pix/spacer.gif" alt="" height="10" width="20"> | |||
<br> | |||
</td> | |||
<td class="category name" valign="top"> | |||
<a href="/course/category.php?id=3">Quizzes</a> | |||
</td> | |||
<td class="category number" valign="top">1</td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</code> | |||
AFTER: | |||
<code php> | |||
<ul> | |||
<li><a href="/course/category.php?id=3">Quizzes</a>1</li> | |||
</ul> | |||
</code> | |||
=== Additional benefits === | |||
* We didn't have to change any of the original CSS but only to override some settings. Therefore the theme in general is left untouched. | |||
* We got rid of most of the class attributes. We only applied the "categorylist" class to the outmost UL tag to provide context. |
Revision as of 09:35, 24 July 2009
Read the whole story:
- Frank Ralf/Moodle HTML
- Frank Ralf/Semantic HTML2
- Frank Ralf/Semantic HTML3
- Course Categories - Clearing the Tables
- Frank Ralf/Semantic HTML5
Course Categories - Clearing the Tables
Now we want to get rid of the tables altogether. Just for comparison reason here's the screenshot of the original again:
Lists from scratch
This time we go for the radical approach and create the list structure from scratch, thereby deleting most of the existing classes and ids.
The code:
Stripped down to the barest possible, only the relevant part shown.
Course categories
- <a href="/course/category.php?id=2">Moodle Features</a>2
- <a href="/course/category.php?id=3">Quizzes</a>1
- <a href="/course/category.php?id=1">Miscellaneous</a>4
Screenshot
That's the way it looks (compare this with the original above):
Discussion
- The font sizes got lost because we deleted the class attributes.
- The nested list provides for the indentation.
- There's a superfluous bullet point.
- The underlining is lost.
- The margins differ from the original, especially the left one is too big.
- The numbers which aligned on the right side in the original now sit flush against the category links.
Getting back to normal
Let's try re-creating the look of the original.
Bigger font
At first we get rid of the list marker, increase the font-size of the list items, and make the text bold with the following CSS:
li {
font-size: medium;
font-weight: bold;
list-style: none;
}
That will look like this:
Putting it right
To amend the alignment we add the text-align property to the list items:
li {
font-size: medium;
font-weight: bold;
list-style: none;
text-align: right;
}
That will move all of the text over to the right side:
Something left
With just another rule we can float the links within the list items to the left again:
li {
font-size: medium;
font-weight: bold;
list-style: none;
text-align: right;
}
li a {
float: left;
}
Now we're getting closer:
Final touches
With some more CSS and after some trial & error we get this result:
And this is the CSS.
- Note that we first reset all margins and padding from the browser and/or other stylesheets so those won't get in our way.
- Also note that we make the sub-categories a little smaller than the categories and move them a little away from the next categories.
/* resetting all margins and padding from the browser and other style sheets */
ul, li {
margin: 0;
padding: 0;
}
ul.categorylist {
margin-left: 0.5em;
margin-right: 1em;
width: 100%;
}
li {
font-size: medium;
font-weight: bold;
list-style: none;
padding-bottom: 5px;
text-align: right;
}
li a {
float: left;
}
/* sub-categories */
ul ul li {
font-size: x-small;
padding-bottom: 0;
padding-left: 1.5em;
}
The silver lining
The only thing that's still missing are the lines between the category entries. Here's where our semantic markup makes things actually a little harder than usual. Because a nested list (the sub-categories) is completely enclosed by the preceding list item we cannot just underline the list items as the following screenshot demonstrates:
You see that the red underlining of the first category appears under its sub-category (green underlining) so it looks like it isn't underlined at all.
Here's one possible solution to this problem: Instead of giving the sub-categories a bottom border we give them a top border which will look like an underlining of their category. Here's only the additional CSS:
li {
border-bottom: 1px solid #C6BDA8;
}
/* sub-categories */
ul ul li {
border-bottom: 0;
border-top: 1px solid #C6BDA8;
}
That's the way it looks:
And for a final comparison, here's the original code again:
The result
More semantic and much leaner and therefore more maintainable code, especially for the sub-categories:
BEFORE:
AFTER:
Best demonstrated by the code for the subcategory:
BEFORE:
<tbody>
</tbody>
<img class="spacer" src="pix/spacer.gif" alt="" height="10" width="20">
<a href="/course/category.php?id=3">Quizzes</a>
1
AFTER:
- <a href="/course/category.php?id=3">Quizzes</a>1
Additional benefits
- We didn't have to change any of the original CSS but only to override some settings. Therefore the theme in general is left untouched.
- We got rid of most of the class attributes. We only applied the "categorylist" class to the outmost UL tag to provide context.