Anzeige

Textfeld (transparent) positionieren

Textfeld (transparent) positionieren | PSD-Tutorials.de

Erstellt von fraiser, 05.01.2009.

  1. fraiser

    fraiser Nicht mehr ganz neu hier

    Dabei seit:
    07.05.2005
    Beiträge:
    114
    Textfeld (transparent) positionieren
    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
     
    #1      
  2. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    Textfeld (transparent) positionieren
    AW: Textfeld (transparent) positionieren

    Code (Text):
    1. position: absolute
    2. [margin-]top: [xx]px;
    3. [margin-]right: [xx]px
    4. [margin-]bottom: [xx]px
    5. [margin-]left; [xx]px
    6. padding: 0 0 0 0; /*top right bottom left*/
    7.  
    8. position:relative;
    9. margin: 0 0 0 0; /*top right bottom left*/
    10. 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.
     
    #2      
  3. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Textfeld (transparent) positionieren
    AW: Textfeld (transparent) positionieren

    PS-slices sind in (x)html/css nicht bekannt.
    dein Element kannst du über
    Code (Text):
    1.  
    2. #meinElement{
    3.      position: absolute;
    4.      top: 50px;
    5.      left: 50px;
    6.      /* oder right: bzw bottom: */
    7. }
    8.  
    pixelgenau ausrichten.

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

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Textfeld (transparent) positionieren
    AW: Textfeld (transparent) positionieren

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

    Mit Margin kann man das ganze auch Pixelgenau ausrichten...
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Textfeld (transparent) positionieren
    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.
     
    #5      
  6. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Textfeld (transparent) positionieren
    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 ;)
     
    #6      
  7. fraiser

    fraiser Nicht mehr ganz neu hier

    Dabei seit:
    07.05.2005
    Beiträge:
    114
    Textfeld (transparent) positionieren
    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. ;)
     
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Textfeld (transparent) positionieren
    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.
     
    #8      
  9. fraiser

    fraiser Nicht mehr ganz neu hier

    Dabei seit:
    07.05.2005
    Beiträge:
    114
    Textfeld (transparent) positionieren
    AW: Textfeld (transparent) positionieren

    Ich habe die Lösung, die ich brauchte.

    Beispielsweise:
    Code (Text):
    1. <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.
     
    #9      
  10. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Textfeld (transparent) positionieren
    AW: Textfeld (transparent) positionieren

    Wie sieht denn dein Design aus?

    Und passt deine absolute Lösung auch bei unterschiedlichen Auflösungen?
     
    #10      
  11. fraiser

    fraiser Nicht mehr ganz neu hier

    Dabei seit:
    07.05.2005
    Beiträge:
    114
    Textfeld (transparent) positionieren
    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. :(
     
    #11      
  12. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Textfeld (transparent) positionieren
    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...
     
    #12      
  13. fraiser

    fraiser Nicht mehr ganz neu hier

    Dabei seit:
    07.05.2005
    Beiträge:
    114
    Textfeld (transparent) positionieren
    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:
    Code (Text):
    1. <td
    2.            background="Bilder/bild01.jpg" width="364" height="279" alt="">
    3. <div style="position:relative;left:10;top:-120">Hallo</div>
    4. </td>
    Hab es schon mit verschiedenen Auflösungen getestet und es funktioniert.
     
    #13      
  14. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Textfeld (transparent) positionieren
    AW: Textfeld (transparent) positionieren

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

    fraiser Nicht mehr ganz neu hier

    Dabei seit:
    07.05.2005
    Beiträge:
    114
    Textfeld (transparent) positionieren
    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. :D
     
    #15      
x
×
×