CSS div Container über content

nissl

Lieutenant
Dabei seit
Sep. 2008
Beiträge
1.015
Hallo,

folgendes Problem:

Ich habe eine Seite mit einer Tabelle in der Daten stehen.
Etwa so
Code:
<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:

Code:
<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?
 
Zuletzt bearbeitet:

Xanta

Captain
Dabei seit
Aug. 2010
Beiträge
3.224
Stell es doch als Backgroundimage rein?:)

Und tipp, lass Tabellen weg und arbeite mit DIVs ;)
 
Zuletzt bearbeitet:

nissl

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
Hm versteh ich nicht, ich hab es doch als background image?

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

nissl

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
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 :D
 

Oraclefile

Cadet 2nd Year
Dabei seit
Okt. 2012
Beiträge
30
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

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
das mit z-index:1 hat komischerweise keine auswirkung.
 

nissl

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
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
 
S

Speedy.

Gast
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

Cadet 2nd Year
Dabei seit
Okt. 2012
Beiträge
30
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:

Code:
<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

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
also z-index hat keine auswirkung, hier mal der codeschnipsel

Code:
<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

Cadet 2nd Year
Dabei seit
Okt. 2012
Beiträge
30
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
 
S

Speedy.

Gast
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

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
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

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
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

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Eigentlich ist CSS recht logisch aufgebaut....
Wahrscheinlich hast du allerwildeste Positionierungen drin, oder so einfaches Zeug wie "width" vergessen.
 

nissl

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
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..

:D
 

nissl

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
1.015
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 =)
 
Top