✔ Hintergrundsbild in einer Tabelle / mehr-Zeilenweise

CookieBuster

CookieBuster

Erfahrenes Mitglied
Also, mein Problem übersteig leider mein aktuelles Wissen was CSS angeht.. =/


Ich habe eine Tabelle, diese Tabelle ist in jeweils 4 Zeilen "unterteilt", bzw muss so mithilfe eines Bildes unterteilt werden.

Wie ist es mir möglich ein Bild das sich über 4 Zeilen erstreckt und alle 4 Zeilen wiederholt wird, in eine Tabelle als Hintergrundsbild zu integrieren?


Ich hoff es ist verständlich was ich mein


so long
 
Hi,

meinst du so?

  • repeat = Hintergrundbild wird horizontal und vertikal wiederholt:
HTML: 
<table style="background:url(pfad/zu/hintergrundbild) repeat;">
  • repeat-x = Bildhöhe liegt vor, Hintergrundbild wird horizontal wiederholt:
HTML: 
<table style="background:url(pfad/zu/hintergrundbild) repeat-x;">
  • repeat-y = Bildbreite liegt vor, Hintergrundbild wird vertikal wiederholt:
HTML: 
<table style="background:url(pfad/zu/hintergrundbild) repeat-y;">

Oder vielleicht eher so?

  • Hintergrundbild für eine Zeile:
HTML: 
<tr style="background:url(pfad/zu/hintergrundbild)">
Sollte ich daneben liegen, bitte den Quellcode deines Tabellengerüsts zeigen, und diese "Blöcke" darin beim Namen nennen, damit hier nicht aneinander vorbeigeredet wird.

mfg Maik
 
Also, das repeat... kenn ich, hatte es auch damit versucht. Doch es funktioniert nicht, dann verschiebt sich das leider..

HTML: 
<table border="0" cellspacing="0" cellpadding="1">
	<tr style='height:25px;'>

		<td width='15'>&nbsp;</td>
		<td valign='middle' width='426'>TITEL</td>
		<td valign='middle' align='right' width='100'>DATUM</td>
		<td width='15'>&nbsp;</td>
	</tr>
	<tr style='height:4px;'>
		<td colspan='4'> </td>
	</tr>
	<tr style='height:71px;'>
		<td>&nbsp;</td>
		<td valign='top' colspan='2'>CONTENT</td>
		<td>&nbsp;</td>
	</tr>
</table>

Das wäre jetzt exakt 1 "Block", und genau hinter diesen Block muss das Bild gesetzt werden (zum Vergleich, die Aktivitätenübersicht auf unserer Vereinsseite)

Der nächste Block wären wieder 3 Zeilen einfach in die Tabelle angefügt.

Wenn ich jetzt einfach ein Hintergrundsbild setzt wird es zwar wiederholt wie gewünscht, aber dann stimmt nicht mehr der Abstand -> das ganze verschiebt sich und nichts stimmt mehr =/
 
Sprichst von dem Hintergrund http://www.thw-jugend-muensingen.de/resources/icons/box.jpg?

Dann würde ich mal vorschlagen, dass du das Hintergrundbild in drei Teile segmentierst, so wie hier:

http://www.thw-jugend-muensingen.de/stylesheet.css hat gesagt.:
CSS: 
.NewsTableHeader{
    background-image:url(resources/icons/header_box_part.jpg);
    background-repeat:no-repeat;
    background-position:bottom center;
}

.NewsTableContent {
    background-image:url(resources/icons/content_box_part.jpg);
    background-repeat:no-repeat;
    background-position:top center;
}

.NewsTableSpace {
    background-image:url(resources/icons/space_box_part.jpg);
    background-repeat:no-repeat;
    background-position:middle center;
}
Zum Vergrößern anklicken....

... damit der mittlere Teil "variabel" ist, und zeichnest jeden einzelnen dieser "Blöcke" mit deinem gezeigten HTML-Code aus, so "verschiebt" sich dann auch nichts mehr.

Ansonsten kann ich dir nicht folgen, worauf du jetzt konkret hinaus willst.

mfg Maik
 
Das hatten wir ganz am Anfang auch so (also unterteilt) aber das hat nicht funktioniert, drum ist es jetzt auch nicht mehr so. Haben wohl nur vergessen das ganze aus dem Stylsheet zu nehmen...

Die Frage ist wie ich das ganze mit nur 1 Bild hinbekomme.. also nicht unterteiltes Bild.

Andere Möglichkeit wäre wenn man eine Lösunge hätte mit unterteilten Bildern. Bei uns gabs da aber immer Blitzer die nicht weg zu bekommen waren
 
Mit einem einzelnen Hintergrundbild kannst du da aber nichts ausrichten, wenn die Blockhöhe variabel sein soll, und sich das "komplette" Hintergrundbild nicht wiederholen soll, wenn der Tabelleninhalt die Bildhöhe überschreitet (was du mit "Verschieben" umschreibst).

Und was sind bitte "Blitzer"?

Wenn ihr es aber mit dem genannten CCS-Code in einer Tabelle nicht hinbekommen habt, würd ich an eurer Stelle einfach mal das HTML-Element tauschen, und stattdessen diese Blöcke mit drei DIVs konstruieren:

HTML: 
<div class="NewsBox">
    <div class="NewsHeader">...</div>
    <div class="NewsContent">...</div>
    <div class="NewsSpacer">...</div>
</div>


mfg Maik
 
Blitzer sind 1px breite weiße stellen, die ein Bild unterbrechen, bzw zwischen 2 Elementen sind. Einfach so weiße Streifen. Keine Ahnung ein Normaler Ausdruck für mich :-)

Die Blockhöhe soll nicht Variabel sein, da das Bild sowieso eine feste Größe hat, wird kein Text größer sein, als das Bild hoch ist.

Mit Verschieben mein ich, dass die Bilder zu Nah aufeinander wieder folgen (wenn ich das richtig sehe) Dabei verschiebt sich das ganze im mehr im Sinne von, die Bilder sind an den falschen Stellen. Der Text ist nicht Schuld. Bzw indirekt dadurch, dass er dann an der falschen Stelle ist.


Ich denke ich werds mal mit Div's probieren, danke für den Vorschlag, bin ich iwie noch gar net drauf gekommen :rolleyes:
 
So, damit ist's erledigt. Die Div's haben mein Problem rundum gelöst =)

Ergebnis ist Online einzugesehen in der Oben genannten Seite, für diejenigen die es interessiert =)

danke nochmal
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück