"Dynamische" Layerpositionierung /-größe?

Status
Nicht offen für weitere Antworten.
Avariel

Avariel

Erfahrenes Mitglied
Hallo zusammen, folgendes Problem:

Ich habe ein Hintergrundbild und will genau darüber einen Layer in einer bestimmten Größe haben, wo der Contend drinstehen soll. Das Problem dabei:
Da sich die Position des Layers am oberen und linken Rand orientiert, verschiebt sich der Layer sobald sich der Rand verschiebt, also z.B. wenn ich die Größe des Browserfensters verändere.
Mir ist gesagt worden da könnte man vielleicht mit JavaScript was machen, irgendwas mit window.size, durch zwei teilen lassen für den Mittelpunkt...usw. Aber wie funktioniert das dann genau?
 
Hi Avariel,

Bin jetzt etwas verwirrt :) Wenn du das Browserfenster in der Größe änderst, dann soll das JS den neuen "Rand" berechnen - dazu bräuchte man aber einen OnBrowserResize Handler - den es aber imo nicht gibt. Das einzig was mit JS gehen würde, wäre den Layer bei verschiedenen Auflösungen zu Zentieren (oder anders ausrichten) - aber halt nicht wenn die Seite schon geladen wurde...

ciao
 
(document.body.clientwidth-layerwidth)/2 und selbes mit height.
meintest du das?

und daraus machst du ne funktion die von <body onResize="f()" aufgerufen wird. onResize ist aber deprecaded (oder wies auch immer geschrieben wird :))
 
Hmm..ok ich hab das vorläufige Bild mal angehängt. Was ich will ist halt das der Text innerhalb des Rahmens erscheint. Wenn ich aber einfach so nen Layer dort positionier, und dann die Screengröße verändere, verschiebt sich der Layer und der Text steht nicht mehr da wo er soll. Das mit dem Javascript war jetzt nur so ne Ahnung, ich bin für jegliche Lösungen offen :)

@Gugi: Mein Wissen über Javascript kann man leider noch auf nem Fingernagel unterbringen - dein Post überfordert mich n bissl ;)
 

Anhänge

  • test.jpg
    test.jpg
    24,5 KB · Aufrufe: 44
hmm, hab dein problem immer noch nicht so richtig geschnallt.

mehrere möglichkeiten meiner interpretation/vorschläge:

Du hast einen Hintergrund. im body? kannst ihn ja in den layer rein tun. dann ist der text immer über dem hintergrund.

warum positionierst du den layer nicht absolut? also mit fixen angaben. dann verschiebt er sich auch nicht.

oder möchtest du, dass er grösser wird, wenn du das fenster vergrösserst? dann kannst du mit prozentangaben arbeiten.

oder möchtest du, dass der layer immer in der mitte des bildes ist? das kannst du mit javascript lösen. aber der hintergrund ist ja ab einer bestimmten grösse (oder kleine? :)) nicht mehr zu sehen, dann ist dein bild auch nicht mehr in der mitte.

also für die letzte möglichkeit musst du folgenden code verwenden:
Code: 
<html>
<head>

<script language="Javascript" type="text/javascript">
<!--
function positioniere() {
var mylayer = document.getElementById("layer1");

links = (document.body.clientwidth-mylayer.style.width)/2;
oben = (document.body.clientheighth-mylayer.style.height)/2; 

mylayer.style.left=links;
mylayer.style.top=oben;

}

//-->
</script>
</head>
<body onResize="javascript:positioniere()">

<div id="layer1" style="position:absolute; left: 10px; top:20px; width:100px; height:100px;">hallo ich bein ein lustiger text<br>
buahahahahahha lol rofl gg g smile</div>
</body>
</html>

leider geht er ned :) habs nur schnell hingekritzelt aber da ist irgendein problem mit style.left. vielleicht findest du es ja raus. ich hab nämlich jetzt keine zeit mehr. muss weg:)
cu
 
genau, mach doch einfach

<div style="background: url(blah.gif);">Inhalt</div>

Dann brauchste auch nicht mit JS drumrum arbeiten (und damit Leuten ohne JS den Inhalt vorenthalten ;))
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück