Fragen und Antworten » Mit html positionieren

26.07.2015 00:00

Schippo
#1 Mit html positionieren

Hallo liebe Helferlein @all,

habe mich in den letzten Wochen viel mit html befaßt, weiß, daß html nicht zum Essen ist und konnte vieles umsetzen, aber jetzt stoße ich an meine Grenzen. Sicher gibt es einige html-Freaks unter Euch, die mir weiterhelfen können.

In meinem Hundeforum möchte ich eine Aktion "Mehr Herz für Tiere" ins Leben rufen. Die Seite ist auch mit Grafiken, Video über mißhandelte Tiere und Kommentarfunktion fast fertig (http://dogs24.xobor.de/page-645566-4.html). Doch an dem wichtigsten Teil scheiter ich trotz vielem Lesen, und zwar das Positionieren bzw. Formieren einer animierten Kerze zu einer Lichterkette. Die flackernde Kerze (float-Objekt) befindet sich an einer bestimmten Stelle der Seite, wo sie auch bleiben soll. Der Besucher soll bei Mausklick eine Kopie dieser Kerze ziehen und diese an einer x-beliebigen Stelle der Seite positionieren können, so daß durch das Aneinanderreihen der Kerzen eine endlose Kette entsteht. Unter dem Freiraum für die Kerzen befindet sich dann die Kommentarfunktion. Diese müßte nach Möglichkeit automatisch auf der Seite nach unten wandern, je länger die Kette wird. Allerdings kann ich das auch manuell regeln.

Ich hoffe sehr, daß mir hier jemand weiterhelfen kann und es nicht zu aufwendig ist. Sag jetzt schon mal Danke für jegliche Hilfe.

Viele Grüße
Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden

#2

26.07.2015 15:05 (zuletzt bearbeitet: 26.07.2015 15:06)

Eru
#2 RE: Mit html positionieren

Eru

Hajo,

Mit dem alten html ist Drag&Drop wohl eher nicht vorgesehen (das wär hierfür ein google-stichwort), mit html5 könnts inzwischen möglich sein. Da hat ich mal eine Bewerbungsseite gesehen, die aussah wie ein Mario-spiel, sodass beim Runterscrollen eine Spielfigur nach rechts lief und sprang und kletterte und sich hochziehen ließ.. und auch anderes eindrucksvolles Zeug. Html5 ist ein wenig modern und da kenn ich mich nicht so aus, mmh

Wenns mit altem Html gehen sollt, müssten wohl CSS-Anweisungen wie :onClick (oder wie die heißen) dabei sein, also die mit den Doppelpunkten.

Ich hoffe das war hilfreich..

lg

Standard-Template - 58757.dynamicboard.de

Antworten

Beitrag melden

#3

26.07.2015 16:23

Schippo
#3 RE: Mit html positionieren

Schippo

Hallo Eru,

danke für Deine Tipps. Hab schon jede Menge gegoogelt, aber leider ohne Erfolg. Hab nur etwas über Positionierung gefunden, aber das hat mich nicht weitergebracht. Aber Du sagst es: "Drag&Drop" wäre der richtige Ausdruck dafür, mir haben hier die richtigen Worte gefehlt. Nur mit Drag&Drop verschiebt man ja auch das Mutterobjekt (denke ich mal) und das soll ja erhalten und an seinem Platz stehen bleiben. Aber das müßte m.E. auch gehen, daß nur eine Kopie gezogen wird und diese per Drag&Drop dann x-beliebig abgelegt wird. Ich werde mal nochmals im Internet stöbern.

LG Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden

#4

26.07.2015 16:41

( gel�scht )
#4 RE: Mit html positionieren

Gast

( gel�scht )

... ich meine , vor längerer Zeit mal was darüber gelesen zu haben und denke, es hatte was mit "copy" "paste" zu tun und mit Platzhaltern, die man für die Postionen der gezogen Objekte festlegen muss, .. weiß es aber nicht mehr genau, da ich dann daran nicht wirklich interessiert war.

Antworten

Beitrag melden

#5

26.07.2015 16:43

Schippo
#5 RE: Mit html positionieren

Schippo

Hallo Eru,

mit den richtigen Worten wird man auch im Netz fündig. Du hattest recht mit html5 und so wie's aussieht, ist es eine ganz einfache Geschichte.

Nochmals danke für Deinen Tipp.

LG Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden

#6

26.07.2015 17:19

Eru
#6 RE: Mit html positionieren

Eru

Freut mich. :)

lg

Standard-Template - 58757.dynamicboard.de

Antworten

Beitrag melden

#7

26.07.2015 18:13

Schippo
#7 RE: Mit html positionieren

Schippo

Hallo Frank,

danke für Deine Antwort, aber ich glaube, den Denkanstoß, den Eru gegeben hat, war genau der Richtige - mit Drag&Drop. Hab es zwar nur erst einmal flüchtig gelesen, aber so wie es sich liest, scheint es denkbar einfach zu sein. Bin nur gerade dabei, eine Grafik zu überarbeiten, dann probiere ich es aus. Wenn es geklappt hat, gebe ich Feedback.

