Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
Line 114: | Line 114: | ||
[[Image:Course Categories - Lists from scratch 5.png]] | [[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. | 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. | * 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> |
Revision as of 07:11, 19 June 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:
(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: 0px;
padding-left: 1.5em;
}
The silver lining
The only thing that's still missing are the lines between the category entries. Here's where out semantic markup makes things actually a little harder as 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.
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;
}
And for a final comparison, here's the original code again:
Result
- ...