CSS div Container über content

[nissl]

Hallo,

folgendes Problem:

Ich habe eine Seite mit einer Tabelle in der Daten stehen.
Etwa so

<table>
<tr><td>1234</td><td><img src="images/1234.jpg"/></td></tr>
<tr><td>1234</td><td>5678</td></tr>
</table>

Nun hätte ich gerne, dass ein (transparentes) bild mit einem schriftzug drüber liegt, etwa ('Muster' oder 'Outdated')
Folgenden ansatz:

<div style="background-image: url(images/outdated.png); postition: absolute)
<table>
<tr><td>1234</td><td><img src="images/1234.jpg"/></td></tr>
<tr><td>1234</td><td>5678</td></tr>
</table>
</div>

Das bild wird auch perfekt eingefügt, und da es von der Grösse her die Tabelle direkt abdeckt passt das auch soweit.
Nur, das jpg liegt immer im Vordergrund, ob wohl ich will, dass die schrift in dem
Bild drüber reichen sollte und auch drüber liegen soll.

Eine idee wie ich das erzwingen kann, dass der div container an oberster stelle ist?

 

[Xanta]

Stell es doch als Backgroundimage rein?

Und tipp, lass Tabellen weg und arbeite mit DIVs

 

[nissl]

Hm versteh ich nicht, ich hab es doch als background image?

Naja die Tabels brauch ich in dem fall erstmal, geht das dennoch?

 

[Reglohln]

Und tipp, lass Tabellen weg und arbeite mit DIVs

Warum sollte er Tabellen für tabellarische Daten weglassen?


@TE: Setz das background-image mal in die Zelle ansich, also in <td>.

 

[nissl]

Danke, das versuche ich mal.

mit background-size: 100px 255px; hält es sich nicht wirklich dran, die td hat width: 100px height: 255px

Schon strange dieses CSS zeuch

 

[Oraclefile]

Soweit ich das verstehe, ist das background-image richtig positioniert, nur sitzt es unter der Tabelle? Dann dem Div einfach mal zusätzlich zum position absolute "z-index: 1" geben.

 

[nissl]

das mit z-index:1 hat komischerweise keine auswirkung.

 

[Oraclefile]

Okay, vielleicht habe ich es auch falsch verstanden. Du schreibst:

Nur, das jpg liegt immer im Vordergrund, ob wohl ich will, dass die schrift in dem
Bild drüber reichen sollte und auch drüber liegen soll.

Soll das Bild im Vordergrund sein, oder die Tabelle?

 

[nissl]

Also in der Tabelle ist ja ein bild, aber das soll sich von dem bild in dem div überlagern lassen, im moment liegt die Tabelle bzw das bild in der tabelle über der schrift in dem div-bild

 

[Speedy.]

z-index ist dein Freund. Gib dem Bild in der Tabelle (oder meinetwegen der gesamten Tabelle) einen niedrigeren z-index als dem Bild oberhalb deiner Tabelle. Damit bringst du es in den Vordergrund.

 

[Oraclefile]

Das Problem bei dir ist, dass die Tabelle sich in dem Div drinnen befindet, das Div muss aber vorher geschlossen sein. Abgesehen davon hast du zumindest hier in deinem Post einige Rechtschreibfehler, hoffe die sind in deinem Original Code nicht auch vorhanden, das könnte sonst auch ein Grund dafür sein, dass es nicht funktioniert.

So funktioniert es bei mir:

<div style="background-image: url(images/outdated.png); position: absolute; z-index: 1; width: 200px; height: 200px"></div>
<table>
<tr><td>1234</td><td><img src="images/1234.jpg"/></td></tr>
<tr><td>1234</td><td>5678</td></tr>
</table>

 

[nissl]

also z-index hat keine auswirkung, hier mal der codeschnipsel

<div style="background-image: url(images/outdated.png); postition: absolute; z-index: 10; ">
<table style="text-align: left; height: 257px;" border="0" width="546">
<tbody>
<tr>
<td style="width: 601px; text-align: left; vertical-align: top; height: 255px;">12345</td>
<td style="z-index: 0;"><img src="images/1234.jpg" style="z-index:0" /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>1234</td>
<td>5678<br /></td>
</tr>
<tr>
<td>Wohnort:</td>
<td>Waldshut-Tiengen</td>
</tr>
</tbody>
</table>
</div>

Bisschen unordentlich, vielleicht hätte ich das auch eingangs schon erwähnen sollen;