LG Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden

#8

26.07.2015 21:30

Schippo
#8 RE: Mit html positionieren

Schippo

Hallo Ihr lieben Tüftler,

noch funktioniert die Geschichte mit der Kerze per Drag + Drop nicht. Wäre ja auch zu schön gewesen, wenn mal etwas auf Anhieb klappen würde. Der mögliche Fehler hierfür könnte in der ersten Zeile des Seitenquelltextes liegen. Hier steht

1
 
1<!DOCTYPE html>

Hier muß aber stehen

1
 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Wie kann ich das ändern und kann ich das überhaupt so ohne Weiteres ändern?

Außerdem mußte ein Script im Head eingebaut werden. Dieses habe ich direkt in den Quelltext der betreffenden Seite geschrieben und eine CSS-Notierung ebenfalls im Kopfbereich dieser Seite platziert. Ich hoffe, daß das richtig ist, oder?

Hoffe sehr, daß Ihr mir helfen könnt.

LG Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden

#9

26.07.2015 21:58 (zuletzt bearbeitet: 26.07.2015 21:58)

Olaf
#9 RE: Mit html positionieren

Ol

Olaf

Ich nehme an,das der Doctype für Dein Vorhaben erstmal unwichtig ist.
Wie sieht denn Dein Script aus?
Im Head kannst Du im Adminmenü unter "Layout→Kopf- & Fußzeile→Kopfzeile" etwas abspeichern.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#10

26.07.2015 22:50

Schippo
#10 RE: Mit html positionieren

Schippo

Hallo Olaf,

danke, daß Du Dich gemeldet hast. Hab das Script jetzt im Headbereich der Kopfzeile eingebunden, die CSS-Anweisung unter eigenem CSS-Code und alles aus der Seite selbst gelöscht. Natürlich bis auf den html-code im Body der Seite. Funktionieren tut's trotzdem nicht. Der Anbieter des Tutorials weist ausdrücklich darauf hin, daß man bei fehlender Funktionalität den Doctyp überprüfen soll. Das Script sieht wie folgt aus:

<script type="text/javascript" language="JavaScript">
<!-- Begin

// Created by: elouai.com
// mod: W. jansen
var ie=document.all;
var nn6=document.getElementById && !document.all;
var verschieben=false;
var x,y;
var dobj;

function movemouse(e)
{
if (verschieben)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
verschieben = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("verschieben=false");

// End →
</script>

Und so die CSS-Notierung:

<style type="text/css">
<!--

.dragme {
position: relative;
}

→
</style>

Ich kann hiermit leider nicht viel anfangen. Noch nicht!

Gruß Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden

#11

26.07.2015 23:33

Eru
#11 RE: Mit html positionieren

Eru

Die DOCTYPE-Zeile findest du in den Templates unter 'Obere Leiste'. Frohes Schaffen. :)

lg

Standard-Template - 58757.dynamicboard.de

Antworten

Beitrag melden

#12

26.07.2015 23:41 (zuletzt bearbeitet: 26.07.2015 23:42)

( gel�scht )
#12 RE: Mit html positionieren

Gast

( gel�scht )

.. zum javascript kann ich leider nix sagen, da fehlen mir die Kenntnisse , aber aus der CSS würde ich auf jeden Fall die HTML Style- Anweisung rausnehmen, die gehört da nicht hin. Nur die Klasse , die Du festlegst.

Antworten

Beitrag melden

#13

27.07.2015 20:14

Olaf
#13 RE: Mit html positionieren

Ol

Olaf

Mit jQuery UI "draggable" kannst Du Dein Vorhaben viel einfacher realisieren,als mit normalen Javascript.
Hier ein Script in jQuery,mit den Du Deine Kerze verschieben kannst:

1
2
3
4
5
6
7
8
9
10
11
 
<script>
$("div").hover(function(event) {
$("#verschieben").draggable({
cursor: "move",
opacity: 0.7,
scroll: false,
})  
})
</script>  
<div id="verschieben"><img src="http://www.4-wände.de/hpfixseparat_blumenkerze.gif"></div>
 
 

Kannst Dich ja mal damit beschäftigen.

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#14

27.07.2015 20:49

( gel�scht )
#14 RE: Mit html positionieren

Gast

( gel�scht )

... wenn ich das richtig verstanden habe , sollte sich doch aber die Kerze an diversen postionen vervielfältigen lassen, nicht "nur" draggable sein, oder ?

Antworten

Beitrag melden

#15

27.07.2015 20:52

Schippo
#15 RE: Mit html positionieren

Schippo

Hallo Olaf,

danke Dir sehr für Deine Mühe. Werde es gleich testen und gebe dann Feedback. Ich gehe mal davon aus, daß ich das Script auch im Head-Bereich einbinden muß, oder? Ich probiere es einfach aus.

Gruß Schippo

http://www.dogs24.eu/
http://www.dreamsky.de/

Gaia Template

Antworten

Beitrag melden