cayaphas: div-box innerhalb <td> ausrichten

tach,

ich hab ne tabellen-zelle mit ner variablen höhe, abh. vom content.

Jetzt will ich in der Zelle rechts unten immer ein bild haben, egal wie hoch die zelle ist und zwar genau ausgerichtet am zellenrand. (das bild dient als verzierter rahmen rand).

ich hab versucht mittels css: position, right und bottom eine div box zu erzeugen, die sich immer genau an der <td> größe ausrichtet und dann darin meine bild-div-box zu positionieren.
also sowas wie:

<table><tr><td>
<div style="position:relative; width:100%; height:100%">
 <div style="position:absolute; right:0; bottom:0; background-image ...etc");
</div>
<td><tr><table>
(zw. in der art mehrere versuche mit verschiedenen position attributen und so)

ich hab mit dieser methode irgendwie nichts hingekriegt, da ich entweder probleme mit dem tabellenkontent hab, da er je nachdem wo ich ihn hinsetze die box nicht mehr das ganze <td> ausfüllt oder drüber läuft oder so. wenn ich den kontent innerhalb des divs sezte, passt sich meine tabelle nicht mehr korrekt an usw.

kann mir mal jemand nen anhaltspunkt geben, wie ich sowas machen könnte?

wär echt klasse

  1. Hi,

    ich hab versucht mittels css: position, right und bottom eine div box zu erzeugen, die sich immer genau an der <td> größe ausrichtet

    wieso denn? Die Zelle hat bereits exakt die Größe der Zelle, da brauchst Du kein zusätzliches <div> zu.

    und dann darin meine bild-div-box zu positionieren.

    Das Bild braucht übrigens ebenfalls kein <div>.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. tach

      wieso denn? Die Zelle hat bereits exakt die Größe der Zelle, da brauchst Du kein zusätzliches <div> zu.

      wie kann ich dann darin ein bild in einer div-box positionieren ?

      sorry, ich häte vielleicht sagen sollen wieso ne div box:
      ein entwurf ist da: http://www.detc.de/prinz/entwurf5.htm
      (ist nur ein entwurf bild also kein code)

      da ist rechts unten dieser verschnörkelte rahmen, welches ich als gif drüberlegen wollte, damit man auch "innerhalb" des bildes (also dieser komischen ecke) noch nen content sehen kann. wenn ich es als normales bild einbinde (oder mittels blind tabellen mache), dann hab ich unten bzw. rechts nen sehr breiten rahmen welchen ich nicht mit content füllen kann.
      Die content area ist unterschiedlich hoch somit kann ich diese div-box mit dem rahmen nicht absolut zur linken oberen ecke positionieren.

      deswegen hätte ich gerne ne drübergelegt box, durch welche man beim transparenten gif noch den content sehen kann.

      ich hoffe es ist jetzt verständlicher :-)

      gruss
      caya

      1. Hi,

        wie kann ich dann darin ein bild in einer div-box positionieren ?

        gar nicht, wenn kein <div> mehr da ist. Warum willst Du aber unbedingt auf ein solches bestehen?

        sorry, ich häte vielleicht sagen sollen wieso ne div box:

        Das weiß ich auch jetzt noch nicht. Aber:

        ein entwurf ist da: http://www.detc.de/prinz/entwurf5.htm

        Da sind keinerlei tabellarische Daten zu sehen. Es existiert somit keine Rechtfertigung für eine Tabelle.

        da ist rechts unten dieser verschnörkelte rahmen, welches ich als gif drüberlegen wollte, damit man auch "innerhalb" des bildes (also dieser komischen ecke) noch nen content sehen kann. wenn ich es als normales bild einbinde (oder mittels blind tabellen mache), dann hab ich unten bzw. rechts nen sehr breiten rahmen welchen ich nicht mit content füllen kann.

        Nö. Erstens gibt es Hintergrundgrafiken, zweitens stört sich *kein* Element an einer absoluten Positionierung.

        deswegen hätte ich gerne ne drübergelegt box, durch welche man beim transparenten gif noch den content sehen kann.

        Ich sehe immer noch nicht, warum Du da ein <div> brauchst.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. tach ..

          Nö. Erstens gibt es Hintergrundgrafiken, zweitens stört sich *kein* Element an einer absoluten Positionierung.

          ja genau das will ich ja rauskriegen:
          es muss doch die möglichkeit geben ein <td> als elternelement zu handhaben und darin dann IRGENDWAS (sei es div oder img oder sonstwas) absolut zu positionieren. also ich habs (mit meinem bescheidenen CSS verständnis) so versucht:

          <table><tr>
          <td style="position:relative;">
            <img src="..." style="position:absolute; right:0; bottom:0 usw.">
          </td>
          </tr></table>

          das funtioniert nur im IE.. Opera und firefox behandeln nicht das <td> als elternelement sondern den <body>. somit schieben sie das image nicht an den rechten unteren rand des <td> sondern vom fenster.

          und nur das will ich ja rauskriegen: was machich falsch, das opera und firefox (und dann hoffentlich auch andere browser) das <td> als elternelement nehmen an dem ich dan IRGENDETWAS absolut positionieren kann?

          (ich habs halt zuerst mit divs versucht nur um für mich eine zunächst verständnisvollere struktur zu kriegen, was ich ja aber einsehe, dass es schwachsinnig war, sorry)

          gruss
          caya

          1. Hi,

            das funtioniert nur im IE.. Opera und firefox behandeln nicht das <td> als elternelement sondern den <body>.

            selbstverständlich handhaben auch Oper und Firefox das <td> als Elternelement. Nur nicht als jenes, an dem sich die absolute Positionierung ausrichtet. Wo hast Du den Grund für dieses (korrekte) Verhalten nachgeschlagen, und welche Konsequenzen hast Du daraus - auch im Hinblick auf mein vorheriges Posting - gezogen?

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. hi,

              das funtioniert nur im IE.. Opera und firefox behandeln nicht das <td> als elternelement sondern den <body>.

              selbstverständlich handhaben auch Oper und Firefox das <td> als Elternelement. Nur nicht als jenes, an dem sich die absolute Positionierung ausrichtet.

              und warum nicht?

              gruß,
              wahsaga

              --
              "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
              1. Hi,

                selbstverständlich handhaben auch Oper und Firefox das <td> als Elternelement. Nur nicht als jenes, an dem sich die absolute Positionierung ausrichtet.
                und warum nicht?

                weil es dazu eine von static unterschiedliche position-Angabe besitzen müsste, was aufgrund seines display-Wertes nicht der Fall ist.

                Cheatah

                --
                X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes
                1. Hi,

                  selbstverständlich handhaben auch Oper und Firefox das <td> als Elternelement. Nur nicht als jenes, an dem sich die absolute Positionierung ausrichtet.
                  und warum nicht?

                  weil es dazu eine von static unterschiedliche position-Angabe besitzen müsste, was aufgrund seines display-Wertes nicht der Fall ist.

                  Zitat aus cayaphas Posting: <td style="position:relative;">

                  Könntest Du bitte die Stelle des CSS 2.0 oder 2.1 Standards zitieren, die festlegt, daß display:table-cell im Widerspruch zu position steht?
                  http://www.w3.org/TR/REC-CSS2/visuren.html#q24 bzw. http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo stehen dem jedenfalls nicht entgegen, bei den applies-to Angaben zu position bzw. display gibt es auch keine derartige Einschränkung

                  cu,
                  Andreas

                  --
                  Warum nennt sich Andreas hier MudGuard?
                  Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                  1. Hi,

                    Könntest Du bitte die Stelle des CSS 2.0 oder 2.1 Standards zitieren, die festlegt, daß display:table-cell im Widerspruch zu position steht?
                    http://www.w3.org/TR/REC-CSS2/visuren.html#q24 bzw. http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo stehen dem jedenfalls nicht entgegen, bei den applies-to Angaben zu position bzw. display gibt es auch keine derartige Einschränkung

                    Nachtrag:
                    http://www.w3.org/TR/CSS21/tables.html#q7 bzw. http://www.w3.org/TR/REC-CSS2/tables.html#q7
                    sagen sogar:
                    Note. Table cells may be positioned, but this is not recommended: absolute and fixed positioning, as well as floating, remove a box from the flow, affecting table size.

                    bzw.

                    Note. Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow, affecting table alignment.

                    cu,
                    Andreas

                    --
                    Warum nennt sich Andreas hier MudGuard?
                    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                  2. Hi,

                    Könntest Du bitte die Stelle des CSS 2.0 oder 2.1 Standards zitieren, die festlegt, daß display:table-cell im Widerspruch zu position steht?

                    http://www.w3.org/TR/CSS21/visuren.html#propdef-position
                    "The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."

                    Bei einem undefinierten Verhalten ist _jede_ Interpretation richtig (wenn auch in Zukunft potenziell falsch). Auch, die Angabe zu ignorieren. Der Standard definiert da zwar keinen Widerspruch, aber ich habe auch keinen solchen postuliert - sondern lediglich die (offensichtliche) Tatsache geäußert, dass der Wert der position-Eigenschaft standardkonform nicht von static unterschiedlich _ist_.

                    http://www.w3.org/TR/REC-CSS2/visuren.html#q24 bzw. http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo stehen dem jedenfalls nicht entgegen,

                    Nein, aber sie zeigen auch keinen Fehler in Gecko auf. Die Aussagen beim W3C lassen sich als MAY oder sogar SHOULD NOT interpretieren, auf keinen Fall aber als MUST oder auch nur SHOULD. Wie sich die Gecko-Entwickler entschieden haben, ist IMHO ziemlich klar ersichtlich.

                    Cheatah

                    --
                    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                    X-Will-Answer-Email: No
                    X-Please-Search-Archive-First: Absolutely Yes