Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

User:Frank Ralf/Semantic HTML4: Difference between revisions

From MoodleDocs
(38 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/Moodle_HTML]]
# [[User:Frank_Ralf/Moodle_HTML| Site Admin Block: "Look Ma, (nearly) no DIVs!"]]
# Site Admin Block: Better image placement [[User:Frank_Ralf/Semantic_HTML2]]
# [[User:Frank_Ralf/Semantic_HTML2| Site Admin Block: Better image placement]]
# Course Categories - The Ugly Duckling [[User:Frank_Ralf/Semantic_HTML3]]
# [[User:Frank_Ralf/Semantic_HTML3| Course Categories - The Ugly Duckling]]
# Course Categories - Clearing the Tables [[User:Frank Ralf/Semantic HTML4]]
# [[User:Frank_Ralf/Semantic_HTML4| Course Categories - Clearing the Tables]]
# [[User:Frank_Ralf/Semantic_HTML5| formslib - Checkboxes: A Case of "Divitis"?]]




== Course Categories - Clearing the Tables ==


== 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:
 
Just for comparison reasons the original again:


[[Image:Course Categories-Original Code new.png]]
[[Image:Course Categories-Original Code new.png]]
Line 19: Line 19:


==== The code: ====
==== The code: ====
(Only the relevant part shown.)
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 it 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>
<style type="text/css">
<!--
li {
li {
  font-size: medium;
  font-size: medium;
Line 67: Line 64:
  list-style: none;
  list-style: none;
}
}
-->
</style>
</code>
</code>


Line 95: Line 89:
==== Something left ====
==== Something left ====


With just another rule we can ''float'' the links within the list items to the left:
With just another rule we can ''float'' the links within the list items to the left again:


<code php>
<code php>
Line 113: Line 107:


[[Image:Course Categories - Lists from scratch 4.png]]
[[Image:Course Categories - Lists from scratch 4.png]]
==== Final touches ====
With some more CSS and after some trial & error we get this result:
[[Image:Course Categories - Lists from scratch 5.png]]
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>
/* 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;
}
</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:

  1. Frank Ralf/Moodle HTML
  2. Frank Ralf/Semantic HTML2
  3. Frank Ralf/Semantic HTML3
  4. Course Categories - Clearing the Tables
  5. 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:

Course Categories-Original Code new.png


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):

Course Categories - Lists from scratch 1.png

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:

Course Categories - Lists from scratch 2.png

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:

Course Categories - Lists from scratch 3.png

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:

Course Categories - Lists from scratch 4.png

Final touches

With some more CSS and after some trial & error we get this result:

Course Categories - Lists from scratch 5.png

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:

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:

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:

Course Categories - Lists from scratch 6.png

And for a final comparison, here's the original code again:

Course Categories - Original Code 2.png

The result

More semantic and much leaner and therefore more maintainable code, especially for the sub-categories:

BEFORE:

Course Categories-Original HTML.png

AFTER:

Course Categories-List-HTML.png

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.