Marcel: Grafik neben Text einfügen

Hallo,

ich habe nach dem folgenden Schema eine Liste mit den Namen, Telefon Nr. und Email-Adressen erstellt:

<div style="margin-top: 2px; margin-left: 6px;">
Martin Musermann<br />
Tel.  : 0123 / 45 67 89<br />
Email : martin.mustermann@gmx.de<br />
</div>
<div style="margin-top: 2px; margin-left: 6px;">
.... (nächster Kontakt...usw.)
</div>

Jetzt möchte ich rechts neben dieser Kontaktliste noch jeweils ein Foto platzieren.
Aber egal was ich probiere, ob ich es als background-image in das o.g. div integriere oder als eigenes div innerhalb oder außerhalb der o.g. divs, es verschiebt mir immer alles um die Höhe der Grafik nach unten.
Versuche mit z-index die Grafik auf eine andere Ebene haben leider auch nicht zum Erfolg geführt.

Wie muss ich die Grafiken platzieren, damit nicht das gesamte Layout verschoben wird.?

Hat jemand einen Tipp für mich?

Danke + Gruß

Marcel

  1. Hallöchen,

    Hallo,

    ich habe nach dem folgenden Schema eine Liste mit den Namen, Telefon Nr. und Email-Adressen erstellt:

    <div style="margin-top: 2px; margin-left: 6px;">
    Martin Musermann<br />
    Tel.  : 0123 / 45 67 89<br />
    Email : martin.mustermann@gmx.de<br />
    </div>
    <div style="margin-top: 2px; margin-left: 6px;">
    .... (nächster Kontakt...usw.)
    </div>

    Jetzt möchte ich rechts neben dieser Kontaktliste noch jeweils ein Foto platzieren.

    Ich würde es mit float machen.
    siehe: http://www.css4you.de/float.html oder
    http://forum.de.selfhtml.org/archiv/2004/9/t89173/

    Gruß
    Ole

    1. Hallo und vielen Dank an Ole,

      Ich würde es mit float machen.
      siehe: http://www.css4you.de/float.html oder
      http://forum.de.selfhtml.org/archiv/2004/9/t89173/

      Ich habe es jetzt so gemacht:
      .kontakt_mustermann{
      float: right;
      left: 120px;
      top: 250px;
      width: 100px;
      height: 96px;
      }

      und dann:
      <div class="kontakt_mustermann"><img src="image/mustermann.jpg"></div>

      Das funktioniert so weit auch ganz gut.
      Aber die Positionierung funktioniert nicht. Die Werte die ich unter left und top eingetragen habe werden ignoriert.

      Was kann man tun?

      Danke und Gruß

      Marcel

      1. Das funktioniert so weit auch ganz gut.
        Aber die Positionierung funktioniert nicht. Die Werte die ich unter left und top eingetragen habe werden ignoriert.

        Hi!

        Suche bei SELFHTML nach position: absolute bzw relative!

        MfG

        --
        ie:{ fl:{ br:> va:{ ls:# fo:| rl:( n4:( ss:( de:> js:{ ch:{ sh:} mo:? zu:)
  2. ich habe nach dem folgenden Schema eine Liste mit den Namen, Telefon Nr. und Email-Adressen erstellt:

    Wenn du eine Liste hast, warum nutzt du nicht ein entsprechendes HTML Element?

    <div style="margin-top: 2px; margin-left: 6px;">
    <div style="margin-top: 2px; margin-left: 6px;">

    Du kannst dir auch das ständige Wiederholen von den immer gleichen Angaben sparen.

    Aber egal was ich probiere, ob ich es als background-image in das o.g. div integriere ... es verschiebt mir immer alles um die Höhe der Grafik nach unten.

    Das glaube ich nicht. Ein Hintergrunbild hat keinen Einfluss auf die Höhe eines Elementes.

    Struppi.

    1. Hallo Struppi!

      Das glaube ich nicht. Ein Hintergrunbild hat keinen Einfluss auf die Höhe eines Elementes.

      Struppi.

      Du hast Recht. Solange ich keine Größenangabe mache, wird ein Spalt des Bildes angezeigt und an der Liste verschiebt sich nichts. Nur das Bild wird eben auch nicht vollständig angezeigt.
      Sobald ich aber heigth: 96px; eingebe, wird die Liste nach unten verschoben.
      Wenn das zu lösen wäre, dann wäre das die optimalste Lösung!

      Danke und Gruß

      Marcel

      1. Struppi.

        Bitte lass nur den Text stehen, auf dem du antworten möchtest, Danke.

        Sobald ich aber heigth: 96px; eingebe,

        Was bekommt diese Angabe?
        Es würde enorm helfen, wenn du uns zeigst was du wirklich machst und nicht scheibchenweise mit immer neuen Bedingungen kommst.

        Struppi.