reingestolpert: Postionierung von Grafiken im <div>

Hallo und Guten Tag,
Ich habe schon das Archiv durchsucht, aber nichts zu Thema gefunden:
Ich habe folgenden Code mit Grafiken:

<style media="screen" type="text/css"><!--
#kopf { position: absolute; z-index: 3; top: 0px; left: 0px; width: 835px; background-color:#007ba0; height: 61px; visibility: visible; display: block;}
#sz {margin-left:20px}
#vl {text-align:right}
--></style></head>

<body>
<div id="kopf">
<img src="img/ht-kopf.gif" width="150" height="61" border="0" alt="" />
<img src="img/sz-kopf.gif" width="199" height="58" border="0" id="sz" alt="Hausfrauentips" />
<span id="vl"> <img src="img/kp-kopf.jpg" width="143" height="62" border="0" alt="Bild" /></span></div>
</body>

Die letzte Grafik will ich nun einfach rechts im oberen container plaziert haben.. irgendwie schlagen aber alle Versuche fehl.
Was mache ich falsch?

Vielen Dank für die Hilfe

rt

  1. Hallo reingestolpert.

    Die letzte Grafik will ich nun einfach rechts im oberen container plaziert haben.. irgendwie schlagen aber alle Versuche fehl.

    Du kannst doch die linke Grafik als Hintergrund linksbündig festlegen und die rechte regulär mit text-align:right; nach rechts bringen, bzw. mit float:right; rechts fließen lassen.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
    1. Hallo,

      Hallo reingestolpert.

      Die letzte Grafik will ich nun einfach rechts im oberen container plaziert haben.. irgendwie schlagen aber alle Versuche fehl.

      Du kannst doch die linke Grafik als Hintergrund linksbündig festlegen und die rechte regulär mit text-align:right; nach rechts bringen, bzw. mit float:right; rechts fließen lassen.

      Mal zum grundlegenden Verständnis:
      ich habe den <div> Container der hat so seine Eigenschaften, postion Farbe u.s.w. nun sollte mir es doch möglich sein in diesem div Container ein Inline Element zu definieren und diesem Element eine Position zuzuweisen... zum beispiel über <span> stattdessen baut er mir mein Grafik unter die bestehende Grafik. woran liegt das?
      Und es sollte doch eine Möglichkeit geben um Float drumherum zu kommen?
      Float ist ziemlich buggy und wird von nicht allen Browsern ordentlich interpretiert.
      r.t.

      1. hi,

        Mal zum grundlegenden Verständnis:

        wie wär's, "zum gunrdlegenden verständnis", mal mit einer klaren definition, was du jetzt eigentlich erreichen willst?

        ich habe den <div> Container der hat so seine Eigenschaften, postion Farbe u.s.w. nun sollte mir es doch möglich sein in diesem div Container ein Inline Element zu definieren und diesem Element eine Position zuzuweisen... zum beispiel über <span> stattdessen baut er mir mein Grafik unter die bestehende Grafik. woran liegt das?

        woher sollen wir das wissen?

        Und es sollte doch eine Möglichkeit geben um Float drumherum zu kommen?
        Float ist ziemlich buggy und wird von nicht allen Browsern ordentlich interpretiert.

        die implementation des verständnisses von float in diveresen seitenbastler-hirnen ist in der tat oftmals buggy.

        welche (unlösbaren) probleme du in aktuellen browsern siehst, sehe ich jedoch nicht.

        gruß,
        wahsaga

        --
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
        1. Hallo wahsaga

          ich habe den <div> Container der hat so seine Eigenschaften, postion Farbe u.s.w. nun sollte mir es doch möglich sein in diesem div Container ein Inline Element zu definieren und diesem Element eine Position zuzuweisen... zum beispiel über <span> stattdessen baut er mir mein Grafik unter die bestehende Grafik. woran liegt das?

          woher sollen wir das wissen?

          Quelltext postete ich bereits im Ausgangsposting.
          Was fehlt Dir um meine Frage zu beantworten?
          Ich würde es gerne hochladen, nur weiß ich im Augenblick nicht wo..

          Und es sollte doch eine Möglichkeit geben um Float drumherum zu kommen?
          Float ist ziemlich buggy und wird von nicht allen Browsern ordentlich interpretiert.

          die implementation des verständnisses von float in diveresen seitenbastler-hirnen ist in der tat oftmals buggy.

          Danke für die Aufklärung.. Guillotinenbug im IE sagt Dir was? sicher kein Problem bei Grafiken aber sonst.
          Außerdem fragte ich nicht umsonst wenn ich die Zusammenhänge bessser begreifen würde, dann würde ich nicht fragen.
          Und wenn ich Profi wäre, dann würde ich vermutlich nicht fragen.

          r.t.

      2. Hallo reingestolpert.

        (...) nun sollte mir es doch möglich sein in diesem div Container ein Inline Element zu definieren und diesem Element eine Position zuzuweisen... zum beispiel über <span> stattdessen baut er mir mein Grafik unter die bestehende Grafik. woran liegt das?

        Also soll es am Ende so aussehen? - ASCII-Art;)
        _______________________________________________
        |      |                                 |      |
        |  G1  |                                 |  G2  |
        |      |                                 |      |
        |¯¯¯¯¯¯                                   ¯¯¯¯¯¯|
        ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

        Gruß, Ashura

        --
        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
        1. Hallo

          Hallo reingestolpert.
          _______________________________________________
          |      |   |      |                     |      |
          |  G1  |   |  G2  |                     |  G2  |
          |      |   |______|                     |      |
          |¯¯¯¯¯¯                                  ¯¯¯¯¯¯|
          ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

          Ich habe mal korrigiert..

          So wie oben beschrieben...
          r.t.

          1. Hallo reingestolpert.
                   _______________________________________________

            |      |   |      |                     |      |
            |  G1  |   |  G2  |                     | G2(3)|
            |      |   |______|                     |      |
            |¯¯¯¯¯¯                                  ¯¯¯¯¯¯|
            ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

            Dann:

            G1 - Normal eingebunden
            G2 -       -"-
            G3 - Hintergrund

            Wenn du zwischen G1 und G2 Platz haben willst, wendest du entweder margin-left oder -right an, je nachdem.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
          2. Hallo,

            _______________________________________________
            |      |   |      |                     |      |
            |  G1  |   |  G2  |                     |  G2  |
            |      |   |______|                     |      |
            |¯¯¯¯¯¯                                  ¯¯¯¯¯¯|
            ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

              
            <div>  
             <img src="g1.png" alt="g1" />  
             <img src="g2.png" alt="g2" />  
             <img src="g3.png" alt="g3" class="fr" />  
            </div>  
            
            
              
            img { margin: 0 1em 0 0; }  
            .fr { float: right; margin: 0 0 0 1em; }  
            
            

            Müsste doch eigentlich schon genau das tun was du willst oder nicht? Notfalls noch den anderen zwei img ein float: left verpassen wenn der Abstand oben nicht passen sollte.

            Grüße
            Jeena Paradies

            --
            Nichts ist besser als Bass!