====== KvFG.org Statisches HTML ======

Link zur Seite: [[https://www.kvfg.org| kvfg.org]]

  - IE interpretiert <div> Container falsch und zentriert diesen nicht;
  - IE kann kein PNG anzeigen bzw. zeigt keine Transparenzen in PNGs an;

===== Code =====

Zuerst der Abschnitt HTML:

<code 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>

</code>

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:

<code css>

/* 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;
}

</code>

Angepasste Vorlage von: http://css.maxdesign.com.au/index.htm

===== Problemlösung =====

Die Beispieldateien oben enthalten schon die Problemlösung:

  - Ersetzen der PNG durch JPG (dafür geht dann einiges am Aussehen über die Wupper);
  - Den jeweils übergeordneten <div> Container (im Bsp Oben ist das dann gleich mit ''body'' gemacht worden) mit ''text-align: center'' zentrieren

Sollte die restliche Seite nicht zentriert sein, dann kann 

  * entweder statt des body auch ein anderer übergeordneter div Container mit text-align: center; zentriert werden;
  * oder die restliche Seite in einen weiteren div Container z.B. mit dem Namen main eingeschlossen werden, der dann dem Text mit text-align: left; oder text-align: justify; wieder die richtige (Aus)Richtung verpasst;