• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Falsche Darstellung im IE

B

Broker

Neues Mitglied
Hallo zusammen,

vorausschicken möchte ich, dass ich ein absoluter Neuling im Zusammenhang von HTML und CSS bin.

Für unsere Ortsgemeinde habe ich mit Hilfe von HTML und CSS eine HP erstellt.

Im Firefox sieht alles gut aus. Den Veranstaltungskalender habe ich floatend dargestellt, im IE werden die einzelnen Monate aber untereinander dargestellt.

Der HTML-Code sieht so aus:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Udenheim - Veranstaltungskalender</title>
   <meta name="keywords" content="udenheim, bergkirche,jakobuspilgerweg">
   <meta name="description" content="Willkommen in Udenheim, einem kleinen Weindorf im Herzen Rheinhessens.">
   <meta name="robots" content="index, follow">
   <link rel="stylesheet" type="text/css" href="css/udenheim.css" media="screen">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/fix-ie.css">
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="css/fix-ie7.css">
<![endif]-->
   </head>

<body>

<div id="wrapper">

   <div id="header">
   <img src="http://www.html.de/images/banner.gif" width="768" height="90" alt="Bildercollage">
   </div><!-- header -->

   <div id="hauptmenue">
      <ul>
      <li><a href="dorferneuerung.html">Unser Dorf hat Zukunft</a></li>
      <li><a href="tourismus.html">Tourismus und Kultur</a></li>
      </ul>
   </div>

   <div class="clearer"></div>

   <div id="menue">
      <ul>
         <li><a href="index.html">Startseite</a></li>
         <li><a href="aktuelles.html">Aktuelles</a></li>
         <li><a href="vereine.html">Vereine und Organisationen</a></li>
         <li><a href="geschichte.html">Ortsgeschichte</a></li>
         <li><a href="neubaugebiet.html">Baugebiet "Am Kreuz"</a></li>
         <li><a href="bilder.html">Bildergalerie</a></li>
      </ul>
   </div><!--- menue --->

   <div id="content">
   <h1>Veranstaltungskalender 2009</h1>

   <div id="monat">
      <ul>
      <li><a href="maerz.html">März</a></li>
      <li><a href="februar.html">Februar</a></li>
      <li><a href="januar.html">Januar</a></li>
      <p></p>
      <li><a href="juni.html">Juni</a>
      <li><a href="mai.html">Mai</a></li>
      <li><a href="april.html">April</a></li>
      <p></p>
      <li><a href="september.html">September</a></li>
      <li><a href="august.html">August</a></li>
      <li><a href="juli.html">Juli</a></li>
      <p></p>
      <li><a href="dezember.html">Dezember</a>
      <li><a href="november.html">November</a></li>
      <li><a href="oktober.html">Oktober</a></li>
      </ul>
   </div><!-- content -->

   <div class="clearer"></div>

   </div><!-- content -->

   <div id="footer">
   <p><a href="kontakt.html">Kontakt/Impressum</a>
      <a href="disclaimer.html">Disclaimer</a></p>
   </div><!-- footer -->

</div><!-- wrapper -->

</body>

</html>

Die dazugehörigen CSS-Formatierungen für die Darstellung der Monate sind hier:

Code: 
#monat {
width: 20%;
padding: 20px;
}

#monat ul {
position: absolute;
top: 50;
right: 50;
list-style: none;
}

#monat ul li {
float: right;
width: 10em;
margin:3px 5px 0 15px;
text-align: center;
border: 1px solid #450000;
}

#monat ul li a {
display: block;
padding: 5px 10px;
text-decoration: none;
background-color: #eee;
color: #900;
}

#monat ul li a:hover {
background-color: #000;
color: #fff;
}

#monat {
clear: right:
}

.clearer {
clear: both;
height: 10pix;
}

Ich habe zwar hier gelesen, dass eine Darstellung von Inahlten in Tabellenform nicht sein soll, daher habe ich die Monate entsprechend anders dargestellt, für die Inhalte der einzelnen Monate erschien mir die Darstelung in Tabellenform aber logisch.

Das hat aber zur Konsequenz, dass die Inhalte im IE mit einem großen, ungewollten Abstand zum Bannerbild dargestellt werden.

Ich hoffe, dass mir hier jemand helfen kann; ich bin am Ende meines "Anfängerlatein".

