• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Hintergrundbild über eine Tabellenspalte spannen

naja, aber layer interpretiert doch der IE nicht, gelle?
und <div> interpretiert der NS nicht (richtig)....

aber umständlich ist das nicht.
Die Tabelle wird eh per PHP ausgelesen, deshalb können das auch ruhig fünf tabellen sein ;-)


gruß,
adria
 
also, endgültig sieht es nun so aus:

http://www.urban-masters.net/debug_calendar.php

funktioniert selbstverständlich mit dem IE, auch mit den neuesten Versionen von NS und Opera.

Opera ist ja noch OK, aber wenn die Leute schon den Netscape benutzen müssen, dann sollen sie gefälligst auch den neuesten (v 7.x) nehmen.
mit dem funktioniert es nämlich auch.

XHTML 1.0-konform ist die Seite auch (http://validator.w3.org/check?uri=http://www.urban-masters.net/debug_calendar.php), also.


Zur Technik:
es funktioniert eigentlich ganz einfach.
ich habe für die ganze Tabelle folgendes css verwendet:

border-collapse:collapse;
background-color:#393939;
background-image:url(pics/bgMirrorBall.jpg);
background-repeat:no-repeat;

border-collapse, damit die <td>-border zusammenfallen,
die background-color ist auch die "randfarbe" von bgMirrorBall.jpg
background-image ist klar,
und background-repeat, damit es nur einmal x und y wiederholt, also angezeigt wird.

Für die beiden headerzeilen "Datum" und "Ort" habe ich einen ca. 25 px hohen und 80px (Datum) bzw. 280px (Ort) breiten Ausschnitt aus dem großen JPG genommen und diesen Halbtransparent gemacht.
Die beiden kleinen grafiken habe ich dann als <td>-background genommen.
die anderen headerzeilen sind einfach festgelegte Hintergrundfarben.
Nun noch mit width und height die Höhe und Breite festgelegt, und schon passt das Ganze.



Zum vergleich: ganz vorher sah es so aus:
www.urban-masters.net/calendar.php3


danke für die Anregungen,

gruß,
adrian
 
na das sieht ja viel besser aus, aber wenn du schon mal dabei bist, probier doch mal wie es aussieht, wenn du die border nur 1px machst :)
 
die sind doch nur 1 px!

wie sieht das bei Dir aus; oder wie kommst du darauf, das die dicker sind?



danke,
gruß,
adrian
 
Das ist ein typisches Problem...

Hab ich auf meiner Seite auch so, im HTML 'border="1" ' aber im Photoshop muss ich eine Linie 2 pxl gross machen, damit sie gleich sind.
 
ja, aber wenn ich in einem style-sheet "border-width:1px" angebe, dann IST die auch ein px groß.

und wie gesagt, apicula, wo sind denn bei mir zu dicke borders?

welchen Browser benutzt Du?


danek,
gruß,
adrian
 
ja, ist 1 aber per border=1 in der Tabelle nehm ich an, hab ich nicht geschaut. Wenn du

border-style: solid; border-width: 1px; border-color:#f3f3f3
(also Farbe natürlich wie du willst)

machst, dann ist der Rahmen optisch viel dünner, sieht dann feiner aus find ich.
 
Zuletzt bearbeitet:
eben ;-)


in jeder <td> steht ein class="TableBorder"

und so ist es hinterlegt:
td.TableBorder{color:#E1E1E1;border-color:#E1E1E1;border-style:solid;border-width:1px;}
 
ich hab jetzt leider keine Zeit mir den code anzusehen, aber die border entsprechen alle der optik eines Standard-Borders, der eben nicht so gemacht wurde wie ich schrieb. Sonst wäre da doch kein Schatten, es sei denn dies wäre über weiteren style definiert.
 
nun, dieser "Schatten" an den Kreuzpunkten der Borders ist mir auch aufgefallen, im IE.

der Opera und Netscape zeigen die Border schön als Kreuz an.

Ich denke mal, da kann man nichts machen.

ich habe es so definiert:

<table [...] style="border-collapse:collapse;">
...
<td style="border-width:1px; border-style:solid; border-color:[...];">

wie gesagt: NS und Opera zeigen es "wie gewünscht" an, der IE macht da solche Schatten an den Kreuzpunkten.


gruß,
adrian
 
hm, also nu muß ich wirklich erstmal weg, aber das probier ich doch nachher mal aus.
Mir ist das auch im IE 6.0 noch nicht in dieser Art aufgefallen, wenn ich den border 1px solid mache, dann ist da kein Schatten, sondern eine feine Linie. Aber wie gesagt, nachher schau ich mir das mal näher an.
 
Ausprobiert hab ich es immer noch nicht aber vielleicht ist dies der Grund:

aus selfhtml gefunden unter border:collapse

> Bei der Angabe collapse kommt es zu Konfklikten zwischen Rahmenformatierungen einzelner Zellen. Rahmen, die dabei in jedem Fall Vorrang haben sollen und den gemeinsamen Grenzrahmen der Nachbarzelle überlagern sollen, müssen zu diesem Zweck die CSS-Angabe border-style:hidden erhalten. <
 
So hab nochmal geschaut.
Du hast doch cellspacing=2 und cellpadding=2 und dann die Zellen mit ner Hintergrundfarbe gefüllt. Deshalb dieser schwarze Schatten, weil dadurch ja auch schon ein Rand entsteht. Wenn du cellspacing und cellpadding auf 0 setzt dann funktioniert auch der style.

A pros pros Browser und CSS:
Soweit ich das gelernt habe, ist es gerade der IE, welcher CSS-Styles am besten interpretiert und Opera läßt das einfach unter den Tisch fallen. Ich bin derzeit ehrlich gesagt etwas irritiert, welcher Browser nun welche CSS-Befehle umsetzt und welcher nicht.
 
hmm..
okay...

stimmt nicht ganz, ich darf nur cellspacing auf null setzen, dies IST ja der Zellenabstand zueinander.
cellpadding ist der Rand von Text zu Zelle, und wenn ich den auf null setze, ist der Text an den Zellenrand "geklatscht".

Sollte nicht anmaßend sein, war sicher ein kleiner Irrtum, ich habe die Begründung nur notiert, falls ein Hilfesuchender auf diesen thread stößt.


gruß,
adrian
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben