De website van Operatie Jong is gemaakt in opdracht van een aantal overheden. Wat een pluim verdient is dat er gekozen is voor het Open Source CMS Mambo Joomla!. Een van de eisen was dat de website moet werken in alle gangbare web browsers. Een hele opgave.
Het is me niet gelukt om de code van Joomla volledig te standaardiseren. Een punt wil ik uitlichten. Joomla gebruikt een listing om de gebruiker een keuze te maken tussen een verticaal of horizontaal menu. Klant heeft gekozen voor een horizontaal menu. Onderstaand vind je de code om een listing horizontaal te krijgen en een overzicht van de browsers waarop de code is getest.
De XHTML code is als volgt:
- <div id=”user3container“>
- <ul id=”mainlevel-nav“>
- <li><a href=”#” class=”mainlevel-nav“>Contact</a></li>
- <li><a href=”#” class=”mainlevel-nav“>Downloads</a></li>
- <li><a href=”#” class=”mainlevel-nav“>Wegwijzer</a></li>
- <li><a href=”#” class=”mainlevel-nav“>Leeswijzer</a></li>
- <li><a href=”#” class=”mainlevel-nav“>Zoeken</a></li>
- <li><a href=”#” class=”mainlevel-nav“>Reageer</a></li>
- </ul>
- </div>
De CSS code die ik heb gebruikt in de stylesheet:
- #user3container {
- padding-left: 30px;
- height: 20px;
- background-color: #000033;
- }
- #user3container img {
- display: inline;
- border: 0;
- }
- .mainlevel {
- width: 100%;
- display: block;
- height: 20px;
- }
- ul#mainlevel-nav {
- padding: 0;
- padding-top: 3px;
- margin: 0;
- list-style: none;
- font-family: verdana, “Bitstream Vera Sans”, geneva, arial;
- font-size: 11px;
- color: #fff;
- text-transform: lowercase;
- }
- ul#mainlevel-nav li {
- float: left;
- margin: 0;
- padding: 0;
- background-image: none;
- line-height: normal;
- text-indent: 0;
- }
- ul#mainlevel-nav li a {
- padding-left: 10px;
- padding-right: 10px;
- text-decoration: none;
- color: #fff;
- }
- * html ul#mainlevel-nav li a {
- width: 1%;
- }
Code kan natuurlijk geperfectioneerd worden. Dus aanvullingen/verbeteringen ontvang ik graag. Code is getest in de volgende browsers:
- Firefox Mac/win
- Internet Explorer 5.2 Mac
- Internet Explorer 6 Win
- Safari
- Omniweb Mac
- Netscape 7 Mac/win
- Opera 7 Mac
- Camino Mac
Voorbeeld van de werkende code: Operatie Jong.
Voeg bericht toe aan: 
