Site Administration
- <a href="#">Security</a>
- <a href="#">Appearance</a>
- <a href="#">Themes</a>
- <a href="admin/settings.php?section=themesettings">Theme settings</a>
- <a href="theme/index.php">Theme Selector</a>
- <a href="admin/settings.php?section=calendar">Calendar</a>
- <a href="#">Themes</a>
- <a href="#">Front Page</a>
Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) |
||
Line 286: | Line 286: | ||
== What's left to do == | == What's left to do == | ||
* finetuning the layout with CSS (margins, padding, line-hight, etc.) | * finetuning the layout with CSS (margins, padding, line-hight, etc.) | ||
* finetuning the marker placement (list-style-position) | * finetuning the marker placement ('''list-style-position''') | ||
* giving the menu a context in CSS by adding ''.block_admin_tree'' | * giving the menu a context in CSS by adding ''.block_admin_tree'' | ||
* cross-browser testing | * cross-browser testing | ||
* adding behavior with JavaScript | * adding behavior with JavaScript |
Revision as of 09:34, 27 May 2009
Continued from Frank Ralf/Moodle HTML - aka "Semantic HTML1".
Better image placement
As a next step we will replace the inline images which serve as markers for the list items. (Note: We will only work with a snippet of the original code for clarity reasons.)
All images removed
Here's the screenshot. The red color indicates that we are viewing the browser's default rendering of a list. Note that this would suffice as a menu but we will put the images back in place in a next step anyhow.
And here's the code.
<html>
<head>
<title>Semantic HTML 2.0</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="styles_002.css" />
<style type="text/css">
</style>
</head>
<body >
Moodle - Semantic HTML 2.0
</body>
</html>
Images reinstated
Now we can put the images back in place, but this time using the CSS property "list-style-image".
- To get each of the different images at the right place we added class attributes to the LI tags with the name of the respective image.
- We set some padding and margins to come closer to the original layout.
The screenshot:
The code:
<html>
<head>
<title>Semantic HTML 2.0</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="styles_002.css" />
<style type="text/css">
</style>
</head>
<body >
Moodle - Semantic HTML 2.0
<a href="#sb-1" class="skip-block">Skip Site Administration</a>
item.gif removed
As item.gif only reproduces the standard "square" marker we can get rid of the image and use the marker instead: list-style-type: square; That not only makes the code leaner but also gives the added advantage of being able to style the marker, for example coloring it red as in the screenshot to show that we indeed don't use item.gif anymore.
Note that we had to set list-style-image: none; as default for LI tags. Otherwise our settings for items would be overridden due to inheritance.
The screenshot:
The code:
<html>
<head>
<title>Semantic HTML 2.0</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="styles_002.css" />
<style type="text/css">
</style>
</head>
<body >
Moodle - Semantic HTML 2.0
<a href="#sb-1" class="skip-block">Skip Site Administration</a>
Site Administration
- <a href="#">Security</a>
- <a href="#">Appearance</a>
- <a href="#">Themes</a>
- <a href="admin/settings.php?section=themesettings">Theme settings</a>
- <a href="theme/index.php">Theme Selector</a>
- <a href="admin/settings.php?section=calendar">Calendar</a>
- <a href="#">Front Page</a>
</body>
</html>
The result
Before:
<a href="#" name="d16">
<img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder">
Security
</a>
After:
<a href="#">Security</a>
What's left to do
- finetuning the layout with CSS (margins, padding, line-hight, etc.)
- finetuning the marker placement (list-style-position)
- giving the menu a context in CSS by adding .block_admin_tree
- cross-browser testing
- adding behavior with JavaScript
<a href="#sb-1" class="skip-block">Skip Site Administration</a>
Site Administration
- <a href="#">Security</a>
- <a href="#">Appearance</a>
- <a href="#">Themes</a>
- <a href="admin/settings.php?section=themesettings">Theme settings</a>
- <a href="theme/index.php">Theme Selector</a>
- <a href="admin/settings.php?section=calendar">Calendar</a>
- <a href="#">Front Page</a>
</body>
</html>