• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

DIV verschieben/positionieren

G

gNano

New member
Guten Tag zusammen,

ich hänge nun verzweifelt an einem Problem fest.

Zunächst einmal mein Ziel: Ich habe eine Tabelle, in die je nach Event ein Ereignis eintragen werden soll. Dabei kann ein Event mehrere Tabelleneinträge überlappen. Ich brauche dabei Tabelleneinträge, die nur zu Teilen eine andere Hintergrundfarbe haben, sprich mehrfarbig in der Zelle sind.
Dazu habe ich nun zwei Lösungen überlegt:

1.) Ich finde eine Funktion, mit der ich den Hintergrund nur zu teilen ändere
2.) Ich nehme ein div, positioniere es anhand der Position der Tabelleneinträge und lege es über diese.

Da ich zu 1 keine adäquate Lösung fand, arbeite ich an der zweiten Variante.

Dazu habe ich folgendes Minimalbeispiel, welches ich einfach nicht zum laufen bekomme. Ich weiß nicht mehr was ich ändern kann, habe aber bereits den Fehler ausfindig machen können (ohne das ich die Lösung weiß).

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Bewegtes DIV</title>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<div id="bewegung" style="width:50px; height:50px; background-color:#000; position:absolute; z-index:1; top:0px; left:0px"></div><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript">
 move(10,0);
</script>
</body>
</html>

Dann in einer externen .js Datei:
Code: 
function move(x_pos,y_pos)
{
    document.getElementById("bewegung").style.position = "absolute";
    document.getElementById("bewegung").style.left=x_pos+ 'px'; 
    document.getElementById("bewegung").style.top=y_pos+ 'px';

}


Ich bitte um entschuldigung, wenn ein kleiner Fehler beim abtippen geschehen ist. Ich habe das einem größerem Projekt entnommen, damit es ein Minimalbeispiel ist.

Der Fehler ist nun: Der Quellcode funktioniert nicht, solange
HTML: 
<!DOCTYPE html>
eingebunden ist. Sobald ich dies entferne und den Quellcode der .js direkt in die HTML als script einbinde läuft dieser Code. Wo liegt also das Problem mit HTML5 im Zusammenhang mit dem Code?

Ich bin für jede Anregung dankbar :9

Viele Grüße
 
tsseh schrieb:
was verstehst du unter "nur zu teilen"? also nicht die ganze zelle soll den hintergrund bekommen, sondern nur die 1. x%?
Zum Vergrößern anklicken....

Unter teilen verstehe ich: XY % der Zelle ist bspw. rot und Z % derselben ist weiß.



tsseh schrieb:
warum packst du das div nicht einfach in die zelle?
Zum Vergrößern anklicken....

Dann hätte ich ja dasselbe Problem wie oben. Davon abgesehen muss das div mehrere Zellen "überlappen". Dazu möchte ich später dann über die mehreren Zellen einen Text zentrieren. Insgesamt scheint mir das am einfachsten, wenn ich zur Laufzeit ein div erstelle und es positioniere. Nun wollte ich es mit einem div testen, welches bereits existiert und welches ich verschiebe. Dies funktioniert aber leider nicht.


Als Beispiel stelle man sich einen Tagesplan vor. Es sind in den Zellen im Stundentakt die Uhrzeiten von 8-20Uhr abgebildet... Nun möchte ich von 8:30-10Uhr alles markieren und den Termin in die Mitte schreiben. Dann brauche ich von der Zelle von 8Uhr nur die Hälfte färben und alle bis 10Uhr komplett. Die Tabelle im Hintergrund ist eigentlich funktional gesehen nicht allzu wichtig beim derzeitigen Stand, gibt aber eine schöne Optik vor. Für Lösungen um die Tabelle funktional zu nutzen bin ich auch offen, nur wie gesagt scheint mir die div variante erheblich einfacher.
 
gNano schrieb:
Dann hätte ich ja dasselbe Problem wie oben.
Zum Vergrößern anklicken....
du hättest den vortei, dass du das div nicht absolut positionieren müsstest.
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>Bewegtes DIV</title>
    <style>
      table {
        width: 100%;
      }
      td {
        width: 25%;
        height: 25px;
        padding: 0px;
        background-color: white;
      }
      .test1 {
        height: 25px;
        background-color: red;
      }
      .test2 {
        height: 25px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="test1"></td>
        <td><div style="float:left; width:25%;" class="test1"></div><div style="margin-left:25%; float:left; width:50%;" class="test2"></div></td>
        <td class="test2"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

gNano schrieb:
Davon abgesehen muss das div mehrere Zellen "überlappen". Dazu möchte ich später dann über die mehreren Zellen einen Text zentrieren. Insgesamt scheint mir das am einfachsten, wenn ich zur Laufzeit ein div erstelle und es positioniere.
Zum Vergrößern anklicken....
wozu benötigst du dann überhaupt noch die tabelle? auf die kannst du dann ja auch gleich verzichten.

gNano schrieb:
Nun wollte ich es mit einem div testen, welches bereits existiert und welches ich verschiebe. Dies funktioniert aber leider nicht.
Zum Vergrößern anklicken....
sollte aber so funktionieren

gNano schrieb:
Die Tabelle im Hintergrund ist eigentlich funktional gesehen nicht allzu wichtig beim derzeitigen Stand
Zum Vergrößern anklicken....
also überflüssig
 
Vielen Dank für die Hilfen.

Es funktioniert nun tatsächlich. Ich hatte in meiner eigentlichen Datei versehentlich das script vor der "Definition" des div ausgeführt *eyeroll*
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben