✔ Div mit Variablen

Status
Nicht offen für weitere Antworten.
T

Transporter

Mitglied
Moin !

Soll eine Karte mit 11 x 11 Feldern sein.
Der Code steht in einer Schleife. Die Variablen $v und $h werden zu bestimmten Zeiten hochgezählt.

Im Firefox funktioniert das auch schon ganz gut!


Wäre schön, wenn Ihr mir weiterhelfen könntet:

PHP: 
<div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: ",$v,"px; left: ",$h,"px; border: none'>
<img src='images/test.gif'>
</div>
 
Dadurch, daß sich die Variablen $h und $v teilweise durch die Schleife erhöhen, sollen sich die DIVS hintereinnander bzw. untereinnander aufbauen.

Im Firefox wird das auch perfekt durchgeführt, allerdings wird im IE und im Opera nur ein Div angezeigt. Ich vermute mal, daß die irgendwie alle übereinander liegen.

Hier mal noch ein bisschen mehr Code:

PHP: 
$h = 3;
$v = 3;

for($a = 1; $a < 12; $a ++)
  {
  for($b = 1; $b < 22; $b ++)
    {
    echo
    "<div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: ",$v,"px; left: ",$h,"px; '>
    </div>";

    if($b == 21)
      { $h = 19; }

    else
      { $h += 32; }
    }

    if($a %2 == 0)
      { $h = 3; }

    $v += 26;
  }
 
Ich kann da keine Darstellungsunterschiede in den genannten Browsern ausmachen, und die HTML-Ausgabe des PHP-Codes ist überall identisch.

Hier mal die abgekürzte Fassung, da die maximale Zeichenlänge für einen Beitrag überschritten wird:

Code: 
<div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 3px; left: 3px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 3px; left: 35px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 3px; left: 67px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 29px; left: 19px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 29px; left: 51px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 29px; left: 83px; '>
    </div>
   <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 55px; left: 3px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 55px; left: 35px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 55px; left: 67px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 81px; left: 19px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 81px; left: 51px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 81px; left: 83px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 107px; left: 3px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 107px; left: 35px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 107px; left: 67px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 133px; left: 19px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 133px; left: 51px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 133px; left: 83px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 159px; left: 3px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 159px; left: 35px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 159px; left: 67px; '>
    </div>
   <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 185px; left: 19px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 185px; left: 51px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 185px; left: 83px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 211px; left: 3px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 211px; left: 35px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 211px; left: 67px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 237px; left: 19px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 237px; left: 51px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 237px; left: 83px; '>
    </div>
    <div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 263px; left: 3px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 263px; left: 35px; '>
    </div><div style='position: absolute; background-image: url(test.gif); width: 32px; height: 34px; top: 263px; left: 67px; '>
    </div>
 
Genau,

und mein Firefox zeigt dann die unterschiedlichen Bilder neben- und untereinander an.
Der IE und Opera aber leider nur ein Bild!

Das ist ja das komische!
 
Ich hab hier mal den Hintergrund auf rot eingestellt:

firefox2.jpg ie6.jpg opera9.jpg

(vlnr.: Firefox2, IE6, Opera9.25)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück