Lukas Böhm: Brett vor dem Kopf: Problem mit Zentrierung

Hi!
Ich habe gerade ein Brett unglaublichen Ausmaßes vor dem Kopf. Ich weiiß nicht, warum das Bild nicht zentriert wird (Firefox 1.5.x.x). Was ist falsch?

Hier der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body{
 background-color: #707070;
 color: #000000;
 font-family: sans-serif;
 width: 800px;
 margin: 0 auto 0 auto;
 font-size: 0.8em;
 text-align: justify;
}
div#top{
 width: 800px;
 margin: 0.5em auto 0 auto;
}
</style>
</head>

<body>
<div id="top">
 <img src="bilder/top_img.jpg" width="549" height="288" alt="" title="" style="margin: 0 auto 0 auto;">
</div>
</body>
</html>

Vielen Dank für eure Hilfe!
szia, Lukas

  1. echo $begrüßung;

    Ich habe gerade ein Brett unglaublichen Ausmaßes vor dem Kopf. Ich weiiß nicht, warum das Bild nicht zentriert wird (Firefox 1.5.x.x). Was ist falsch?

    Ich habe mir deinen Code nicht näher angeschaut, ich möchte dir aber ein Werkzeug vorstellen, das bei der Fehlersuche hilfreich sein kann.
    Der "DOM Inspector" unter Extras, falls er beim Installieren nicht abgewählt wurde, sollte dir auf die Sprünge helfen können. Links findest du eine Übersicht über deinen Elementebaum. Wähle dort mal BODY, das DIV und das Bild und schau dir an, wo der rote Rahmen blinkt, der die Grenzen des Objekts anzeigt. (Wiederholen lassen kann man das Blinken übrigens mittels entsprechende Kontextmenüeintrag.) Dieser Rote Rahmen sollte dir deutlich machen, welches Element dir bei der Zentrierung die lange Nase zeigt.
    Auf der rechten Seite wären "CSS Style Rules" oder "Computed Style" interessant, um zu sehen, was der Firefox aus dem Default-Stylesheet und deinen Angaben macht.

    echo "$verabschiedung $name";

    1. Hi!
      Danke für deine Antwort!
      Soweit ich weiß habe ich nichts abgewählt. Aber da ist trotzdem kein DOM-Inspector unter Extras :-(
      Kann ich den vlt. nachträglich noch installieren?
      szia, Lukas

      1. echo $begrüßung;

        Soweit ich weiß habe ich nichts abgewählt. Aber da ist trotzdem kein DOM-Inspector unter Extras :-(
        Kann ich den vlt. nachträglich noch installieren?

        Einfach den FF nochmal neu installieren und darauf achten, dass er gewählt ist.

        Wie ich eben durch Probieren mit dem DOM Inspector rausgefunden habe, reagiert das Bild nicht auf margin. Vermutlich ist es als Inline-Element auch gar nicht verpflichtet, das zu tun. Als ich ihm ein display: block; gab, hüpfte es vor Freude in die Mitte, was mich dazu brachte, die vorige Vermutung anzunehmen. Ebenso mittig platzierte es sich, als ich dem DIV ein text-align: center; verpasste.

        echo "$verabschiedung $name";

        1. Hi!
          Vielen Dank für deine Hilfe!
          szia, Lukas

  2. Hi,

    Ich bin mir nicht sicher, aber ich habe ein paar Stellen gefunden, die mir eigenartig vorkommen:

    text-align: justify;

    ich würde
    text-align: center;
    nehmen...

    div#top{
    width: 800px;
    margin: 0.5em auto 0 auto;
    }

    div#top?
    da ist ein div zuviel.
    ich würde
    #top{
     width: 800px;
     margin: 0.5em auto 0 auto;
     }
    schreiben...

    <img src="bilder/top_img.jpg" width="549" height="288" alt="" title="" style="margin: 0 auto 0 auto;">

    Wieso hast du hier wieder einen Style, wenn du bereits einen Bodystyle und einen style top hast.
    Da hast du dich etwas vertan.

    Eine Frage zurück:
    Mit welchem Programm arbeitest du?

    MYNON

    --

    " Live is a Game, play it! "
    1. Hi!

      Ich bin mir nicht sicher, aber ich habe ein paar Stellen gefunden, die mir eigenartig vorkommen:

      text-align: justify;
      ich würde
      text-align: center;
      nehmen...

      justify ist blocksatz und center zentrieren. Das sind 2 völlig verschiedene Dinge. Außerdem hat das wenig damit zutun, ob das _Bild_ zentriert ist.

      div#top{
      width: 800px;
      margin: 0.5em auto 0 auto;
      }
      div#top?
      da ist ein div zuviel.
      ich würde
      #top{
      width: 800px;
      margin: 0.5em auto 0 auto;
      }
      schreiben...

      #top gilt auch für ein <span> mit der id top. div#top gilt nur für divs mit der id top.

      <img src="bilder/top_img.jpg" width="549" height="288" alt="" title="" style="margin: 0 auto 0 auto;">
      Wieso hast du hier wieder einen Style, wenn du bereits einen Bodystyle und einen style top hast.
      Da hast du dich etwas vertan.

      Das ist doppeltgemoppelt. Das ist richtig. Aber es bestätigt nur das, was im div#top steht. Deswegen dürfte das auch keine Rolle spielen.

      Eine Frage zurück:
      Mit welchem Programm arbeitest du?

      Mit einem ganz normalen Texteditor.
      szia, Lukas

      1. Hi,

        hab ich mich wohl geirrt.
        Vielleicht kann dir jemand anderer weiterhelfen.

        Zum Editor:
        Ich kann dir HomeSite empfehlen.
        Das Programm zeigt dir (wenn du willst) gleich die fertige Website.
        So kannst du ohne viel aktualisieren das Ergebnis prüfen.

        MYNON

        --

        " Live is a Game, play it! "
        1. Hi!

          Zum Editor:
          Ich kann dir HomeSite empfehlen.
          Das Programm zeigt dir (wenn du willst) gleich die fertige Website.
          So kannst du ohne viel aktualisieren das Ergebnis prüfen.

          Danke für deinen Tip. Ich habe mal in eine Weile mit HomeSite gearbeitet. Dabei habe ich auch die Vorschaufunktion ausgenützt. Aber dann ist mir aufgefallen, dass der IE benutzt wird. Das finde ich nicht so toll. Deswegen benütze ich die Vorschaufunktion und HomeSite nicht mehr.
          Weißt du, ob man einstellen kann welcher Browser benutzt wird?
          szia, Lukas

          1. Hi,

            Aber dann ist mir aufgefallen, dass der IE benutzt wird. Das finde ich nicht so toll. Deswegen benütze ich die Vorschaufunktion und HomeSite nicht mehr.

            Find ich nicht so schlimm.

            Weißt du, ob man einstellen kann welcher Browser benutzt wird?

            Klar
            options - settings - browse
            Man kann aber nur zwischen Netscape/IE und einem build-in browser entscheiden.

            Hat dein Editor eine Vorschau mit Firefox?

            MYNON

            --

            " Live is a Game, play it! "
            1. Hi,

              Aber dann ist mir aufgefallen, dass der IE benutzt wird. Das finde ich nicht so toll. Deswegen benütze ich die Vorschaufunktion und HomeSite nicht mehr.
              Find ich nicht so schlimm.

              Wenn ich eine Seite für den IE "optimiere" dann ist der Quelltext nicht "optimal". Deswegen schreibe ich lieber zuerst "guten" Quelltext für den FF und mache diesen dann schlecht, damit er auch für den IE geht.

              Weißt du, ob man einstellen kann welcher Browser benutzt wird?
              Klar
              options - settings - browse
              Man kann aber nur zwischen Netscape/IE und einem build-in browser entscheiden.

              Danke! Aber was ist ein build-in Browser?

              Hat dein Editor eine Vorschau mit Firefox?

              Nein, leider nicht! Aber ich habe 2 Monitore. In dem einen ist FF im anderen der Editor. Das finde ich eigentlich die beste Möglichkeit.
              szia, Lukas

              1. Hi,

                Wenn ich eine Seite für den IE "optimiere" dann ist der Quelltext nicht "optimal". Deswegen schreibe ich lieber zuerst "guten" Quelltext für den FF und mache diesen dann schlecht, damit er auch für den IE geht.

                Ich verwende den IE, um zu testen, ob es überhaupt geht.

                Danke! Aber was ist ein build-in Browser?

                Weiß nicht...
                Wahrscheinlich so ne Art Browser von Homesite.

                Nein, leider nicht! Aber ich habe 2 Monitore. In dem einen ist FF im anderen der Editor. Das finde ich eigentlich die beste Möglichkeit.

                Das hätte ich auch gerne.
                Aber das ist mir leider zu teuer.

                MYNON

                --

                " Live is a Game, play it! "
      2. Abend.

        Ich bin mir nicht sicher, aber ich habe ein paar Stellen gefunden, die mir eigenartig vorkommen:

        text-align: justify;
        ich würde
        text-align: center;
        nehmen...
        justify ist blocksatz und center zentrieren. Das sind 2 völlig verschiedene Dinge. Außerdem hat das wenig damit zutun, ob das _Bild_ zentriert ist.

        Ein Bild ist ein inline-Element, wird also genauso ausgerichtet wie auch der Text! Verpasse dem Element, dass das Bild enthält ein text-align: center oder dem Bild selbst ein display: block, so dass margin: auto greift.

        Gruß
         Christoph

        1. ähem...
          ups