Darstellung Textzeilen in IE ok, in Chrome verschoben! Warum?

[Lola77]

Hi Ihrs!

Ich bin kein Profi auf dem Gebiet und mache nur ganz kleine Homepages für Kunden, die eine "bessere Visitenkarte" im Internet brauchen. Komme eigentlich aus dem Printbereich...

Trotzdem hat es eigentlich immer ganz gut funktioniert. Ich selbst bin vor einiger Zeit vom IE auf Chrome umgestiegen und habe seither festgestellt, das dort auf von mir erstellten Seiten die Zeilenpositionen nicht mehr stimmen. Im IE ist alles korrekt.

Auf der simplen Seite www.ekkehard-wiegand.de/bio.htm sind die Jahrenzahlen und die Einträge in der Biografie zwei Zellen, damit ich das eine rechtsbündig, und das andere dazu linksbündig setzen kann. (Kann's nicht besser...)

Warum rutscht im Chrome die erste Zeile der Jahreszahlen nach unten???? *grrrr*
Ich kann machen, was ich will, das sieht immer so aus. Und da ist doch nichts geheimnisvolles drin! Wenn ich das Bild rausnehme ist's das selbe...

Bitte um Aufklärung - DANKE!
Iris

[MrMurphy]

Hallo,

Komme eigentlich aus dem Printbereich...

Das ist jetzt nicht böse gemeint, ist aber bei der Erstellung von Internetseiten nicht grade von Vorteil. Im Printbereich hast du die volle Kontrolle, z. B. über Papierart, Papiergröße, Schriftart, Farben, Anordnung. Das gibt es alles im Internet nicht.

Das aktuelle Problem ist, das du Abstände mit Zeilenumbrüchen erzeugst. Der Firefox zeigt das im übrigen genau wie Chrome an. Und zwar beide so, wie ich es dem Quellcocde nach eigentlich eher erwarte. Im Endeffekt wirst du mit so einer Lösung immer Probleme haben, da die Zeilenumbrüche von jedem Browser etwas anders bei der Ansicht der Seite berücksichtigt werden.

Als Lösung solltest du entweder eine detailiertere Tabelle erstellen, in der jede Tabellenzeile einen Datensatz enthält (Datum Ereignis) oder das ganze z. B. mit einer Definitionsliste lösen. Wobei mir in diesem Fall die Definitionsliste auch im Zusammenhang mit dem Bild, auf Dauer flexibler und leichter handhabbar erscheint.

Gruss

MrMurphy

[Lola77]

Hi Mr Murphy

Danke für Deine Antwort. Leider weiß ich nicht mal, was eine Definitionsliste ist. Kann man das kurz umreißen oder ist das sinnlos...? ;-)

LG,
Iris

[MrMurphy]

Hallo

oder ist das sinnlos...? ;-)

Das kommt auf deine Vorkenntnisse an. HTML und CSS sowie deren Zusammenarbeit solltest du schon kennen, sonst wird's schwierig.

HTML

Einfache Definitionslisten bestehen aus einem Begriff (bei dir die Jahreszahl) und einer Erläuterung dazu (in deinem Fall die dazugehörige Tätigkeit).

Die Definitionsliste beginnt mit dem dl-Tag und endet mit dem /dl-Tag. Darin folgen abwechselnd die Begriffe (eingeschlossen in dt-Tags) und die Erläuterungen (eingeschlossen in dd-Tags).

Praktisches Beispiel:

<dl>
   <dt>1960</dt>
   <dd>Geboren in Halle / Salle</dd>
   <dt>1966</dt>
   <dd>Einschulung in der St. Johanna-Schule in Kiel</dd>
</dl>

Wenn die Liste erweitert werden soll, muss an der passenden Stelle nur ein Begriffs- / Erläuterungspaar hinzugefügt werden, gleiches gilt für's Löschen. Meiner Ansicht nach viel einfacher als da noch zusätzlich mit Tabellenzeilen hantieren zu müssen.

CSS

Jetzt muss dem ganzen nur noch die Optik eines Lebenslaufs mit auf dem Weg gegeben werden. Dies geschieht mittels CSS. Das entscheidende ist, das dt-Tag nach links zu floaten und dem dd-Tag einen passenden linken Rand zu geben. Das ganze CSS für die Definitionsliste könnte z. B. so aussehen:

dl {
   padding: 1em;
   margin: 0;
   width: 400px;
   background-color: gold;
}

dt {
   float: left;
}

dd {
   margin-left: 10em;
   padding-bottom: 0.8em;
}

Ich habe mir das mal für mich selbst auf meine Homepage geschrieben, damit ich bei Bedarf nicht immer in Internet suchen muss. Da musst du bis Lebenslauf runterscrollen.

http://home.arcor.de/mrmurphy/aktuel...l#col3_content

Das Bild müsstest du dann noch vor der Definitionsliste einfügen und nach rechts floaten lassen. Und wie immer beim Floaten: Das Clearen nicht vergessen.

Gruss

MrMurphy