HP-Bauer: Frage zu margin

Hallo,

wenn ich innerhalb eines Divs mit einer festen Breite von z.B. 300px nachfolgendes Image setze, müsste es doch mit einem Abstand von 10px am linken inneren Div-Rand ausgerichtet werden, oder ?

<div style='width:300px; float:left'>
<img src='images/test.jpg' width='130' height='87' border='0' style='width:130px; margin:37px 0 0 10px; display:block'>
</div>

Leider verschiebt sich das Image aber nur vom Mittelpunkt aus um 10px nach links. Warum? Bin für jeden Tipp dankbar.

MfG
HP-Bauer

  1. Hallo,

    Leider verschiebt sich das Image aber nur vom Mittelpunkt aus um 10px nach links.

    Von welchem Mittelpunkt?

    <div style='width:300px; float:left'>

    Vielleicht solltest du noch padding: 0px; hinzufügen

    Viele Grüße
    nance

    1. Hallo,

      Von welchem Mittelpunkt?

      Vom Mittelpunkt des Image-Objekts.

      MfG
      HP-Bauer

      1. hi,

        Von welchem Mittelpunkt?

        Vom Mittelpunkt des Image-Objekts.

        Damit wird auch nicht deutlicher, was du meinst - eher im Gegenteil.

        Ob ich ein Bild am linken Rand, in der Mitte oder am rechten Rand anfasse, um es zehn Zentimeter nach rechts "verschoben" wieder aufzuhängen - das hat doch auf die sich ergebende Position keinerlei Einfluss ...?

        Bring bitte mal ein vollständiges Beispiel.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Damit wird auch nicht deutlicher, was du meinst - eher im Gegenteil.

          <div style='width:300px; float:left'>
          <img src='images/test.jpg' width='130' height='87' border='0' style='width:130px; margin:37px 0 0 10px; display:block'>
          </div>

          Das Image-Objekt steht nun 10px links von der Mitte des Div. Ich möchte aber, dass der linke Rand des Image-Objekts 10px entfernt vom Div Rand steht. Wenn ich beim Image-Objekt margin-left:0px angebe, steht es bei mir in der Mitte des Div. Es müsste doch dann aber am linken Rand des Div stehen.

          MfG
          HP-Bauer

          1. hi,

            mit "vollständiges Beispiel" meinte ich nicht eine Wiederholung dieses Schnipsels, sondern eher eine komplette (natürlich auf's wesentliche reduzierte) Testseite.

            <div style='width:300px; float:left'>
            <img src='images/test.jpg' width='130' height='87' border='0' style='width:130px; margin:37px 0 0 10px; display:block'>
            </div>

            Das Image-Objekt steht nun 10px links von der Mitte des Div. Ich möchte aber, dass der linke Rand des Image-Objekts 10px entfernt vom Div Rand steht. Wenn ich beim Image-Objekt margin-left:0px angebe, steht es bei mir in der Mitte des Div. Es müsste doch dann aber am linken Rand des Div stehen.

            Dann hast du vermtulich noch irgendwelche anderen Formatierungen (oder HTML-Attribute), die auf die Position des Bildes einwirken.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo,

              Dann hast du vermtulich noch irgendwelche anderen Formatierungen (oder HTML-Attribute), die auf die Position des Bildes einwirken.

              Ich hatte text-align:center im body stehen, habe es entfernt und nun scheint es zu funktionieren. Gibt es eine Möglichkeit text-align im body anzugeben und im betreffenden Div wieder aufzuheben? Habe probiert im Div text-align:left zu setzen, aber dann entsteht das selbe Problem am linken Rand.

              MfG
              HP-Bauer

              1. hi,

                Ich hatte text-align:center im body stehen, habe es entfernt und nun scheint es zu funktionieren.

                Dachte ich's mir doch :-)

                Gibt es eine Möglichkeit text-align im body anzugeben und im betreffenden Div wieder aufzuheben?

                text-align kann man nicht "aufheben", sondern höchstens auf einen anderen Wert setzen.

                Habe probiert im Div text-align:left zu setzen, aber dann entsteht das selbe Problem am linken Rand.

                Was heißt denn das nun wieder?
                Drück dich doch bitte endlich mal etwas konkreter aus, so dass man nicht ständig rückfragen muss.

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hallo,

                  wenn ich text-align:left (Standardeinstellung) setze, dann lässt sich das Image-Objekt nicht mit margin-right am rechten Div-Rand ausrichten (das Image "klebt" trotz margin-right:10px am linken Div-Rand). Bei text-align:right lässt sich ein anderes Image dagegen nicht am linken Div-Rand ausrichten. Muss ich jedem Image etwa den entsprechenden text-align Wert extra zuweisen?

                  MfG
                  HP-Bauer

                  1. hi,

                    wenn ich text-align:left (Standardeinstellung) setze, dann lässt sich das Image-Objekt nicht mit margin-right am rechten Div-Rand ausrichten (das Image "klebt" trotz margin-right:10px am linken Div-Rand).

                    Natürlich - weil es ein replaced inline Element ist.
                    Ob display:block hier etwas helfen würde, weiß ich nicht.

                    Bei text-align:right lässt sich ein anderes Image dagegen nicht am linken Div-Rand ausrichten. Muss ich jedem Image etwa den entsprechenden text-align Wert extra zuweisen?

                    Wenn du zwei Bilder in ein und dem selben Element entgegengesetzt ausrichten willst, kannst du eh kein text-align dafür nehmen - kann ja wohl schlecht gleichzeitig den Wert left und right annehmen.
                    Dann solltest du mindestens eins der Bilder floaten lassen.

                    gruß,
                    wahsaga

                    --
                    /voodoo.css:
                    #GeorgeWBush { position:absolute; bottom:-6ft; }
                  2. Hi,

                    wenn ich text-align:left (Standardeinstellung) setze, dann lässt sich das Image-Objekt nicht mit margin-right am rechten Div-Rand ausrichten

                    Wie kommst Du auf die Idee, daß margin-right dazu dienen könnte, ein Element nach rechts auszurichten?
                    margin-right dient dazu, dem Element rechts einen Abstand (zu einem evtl vorhandenen weiteren Element) zu verpassen.

                    cu,
                    Andreas

                    --
                    Warum nennt sich Andreas hier MudGuard?
                    Schreinerei Waechter
                    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                    1. hi,

                      Wie kommst Du auf die Idee, daß margin-right dazu dienen könnte, ein Element nach rechts auszurichten?

                      Mit negativem Wert ...?
                      ;-)

                      gruß,
                      wahsaga

                      --
                      /voodoo.css:
                      #GeorgeWBush { position:absolute; bottom:-6ft; }