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 39: | Line 39: | ||
<ul class="admintree"> | <ul class="admintree"> | ||
<!-- snippet --> | <!-- snippet --> | ||
<li | <li><a href="#">Security</a></li> | ||
<li | <li><a href="#">Appearance</a> | ||
<ul> | <ul> | ||
<li | <li><a href="#">Themes</a> | ||
<ul> | <ul> | ||
<li | <li><a href="admin/settings.php?section=themesettings">Theme settings</a></li> | ||
<li | <li><a href="theme/index.php">Theme Selector</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li | <li><a href="admin/settings.php?section=calendar">Calendar</a></li> | ||
</ul> | </ul> | ||
</li> | </li> |
Revision as of 16:55, 26 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 a 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>
<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>