Textfeld (transparent) positionieren

[fraiser]

Hi,

ich habe mal eine Frage, da ich ein transparentes Textfeld (keins zum eingeben, sonder nur zum anzeigen) basteln möchte, welches einen bestimmten Text zeigt.
Am besten erscheint mir die Methode mit div-Layern, jedoch habe ich ein Problem beim Positionieren von selbigen, da ich nirgends Informationen finden konnte, wie man die Position genau bestimmt. Grobe Angaben, wie "center", "left" & "right" kommen für mich leider nicht in Frage, da mein Design asymmetrisch ist.
Kann man die Positionsdaten mit irgendwelchen Befehlen eingeben oder muss ich die div-Position ggf. über die altbekannten PS-Slices definieren?

Vielen Dank und ein verspätetes frohes Neujahr!
MfG
fraiser

 

[leohh]

AW: Textfeld (transparent) positionieren

position: absolute
[margin-]top: [xx]px;
[margin-]right: [xx]px
[margin-]bottom: [xx]px
[margin-]left; [xx]px
padding: 0 0 0 0; /*top right bottom left*/

position:relative;
margin: 0 0 0 0; /*top right bottom left*/
padding: 0 0 0 0; /*top right bottom left*/

Die Werte center, left, right sind eigentlich nur noch bei der Grobpositionierung von Bildern oder zur Textausrichtungen erlaubt & natuerlich beim float (left, right). Berichtigt -bzw. verbessert mich wenn ich hier unvollstaendig bin bzw. etwas vergessen habe.

 

[sokie]

AW: Textfeld (transparent) positionieren

Kann man die Positionsdaten mit irgendwelchen Befehlen eingeben oder muss ich die div-Position ggf. über die altbekannten PS-Slices definieren?

PS-slices sind in (x)html/css nicht bekannt.
dein Element kannst du über

#meinElement{
     position: absolute;
     top: 50px;
     left: 50px;
     /* oder right: bzw bottom: */
}

pixelgenau ausrichten.

darüber hinaus sind auch relative angaben wie zB "50%" möglich.

 

[Top_Gun]

AW: Textfeld (transparent) positionieren

Ähm, warum muss es gleich eine absolute Positionierung sein?

Mit Margin kann man das ganze auch Pixelgenau ausrichten...

 

[sokie]

AW: Textfeld (transparent) positionieren

ja sicher kann man das
wenn ich 'layer' höre/lese und dann noch in verbindung mit transparenz, denke ich als erstes, dass das irgendwie über anderen Elementen liegen soll...
vielleicht schreibt uns fraiser noch etwas dazu.

 

[Top_Gun]

AW: Textfeld (transparent) positionieren

Ein Element in einem anderen Element, egal wie gefloatet oder wieviele Elemente noch dazwischen liegen, liegt trotzdem über dem ursprünglichen Element.
Und meiner Meinung nach sollte eine absolute Positionierung (bis auf wenige Ausnahmen) ebenso wie eine Layouttabelle der aller letzte Hinweis sein

 

[fraiser]

AW: Textfeld (transparent) positionieren

Oh, erstmal vielen Dank für die vielen Antworten!
Mit Layer war tatsächlich gemeint, dass ein Text auf eine Hintergrundgrafik "gelegt" wird.
Ich werde Eure Vorschläge mal ausführlich testen und mich dann melden, falls es klappt ... oder auch nicht.

 

[Top_Gun]

AW: Textfeld (transparent) positionieren

Öhm, alleine ein div besteht, wenn man es richtig betrachtet und CSS verwendet aus 2 Layern. Um also ein Textfeld über ein Hintergrund zu legen ist eine Arbeit mit absoluter Positionierung, dem Z-Index oder irgendeiner anderen ähm Schummelei nicht nötig.

 

[fraiser]

AW: Textfeld (transparent) positionieren

Ich habe die Lösung, die ich brauchte.

Beispielsweise:

<div style="position:absolute;top:400;left:390;width:200;height:200;overflow:auto">Text</div>

Danke euch allen. Habe mich nur durch Eure Beispielcodes orientieren können, da mein wissen in xhtml und css quasi bei null liegt, da ich mich früher nur in der Schule mit "normalem" html befasst habe.

 

[Top_Gun]

AW: Textfeld (transparent) positionieren

Wie sieht denn dein Design aus?

Und passt deine absolute Lösung auch bei unterschiedlichen Auflösungen?

 

[fraiser]

AW: Textfeld (transparent) positionieren

Du hast recht:
Mit einer anderen Auflösung ändert sich die Position des Feldes.
Wie mache ich das anders?
So ein dummes billiges Textfeld kann doch nicht soviele Probleme bereiten.

 

[Top_Gun]

AW: Textfeld (transparent) positionieren

Ich möchte nicht sagen "Ich habs gesagt" aber das habe ich ^^

Also du musst von der absoluten Positionierung weg und das ganze relativ mit Margin ausrichten. Wenn du uns den Quelltext zeigst, kann man dir dabei helfen...

 

[fraiser]

AW: Textfeld (transparent) positionieren

Jetzt habe ich es endgültig raus.
Ich musste es in die Tabelle einfügen und natürlich (wie du bereits sagtest) mit der relativen Positionsangabe:

<td
	       background="Bilder/bild01.jpg" width="364" height="279" alt="">
<div style="position:relative;left:10;top:-120">Hallo</div>
</td>

Hab es schon mit verschiedenen Auflösungen getestet und es funktioniert.

 

[Top_Gun]

AW: Textfeld (transparent) positionieren

Ähm tut mir leid, ich dachte du arbeitest mit Divs... Warum hast du dann da eine Tabelle?

 

[fraiser]

AW: Textfeld (transparent) positionieren

Das sind die Tabellen, die Photoshop anglegt, wenn man für "Web speichern..." wählt (jedoch von mir etwas modifiziert).
Hab ich mich vielleicht unklar augedrückt, aber ich erwähnte ja, ob man das auch mit den PS-slices regeln kann.
Ich werde ganz sicher kein ganzes Design einzeln und per Hand mit divs erstellen.
Dafür bin ich zu faul und zu unerfahren.