Hintergrundbild über eine Tabellenspalte spannen

[afoeder]

Hi!

ich möchte ein Hintergrundbild in meiner Tabelle, das aber nur in einer Spalte zu sehen sein soll.
So "ofiziell" geht das ja nicht, oder?


meine Idee wäre z.B. global für die Tabelle ein Hintergrundbild zu nehmen, was so ausgerichtet ist, das es genau in diese Spalte passt.
Die anderen Tabellenspalten haben dann eine Hintergrundfarbe, die Spalte, wo das Bild zu sehen sein soll, ist transparent.

Das Problem hierbei ist aber, dass für die Spalten, die sich VOR der betreffenden Spalte befinden, fixe breiten benötige.
Dies könnte ich z.B. mit dem berühmten transparenten Bildchen bewerkstelligen.
Allerdings ist bei dieser Lösung nur die Mindestbreite gegeben, wenn der Text breiter wird, wird auch die Spalte breiter.

Und ein
<td width="150"> ist glaube ich nicht besonders gut, weil Netscape unter width was anderes versthet als der IE (soweit ich mich erinnere).

Habt ihr vorschläge?


danke,
gruß,
adrian

 

[.marc]

mach doch einfach für die spalte noch mal eine Tabelle, eine Tabelle in einer Tabelle sozusagen und für die definierst du dann ein Hintergrundbild

 

[afoeder]

ja stimmt, klar!!!
die betreffende Spalte spanne ich mit colspan groß genug, und dann kommt da eine tabelle rein!!!


danke, geil!!!!
der Tip schlechthin!!!


coooool ;-)


gruß,
adrian

 

[.marc]

freut micht das ich helfen konnte, frohe Ostern

 

[afoeder]

jetzt muss ich nur noch überlegen, wie ich das ganze in eine PHP-Schleife reinbekomme ;-))

 

[womstar]

ns versteht genau das selbe wie der ie oder opera unter unter width, das ist ein standart attribut.

bei ns ist es nur wichtig wenn man leer zellen hat muss man in diese dann ein leerzeichen setzen.

also:

<td width=150>
&nbsp;
</td>


und zu deinen hintergrundbild das geht nicht??,
nur so als frage... :

<td width=150 background=bild.jpg style="background-image:url(bild.jpg)">
&nbsp;
</td>

 

[afoeder]

ok, wenn das geht dann ist ja gut...




mir ist aber ein Problem eingefallen, das sich stellt, wenn wir marc_tanner's Tip befolgen:
ich bekomme die Zeilen ja nie synchronisiert.


Damit wir mal was vor Augen haben:
das soll die Seite sein:
http://www.urban-masters.net/calendar.php3

die zweite Spalte, "Ort", soll das Hintergrundbild tragen.
wenn ich da nun aber eine zweite Tabelle reinhaue, stimmen die trennlinien ja nicht mehr...


gruß,
adrian

 

[.marc]

jenachdem was es für ein Hintergrundbild ist (z.B. ein Farbübergang) könnte man es ja einfach in die einzelnen td's rein schreiben.

wenn es allerdings ein Foto oder so ist würde sich das ja immer wiederholen und somit fällt das dann weg.

könnte man nicht das bild in die erste Zeile rein packen und dann mit css sagen das es auf jeden Fall ganz angezeigt werden soll *grübel*

 

[afoeder]

hmm..
ich glaube eben, genau DAS geht nicht....

 

[womstar]

mit style="background-repeat:no-repeat" kann man die wiederholung unterbinden.

weis jetzt nicht was da alles so schwer daran ist...

 

[afoeder]

ach neee....

aber wie kann ich den Hintergrund über die Tabellenzeilen hinweg spannen?



danke,
gruß,
adrian

 

[.marc]

weis jetzt nicht was da alles so schwer daran ist...

ich denke es ist nicht möglich aber ich lass mich gerne belehren
das mit den Trennlinien würde wieder Probleme machen.

 

[planet4]

hallo,

wenn du auf deine schwarze Hintergrund-Tabelle verzichtest (hab mir jetzt die style-sheets nicht angesehen, hat sie etwas mit dem Rahmen der vorderen Tabelle zu tun?), dann kannst du dein Hintergrund-Bild auf einem layer mit index:-1 hinter deine Tabelle legen, musst ihn nur genau positionieren

<style type="text/css">
#background {
	position: absolute; 
	background: url(background.gif);
	width: 250px; 
	height: 600px; 
	left: 144px; 
	top: 206px; 
	z-index:-1; 
	padding: 0px;
	overflow : hidden;
	border: 0px;
}
</style>

...ungefähr so, und die einzelnen Zellen, in denen das Bild zu sehen sein soll:

<td style="background-color: transparent;">

hab's ausprobiert, es klappt, jedenfalls im IE

so long,
planet4.

 

[afoeder]

jo, an ein frei positionierbares DIV habe ich auch schon gedacht, aber das geht hundertprozentig schief.
Mit dem NS.

und ich kriege gleich schon wieder einen dicken hals, wenn ich nur drandenke, an die VIERAUGEN, die sagen "hurra netscape" und "IE sucks", obwohl sie keine Ahnung haben (sie KÖNNEN keine ahnung haben, wenn sie so etwas behaupten)

aber ich darf ich da nicht reinsteigern, die diskussion hatten wir ja schon tausendmal.



gruß,
adrian

 

[afoeder]

übrugens: ja, sie schwarze BG-Tabelle ist für die rahmenfarben der "haupttabelle".


gruiß,
adrian

 

[.marc]

@planet4
wenn man die Tabelle in % haben möchte und der user dann z.B. die Fenstergrösse verändert ist das ganze im A**** ganz abgesehen von NS.

 

[planet4]

....ja, NS macht da Mist, stimmt;
es gibt aber noch ne Möglichkeit, wenn du dir die Arbeit machen willst:
du machst deine Tabelle zweimal, legst jede auf einen layer,
machst für die Tabelle im Hintergrund z-index:1 und das Hintergrundbild mit rowspan in deiner Spalte,
für den vorderen layer z-index:2 und die Zellen transparent,
damit das Bild auf dem unteren layer durchscheint.
wenn du die Hintergrundfarbe der anderen Zellen aus den tr-tags rausnimmst
und sie stattdessen in die td-tags packst, versteht das auch
Netscape und zeigt genau an der richtigen Stelle
dein Hintergrundbild an...

und den Rahmen kann man doch auch anders, über
style-sheets definieren...

planet4.

 

[afoeder]

das ist eigentlich eine gute idee.

hast du eine konkrete idee, wie ich die Layer aufeinander abstimmen könnte?
einfach jeweils den gleichen top und leftwert angeben, oder irgendwie mit relativwerten arbeiten?


danke,
gruß,
adrian

 

[afoeder]

ach ja und noch was:
dass wir uns nicht missverstehen:
meinst Du echt layer oder eben divs?

danke,
gruß,
adrian

 

[planet4]

.... also ich hab's mit layern ausprobiert, die müssen ja übereinander liegen:

<style type="text/css">
#background {
	position: absolute;
	width: 100%; 
	height: 800px; 
	left: 0px; 
	top: 0px; 
	z-index:1; 
	padding: 0px;
	overflow : hidden;
	border: 0px;
}

#table {
	position: absolute;
	width: 100%; 
	height: 800px; 
	left: 0px; 
	top: 0px; 
	z-index:2; 
	padding: 0px;
	overflow : hidden;
	border: 0px;
}
</style>

...ungefähr so.
ist sehr umständlich, aber klappt.

planet4.