Ich versuche das ganze an einem Joomla 1.5. Vielleicht hat das Template einen CSS für die div's der das überlagert ?

jedenfalls hat der z-index keine auswirkung. =((

Schliesse ich den div gleich wieder wird er von dem tollen editor ausgekürzt und wieder rausgenommen

 

[Oraclefile]

Der z-index hat nur Wirkung auf Elemente die absolute positioniert sind, in dem Fall das div. Dadurch dass die Table allerdings ein Kind Element des divs ist, übernimmt sie natürlich auch den z-index. Eine Möglichkeit wäre wie gesagt das div seperat zu behandeln und als inhalt &nbsp; reinzusetzen, damit Joomla es nicht löscht oder alternativ die table auch absolut zu positionieren und ihr einen z-index zu geben

 

[Speedy.]

Jetzt verstehe ich erst dein Problem...
Das wird mit background-image so nicht gehen, denn wie der Name sagt handelt es sich um den Hintergrund... In meinen Augen hast du zwei Möglichkeiten. Entweder legst du per img-Tag ein Bild oberhalb der Tabelle und positionierst es so, dass es die Tabelle überdeckt.

Die andere Möglichkeit wäre, mit CSS3 Pseudoselektoren zu arbeiten (siehe Link). So kannst du per CSS ein Link über die Tabelle legen, welches auch die Bilder überlagert.

http://jsfiddle.net/2SYgG/

 

[Daaron]

Der z-index hat nur Wirkung auf Elemente die absolute positioniert sind, in dem Fall das div.

Nicht ganz: z-index wirkt auf alles, was nicht "static" (der Default-Wert von position) ist.... also auch relative oder fixed.

Aber ja, es liegt hier an der Struktur mit <div><table>...</table></div>.
Und ja, korrekt wäre, der Table einen negativen Z-Index sowie position:relative zu geben.

 

[nissl]

N
Und ja, korrekt wäre, der Table einen negativen Z-Index sowie position:relative zu geben.

Das hab ichs chon versucht, aber dann schiebt es mir die tabellen komisch zusammen, wahrscheinlich weil alle oben links anfangen wollen.. total zum ausflippen.

Entweder legst du per img-Tag ein Bild oberhalb der Tabelle und positionierst es so, dass es die Tabelle überdeckt.

Die andere Möglichkeit wäre, mit CSS3 Pseudoselektoren zu arbeiten (siehe Link). So kannst du per CSS ein Link über die Tabelle legen, welches auch die Bilder überlagert.

http://jsfiddle.net/2SYgG/

Also den Image-Tag hab ich schon versucht, dann kommt brav das bild, und dann die Tabelle, nichts von überlagern, egal wo ich den div-tag schliesse.

Den CSS3 kram schau ich mir parallel auch noch an, aber das muss doch gehen... hatte mir das echt einfach vorgestellt. Das zeug ist einfach zu unlogisch für mich...

 

[Daaron]

Eigentlich ist CSS recht logisch aufgebaut....
Wahrscheinlich hast du allerwildeste Positionierungen drin, oder so einfaches Zeug wie "width" vergessen.

 

[nissl]

Na klar, das ist ein Joomla, schrecklich wenn man da bisschen mehr machen will.

Ich will auch davon weg, aber fürs erste sollte ich das jetzt mal hinbekommen.

Jetzt hab ich was hinbekommen, hab die Tabellen verwurstet und absolute gesetzt, jetzt liegt das bild tatsächlich drüber.

Aber obwohl es durchsichtig ist, verschwindet der Hintergrund vom Template, aber nicht der hintergrund im Body, sondern der vom content... schrecklich..

 

[Daaron]

Na klar, das ist ein Joomla, schrecklich wenn man da bisschen mehr machen will.

Quatsch. Joomla ist eines der besseren quelloffenen CMS. Das ist ein typisches Anwenderproblem. Ein paar kleine aber gut platzierte CSS-Klassen nebst guter Deklaration, Problem gelöst...
Ideallösung ist :before/:after...

 

[nissl]

Ja hast auch wieder recht, aber die CSS von den Joomla Templates sind recht verschachtelt und daher echt schwer anzupassen.

Ich habe es aber nun hinbekommen. Die lösung war letzten endes ziemlich einfach, wie beiden tabellen zu einer zusammengefasst.

Nicht absolute angegeben dann liegt die grafik schön drüber, es sieht so aus wie ich das will.
Wenn ich absolute angebe, verschwindet warum auch immer der div der den hintergrund stylen soll.

Naja. Danke für eure Tips =)