Gruß

Broker
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Habe den Quelltext mal nur oberflächlich überflogen und folgende "Grobschnitzer" festgestellt:

Innerhalb von <ul> darf nur <li> vorkommen.
Die Absatz-Tags (<p>) musst du also löschen.
Ggf. je Quartal ein ul verwenden.

Bei Juni und Dezember sind die li-Tags nicht geschlossen.

die absolute Positionierung von ul ist m.E. nicht erforderlich. Solltest du mit normalem margin lösen können.
 
Broker schrieb:
vorausschicken möchte ich, dass ich ein absoluter Neuling im Zusammenhang von HTML und CSS bin.
Zum Vergrößern anklicken....
Das ist eigentlich ganz einfach. Man kann beides ganz leicht und strikt voneinander trennen. HTML ist nur für die logische Auszeichnung des Inhalts da, gibt diesem eine Bedeutung, und CSS ist allein für Layout und Design da. Nichts, was man in HTML macht, tut man wegen Layout/Design und umgekehrt. Trennt man das immer gut voneinander, wird man keine Probleme mit moderner Web-Entwicklung haben.

Ich habe zwar hier gelesen, dass eine Darstellung von Inahlten in Tabellenform nicht sein soll, daher habe ich die Monate entsprechend anders dargestellt, für die Inhalte der einzelnen Monate erschien mir die Darstelung in Tabellenform aber logisch.
Zum Vergrößern anklicken....
Wenn Du nochmal oben nachliest, was ich über HTML und CSS gesagt habe, wird Dir auffallen, dass Die Darstellung mit dem HTML-Element table natürlich sinnfrei ist. Denn HTML ist ja gar nicht für die Darstellung. Eine Darstellung in Tabellenform ist aber was anderes. AUch gedanklich kann man Inhalt und Layout sehr gut voneinander trennen.

Darstellung in Tabellenform ist genauso richtig und wichtig, wie Darstellung aller anderen Inhalte. Tabellarische Daten werden in HTML mit dem Tag <table> ausgezeichnet und auch tabellarisch dargestellt. Was anderes würde keinen Sinn machen. Tabellarische Daten sind aber immer zweidimensional, eindimensional wären sie eine Liste.

Wenn Du einen Kalender darstellen willst, hast Du zweidimensionale Daten, Wochen und Wochentage. Die zeichnet man dann logischerweise auch als Tabelle aus. Hast Du allerdings nur das Bedürfnis, Termine in bestimmten Monaten anzuzeigen, hast Du ja nur eindimensionale Daten, nämlich die Monate. Da ist dann die Liste die richtige Auszeichnung.

Das hat aber zur Konsequenz, dass die Inhalte im IE mit einem großen, ungewollten Abstand zum Bannerbild dargestellt werden.
Zum Vergrößern anklicken....
ALs was Du Elemente in HTML auszeichnest, darf nicht davon beeinflusst werden, wie es in irgendeinem Browser dargestellt wird. Zunächst muss die Auszeichnung logisch und sinnvoll stehen. Wenn dann was nicht richtig aussieht, wird das in CSS festgelegt.
Abstände macht man in CSS mit margin oder padding.

Und, noch was: Das Element <div> dient zum Gruppieren mehrerer Elemente. Alle Deine divs #header, #hauptmenue, #menue und #monat sind fehl am Platze, weil völlig überflüssig. Das ist wie wenn Du Geschenke zweimal in Geschenkpapier einpackst. Du solltest sie entfernen, sie haben an der Stelle keine Existenzberechtigung. Die darin eingeschlossenen Listen sind - wie <div> auch - Block-Elemente und verhalten sich völlig identisch und können von Dir ganz genauso formatiert werden.

Das div#header ist sogar eine fehlerhafte Auszeichnung. Die ID des Elements lässt darauf schließen, dass das für Dich eine Überschrift (= Header) sein soll. Warum zeichnest Du diese dann nicht auch entsprechend aus? Hier würde sich ein <h1> um das <img> anbieten. Ich weiß nicht, was auf dem Image drauf ist, aber vielleicht bedarf der Inhalt des alt-Attributs noch einer sinnvollen Änderung.

Solltest Du nun noch Probleme beim Ändern Deines Abstandes haben, bitte ich Dich, einen Link zur Seite zu posten. Nur so kann man angemessen helfen.

