web:kvfgorg
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
web:kvfgorg [2008/08/26 19:55] – d.weller | web:kvfgorg [2008/08/26 20:08] (aktuell) – d.weller | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== KvFG.org Statisches HTML ====== | ||
+ | Link zur Seite: [[https:// | ||
+ | |||
+ | - 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=" | ||
+ | <ul id=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | 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: | ||
+ | p { | ||
+ | font-family: | ||
+ | font-size: 12px; | ||
+ | color: #333300; | ||
+ | } | ||
+ | a { | ||
+ | font-family: | ||
+ | font-size: 12px; | ||
+ | color: #FF3300; | ||
+ | text-decoration: | ||
+ | } | ||
+ | # | ||
+ | { | ||
+ | width: 800px; | ||
+ | height: 120px; | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | } | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | { | ||
+ | text-align: | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | padding: 0 0 0 0; | ||
+ | color: #FFFFFF; | ||
+ | font-family: | ||
+ | font-size: 0.85em; | ||
+ | letter-spacing: | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | # | ||
+ | { | ||
+ | padding: 0.2em 12px; | ||
+ | color: #FFFFFF; | ||
+ | text-decoration: | ||
+ | float: left; | ||
+ | border-right: | ||
+ | height: 100px; | ||
+ | width: 80px; | ||
+ | margin-top: | ||
+ | } | ||
+ | # | ||
+ | { | ||
+ | color: #ff9900; | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | #navlist li a:hover, #navlist li a:active | ||
+ | { | ||
+ | color: #FFFFFF; | ||
+ | text-decoration: | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | text-align: | ||
+ | text-transform: | ||
+ | font: bold normal 10px/16px " | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | Angepasste Vorlage von: http:// | ||
+ | |||
+ | ===== 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 '' | ||
+ | |||
+ | 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; |