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) m (→Better images) |
||
| Line 4: | Line 4: | ||
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.) | 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 === | === All images removed === | ||
Revision as of 16:52, 26 May 2009
Continued from Frank Ralf/Moodle HTML - aka "Semantic HTML1".
Better images
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>
