Link zur Seite: kvfg.org
Zuerst der Abschnitt HTML:
<div id="navcontainer"> <ul id="navlist"> <li><a href="https://www.kvfg.org/moodle">moodle</a></li> <li><a href="https://serverg.kvfg.tue.schule-bw.de/mrbs"> mrbs </a></li> <li><a href="https://serverg.kvfg.tue.schule-bw.de/horde3">horde</a></li> <li><a href="https://mail.lehrerpost.de/"> eMail </a></li> <li><a href="https://www.kvfg.org/egw"> eGW </a></li> </ul> </div>
Die Leerzeichen um die Links müssen leider sein, damit der IE die Felder einigermaßen gleichmäßig verteilt.
Und der hierzu passende CSS Schnipsel. Damit der Effekt funktioniert müssen noch die entsprechenden Hintergrundbilder vorhanden sein:
/* Der Eintrag für body als übergeordnetem div Container ist nötig, um dem IE das Zentrieren beizubringen */ body { text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333300; } a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FF3300; text-decoration: underline; } #navcontainer { width: 800px; height: 120px; margin-left: auto; margin-right: auto; background-image: url(logo_kvfgorg_css.jpg); background-repeat: no-repeat; } #navcontainer ul { padding: 0; } #navcontainer ul li { display: inline; } #navcontainer ul { text-align: center; margin-left: 27px; margin-right: auto; padding: 0 0 0 0; color: #FFFFFF; font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif; font-size: 0.85em; letter-spacing: 2px; font-weight: bold; } #navcontainer ul li a { padding: 0.2em 12px; color: #FFFFFF; text-decoration: none; float: left; border-right: 1px solid #94B473; height: 100px; width: 80px; margin-top: 10px; } #navcontainer ul li a:hover { color: #ff9900; font-size: 1.2em; } #navlist li a:hover, #navlist li a:active { color: #FFFFFF; text-decoration: none; background-image: url(pfeil.jpg); background-repeat: no-repeat; text-align: center; text-transform: capitalize; font: bold normal 10px/16px "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif; }
Angepasste Vorlage von: http://css.maxdesign.com.au/index.htm
Die Beispieldateien oben enthalten schon die Problemlösung:
body
gemacht worden) mit text-align: center
zentrierenSollte die restliche Seite nicht zentriert sein, dann kann