KvFG Wiki

Karl-von-Frisch-Gymnasium Dußlingen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: start » web » kvfgorg
Zuletzt angesehen:
web:kvfgorg

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
web:kvfgorg [2008/08/26 20:02] – d.wellerweb:kvfgorg [2008/08/26 20:08] (aktuell) – d.weller
Zeile 1: Zeile 1:
 +====== 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;