Franziska: Probleme mit neuem Banner/Navigationsleiste

ey there,

ich bastle gerade einen neuen Banner für meine Website.

Der Quelltext sieht folgendermassen aus:

<html>
<head>
<title>Kelly Bishop. An unofficial Website.</title>
<style type="text/css">
 h1 {font-size:13pt; font-weight:bold; padding-left:15px;}
 h2 {font-size:11pt; font-weight:bold; padding-left:50px;}
 h3 {font-size:8pt; font-weight:bold; padding-left:50px;}
 p {padding-right:15px; padding-left:50px;}
 body {background-color:#7F7F7F; margin:0px;}
 a:link {color:#000000;}
 a:visited {color:#000000;}
 a:focus {color:#000000;}
 a:hover {color:#000000;}
 a:active {color:#000000;}
</style>
</head>
<body>
<div align="center">
<div style="background-color:#FFFFFF; color:#000000; font-family:verdana; font-size:11pt; width:800px; margin-top:50px; text-align:left; text-align:justify; padding-bottom:15px;">
<img src="../Pictures/kbb.jpg" alt="kellybishop.de.vu">
<div style="position:relative; top:-22px; left:346px; width:537px;">
<map name="Navigation">
<area shape="rect" coords="8,1,80,19" href="../neu.html" alt="life">
<area shape="rect" coords="82,1,126,19" href="../life.html" alt="life">
<area shape="rect" coords="128,1,190,19" href="../work.html" alt="work">
<area shape="rect" coords="192,1,270,19" href="../media.html" alt="media">
<area shape="rect" coords="272,1,342,19" href="http://www.kbnetwork.de.vu/" target="http://www.kbnetwork.de.vu/" alt="forum">
<area shape="rect" coords="344,1,400,19" href="../links.html" alt="links">
<area shape="rect" coords="402,1,450,19" href="../site.html" alt="site">
</map>
<img src="../Pictures/navi.gif" alt="Navigation" usemap="#Navigation" style="border:none;">
</div>
<h1>News &amp; Updates</h1>
<h2>11.09.2007</h2>
<p>Test
</p>
<p style="text-align:center">
<a href="../updatesarchive.html">Archive</a>
</p>
</div>
</div>
</body>
</html>

Und während mit Mozilla auch alles so aussieht wie es soll, ist die Navigationsleiste beim Öffnen der Seite mit Internetexplorer verschoben.

Hat eventuell jemand eine Ahnung woran das liegen könnte?

Hier noch der Link zu der Testseite:

http://flyingmaniac.compi-01.de/neu.html

  1. Liebe Franziska,

    ey there,

    whassup?

    ich bastle gerade einen neuen Banner für meine Website.

    ey, boah ey!

    Der Quelltext sieht folgendermassen aus:

    Nö, sieht er nicht. Laut http://flyingmaniac.compi-01.de/neu.html hat der Quelltext nämlich einiges mehr zu bieten. Ich zeige hier einmal die Highlights:

    <html>  
    <head>  
    [...]  
    </head>  
    <body>  
    <body>[Is das nich cool? Doppelt genäht hält viiiel besser...]  
    <div align="center">  
    <div style="background-color:#FFFFFF; [...] padding-bottom:15px;">  
    [Warum CSS? es geht doch auch inline oder mit altmodischen Attributen...]  
    <img src="../Pictures/bannernew.jpg" alt="kellybishop.de.vu">  
    [In welchem Kontext steht dieses Bild? Das sollte als CSS-Hintergrundbild eingebunden werden!]  
    <div style="position:relative; top:-22px; left:270px; width:537px;">  
    <img src="../Pictures/navigation.gif" alt="Navigation" usemap="#Navigation" style="border:none;">  
    [Dieses Bild braucht einen echten Kontext! Nicht nur so ein div...]  
    </div>  
    [Jetzt kommt eine erste Überschrift in diesem Dokument:]  
    <h2><a href="/index.html">Home</a></h2>  
    [Huch! Wenn das eine _Unter_überschrift ist, wo ist dann die _Haupt_überschrift dazu? Unlogische Dokumentstruktur!]  
    <h2>Credits</h2>  
    [Oha! Gleich die nächste Unterüberschrift auf gleichem Level. Wo war denn der Inhalt zur vorigen Unterüberschrift?]  
    <p>[...]</p>  
    <h2>Disclaimer</h2>  
    <p>[...]</p>  
    <h2>Contact Kelly</h2>  
    <p>[...]</p>  
    <h2><a href="../guestbook.html">Guestbook</a></h2>[Das gehört doch eigentlich in eine Navigation, oder?]  
    <h2><a href="mailto:emilynismus@gmx.net?subject=Kelly Bishop.de.vu">Contact Webmaster</h2>[Das hier ebenfalls!]  
    </div>  
    </div>  
    </body>  
    </html>
    

    Hat eventuell jemand eine Ahnung woran das liegen könnte?

    Ich hab mich jetzt ausführlich über Schwächen Deines HTML-Quelltextes ausgelassen. Das war nicht, um Dir zu zeigen, wie gut (oder weniger gut) Deine HTML-Künste sind, sondern um Dir zu zeigen, was Du verbessern solltest, _bevor_ Du daran gehst, die Darstellungsunterschiede im IE zu kurieren.

    Warum? Deshalb: Wenn Du alles Darstellungstechnische in eine externe CSS-Datei auslagerst, dann kannst Du für den IE (bzw. explizit für seine verschiedenen Versionen) gesonderte CSS-Dateien einbinden, die eben diese Darstellungsfehler kurieren. Ich mache das auch so. Zusätzlich musst Du nicht in jeder Seite identischen CSS-Code wiederholen, sondern kannst das <style>-Element dann für seiten-spezifische Extras benutzen, die auf jeder Seite eben anders sind.

    Also: Nimm Deine <div>s und verleihe ihnen IDs und schmeiß den ganzen inline-Styles-Kram wieder raus. Nutze die IDs in Deinem CSS-Code, um die divs zu gestalten. Verwende Dein neues Banner als Hintergrundbild (sollte im IE dann sofort besser werden) und überlege Dir nocheinmal sehr genau, wie Du <h1>, <h2> und dergleichen einsetzt. Deine Navigation solltest Du generell technisch nocheinmal überarbeiten.

    Ansonsten gefällt mir die Optik Deiner Seite sehr!

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Der Quelltext der Startseite sieht schon so aus ;) E-Mail und Gästebuch etc. gehören meiner Meinung nach nicht in die Navi, aber das ist Ansichts- und Geschmackssache. Da "Home" nur ein Link ist, folgt logischerweise kein Inhalt. "Home" ist nur ein Link, da ich, wie dir sicherlich aufgefallen ist, da du auch das alte Design gesehen hast, es beim alten Design versäumt habe den Link in die Navigation einzubauen und der User daher keine Möglichkeit hatte zum Ausganspunkt zurückzugehen.
      Doppeltgemoppelt - ja, da es zwei verschiedene div's sind, muss das so sein, sonst würde es nicht funktionieren.

      Jedenfalls, danke für deine Hilfe. Dass der Quelltext nicht optimal ist, weiß ich selber, aber bislang hat es wunderbar funktioniert und für meine Zwecke gereicht. Ich kenne mich mit dem ganzen HTML/CSS nicht wirklich aus, weshalb ich bei einem Großteil deiner Antwort leider nur Bahnhof verstehe. Für einfach formulierte Vorschläge zur Änderung wäre ich allerdings dankbar.