Viel Erfolg,
-Efchen

Ach ja :-)
Wenn was unklar ist...nicht schämen, sondern einfach fragen. Mir ist klar, dass das alles viel und vielleicht "starker Tobak" ist, was ich Dir da auftische, aber das ist die Wahrheit, das ist eine korrekte Vorgehensweise, anders sollte man es nicht lernen. Ist natürlich nicht immer einfach, in einem Forum das in mundgerechten Stücken zu präsentieren, aber deswegen einfach nachfragen, wenn was unklar ist!
 
Werbung:
Hallo efchen und prm,

vielen Dank erstmal für Eure Kommentare.

Die <li> habe ich geschlossen und auch meine <div>-Orgien ein wenig reduziert.:)

Den korrigierten Code kann ich erst heute Abend hochladen und damit im Browser sichtbar machen.

@efchen: die Url lautet: Udenheim - Startseite

Dort findest Du einen Veranstaltungskalender und einen Button "Vereine und Organisationen".

Die klickbaren Monatsbuttons habe ich inzwischen als reine Links dargestellt und per CSS floaten lassen. Wie das im IE aussieht, kann ich mir erst heute Abend nach dem Hochladen anschauen.

Mir erschien schon sinnhaft, die jeweiligen Termine in den Monaten als Tabelle darzustellen, und auch die Aufzählung der Vereine und Organisationen...zumindest so, wie es auf der HP aussieht.

Mein Problem ist jedoch, dass die Darstellung der IE zwischen der Überschrift und em ersten Datum in den Monatsaufstellungen einen großen Zischenraum erzeugt, den ich auch über andere CSS-Angaben nicht korigieren kann. Wie gesagt...im Firefox sieht alles super aus.

Vielleicht mache ich aber auch einen kompletten Denkfehler...

Gruß

Broker
 
Die Vereine und Organisationen sind als Tabelle richtig ausgezeichnet. Es handelt sich hierbei um klassische zweidimensionale tabellarische Daten.

Die Monate würde ich auch eher als Liste auszeichnen, allerdings hätte ich statt float besser "li { display:inline; }" verwendet, weil dann die Monate auch im HTML-Code in der richtigen Reihenfolge stehen können. Jemand, der den Inhalt aus dem HTML-Code extrahiert (Suchmaschinen, Screenreader) werden sich über die dereitige Reihenfolge doch sehr wundern!

Die monatsweisen Termine als Tabelle...hhmmm...ja, könnte man wohl machen, allerdings sollte man dann auch nen header (also <th>) einfügen, damit man weiß, was die einzelnen Spalten bedeuten. Ansonsten hat das für mich doch auch eher nen Hauch von Liste. Und die Überschrift "Februar" ist doch auch ein Tabellenheader, also solltest Du da auch <th> anstatt <td> verwenden.

Was die sonstige Semantik angeht: Im div#header solltest Du das Image eigentlich als background-image per CSS einbinden, da es keinen Inhalt enthält und nur Zierde ist.
Das div#hauptmenue ist überflüssig, da es keine Elemente gruppiert, sondern nur ein einziges enthält.
Das div#menue ist aus dem selben Grund überflüssig.
Auch div#zurueck ist aus eben dem selben Grund überflüssig und verkehrt.
Und da Du im div#footer auch nur ein Element hast, sollte dieses div genauso verschwinden.
Das ist mindestens Divitis (das ist ansteckend!) und fast schon div-Suppe.

Broker schrieb:
Mein Problem ist jedoch, dass die Darstellung der IE zwischen der Überschrift und em ersten Datum in den Monatsaufstellungen einen großen Zischenraum erzeugt, den ich auch über andere CSS-Angaben nicht korigieren kann.
Zum Vergrößern anklicken....
Und bei mir ist zwischen "div#content h1" und der table im Firefox ein Abstand nach oben (padding-top:20px von der Tabelle), den mir der IE7 nicht anzeigt. Also genau umgekehrt :-)
 
Guten Morgen zusammen,

ich weiss zwar immer noch nicht, was ich da gestern herauf beschworen habe, aber dank der beiden Beiträge von prm und efchen konnte ich mein Problem lösen.

Vielen Dank für die tolle Unterstützung hier.

Ein schönes sonniges W/E wünscht

Broker
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben