Seite 1 von 2
HTML-Code für Tabellen mit Hintergrund und Abstand?
Verfasst: Mo Jan 03, 2005 12:37
von Hypopotamus
Also ich irgendwie sitze ich mit dem Tabellen völlig auf der Leitung. Habe schon soviel probiert, alles zum Thema in SelfHTML durchgelesen, aber es geht nicht.
Ich möchte eine Tabelle in HTML erstellen mit 3 Spalten. Jede Spalte bekommt ein eigenes Hintergrundbild. Und es steht Text drin. Nun soll natürlich der Text ein wenig vom Rand weggerückt sein. Also gebe ich bei cellpadding einen Wert von 10 ein. Bloß: Er rückt nicht nur den Text ein, sondern auch das Hintergrundbild.
Anschauen könnt Ihr Euch diesen Quatsch auf
www.bunte-blumenwelt.de unter Kontakt. Das ist mein Gästebuch.
Verfasst: Mo Jan 03, 2005 12:53
von Digiknipser
Probier es mal mit einer Tabelle, die so konstruiert ist:
Code: Alles auswählen
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td background="hintergrundbild.gif"><span style="padding: 10px 10px 10px 10px;">Mein Text</span></td>
<td background="hintergrundbild2.gif"></td>
<td background="hintergrundbild3.gif"></td>
</tr>
</table>
Damit könnte es gehen - ich habe es aber nicht ausprobiert...
Grüße,
-Gernot
Verfasst: Mo Jan 03, 2005 13:13
von Hypopotamus
Gernot ich bin dir sooooooooooo dankbar. Das geht. Jetzt muß ich nur die letzte Zelle rechtsbündig formatieren. Auch in diesen Span-Style. text-align:right funktioniert aber nicht.
Verfasst: Mo Jan 03, 2005 13:37
von Martin Redlich
Vielleicht hilft dieser Vorschlag weiter, ich habe die Style Infos einfach dirkekt in den Spalten Tag geschrieben, dadurch entfällt auch das Problem beim Zeilenumbruch (wenn viel Text vorhanden ist, wird in der Zelle umgebrochen und die Einrückung ignoriert)
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td background="leuchtturm.jpg"></td>
<td background="leuchtturm.jpg"></td>
<td background="leuchtturm.jpg" align="right" width="40" style="padding: 10px 10px 10px 10px;">
test, test, test, test, test, test, test, test, test, test, test, test</td>
</tr>
</table>
Verfasst: Mo Jan 03, 2005 14:19
von Hypopotamus
Ja das mit dem vielen Text stimmt wohl. Da muß ich aber das ganze sowieso anders aufbauen. Denn sonst vervielfältigt sich die der Hintergrund. Also nochmals umbauen
Verfasst: Mo Jan 03, 2005 15:32
von Digiknipser
Das ist prinzipiell das Problem mit Hintergrundgrafiken - man weiß nie, was noch so kommt und das Layout zerreißt... Deshalb bin ich mit deren Einsatz sehr vorsichtig geworden.
Viele Grüße,
-Gernot
Verfasst: Di Jan 04, 2005 12:29
von Hypopotamus
Ich werde das Problem mit ImageReady lösen. Und zwar einfach die Grafik zerteilen. Wenn es zwei Zeilen werden wird die Mitte der Tabelle einfach höher. Ist zwar ein Aufwand, aber ja nur einmal.
Wollte es gestern eigentlich noch online stellen. Aber leider machte mein ImageReady Zicken. Mußte erst alles deinstallieren und neu aufspielen.
Verfasst: Di Jan 04, 2005 14:03
von Digiknipser
Zum Zerteilen von Grafiken und automatischem Erstellen von Tabellen, die die Bildfragmente wieder zusammensetzen kann ich den uralten aber hervorragend arbeitenden "shoe string's picture dicer" empfehlen. Grafik laden, mit rechter und linker Maustaste die horizontalen und vertikalen Schnitte setzen und die Tabelle mit Einzelbildern erzeugen lassen - fertig.
DAs Programm passt sogar auf eine alte Diskette
Diskette? Was war das nochmal
?
Hier der Link:
http://www.ziplink.net/~shoestring/dicer01.htm
Verfasst: Di Jan 04, 2005 17:29
von Hypopotamus
Danke für den Tip. Werde mir das auf jeden Fall aufschreiben. Das Programm geht jetzt gottseidank wieder. Aber meine Erfahrung mit Adobe sind nicht die besten. Manchmal machen die Programme urplötzlich solche Probleme daß sie nicht mehr zum laufen zu bringen sind. Da müßte man dann den ganzen Computer neu aufsetzen (steht auch wortwörtlich so auf Adobes FAQ) . Das finde ich schon ziemlich heftig
Ich habe die Tabelle jetzt umgebaut. Ging problemlos. Habe das noch nie gemacht. Hinterher her habe ich allerdings festgestellt, daß man in dem PHP-Script die Menge der Buchstaben begrenzen kann. Was natürlich heißt da es sicher nie zwei Zeilen gibt. Aber was solls. Ich habe wieder was dazugelernt.
Verfasst: Di Jan 04, 2005 17:58
von Hypopotamus
Gernot kannst Du mir nochmal einen Gefallen tun. Schau Dir bitte mein Gästebuch an. Es paßt jetzt soweit mit der Tabelle. Sieht auch gut aus. Wenn Du es schmäler ziehst umbricht der Text neu und der Rahmen wird höher. Was ich nicht verstehe warum klebt der Text der vorher einen schönen Abstand hatte, dann plötzlich so nah an der Linie? Die Tabelle müßte sich doch um den Zeilenabstand erhöhen und der Abstand gleich bleiben.
Das ist der Code:
<table border="0" cellpadding="0" cellspacing="0" width="%%Tischweite%%" align="center" height="30">
<tr>
<td background="Bilder/schatten_01.gif" width="150" height="6"></td>
<td background="Bilder/schatten_02.gif" colspan="3" height=6></td>
<td background="Bilder/schatten_03.gif" width="120" height="6" align="right"></td>
</tr>
<tr>
<td background="Bilder/schatten_04.gif" valign="top" width="150" height="14"><span style="padding-left:10px; font-size: 8pt"><b><nobr>%%post0%%</nobr></span></b></td>
<td background="Bilder/schatten_05.gif" valign="top" colspan="3" height="14"><span style="font-size: 8pt">Titel:<b> %%post1%%<br></b></style></td>
<td background="Bilder/schatten_06.gif" valign="top" width="120" height="14"><span style="padding-right: 10px; font-size: 8pt; text-align: left;"><nobr>%%post2%%</nobr></style></td>
</tr>
<tr>
<td background="Bilder/schatten_07.gif" width="150" height="6"></td>
<td background="Bilder/schatten_08.gif" colspan="3" height="6"></td>
<td background="Bilder/schatten_09.gif" width=120 height=6></td>
</tr>
</table>
Verfasst: Di Jan 04, 2005 21:20
von Digiknipser
Hypopotamus hat geschrieben:Gernot kannst Du mir nochmal einen Gefallen tun.
Schaumer mal
Also, ich habe mir Dein Gästebuch runtergeladen. Die Style-Blöcke habe ich nicht genauer untersucht. Zunächst mal - ich hoffe, ich darf offen Kritik üben? - muss dringend der Code in ein gutes Layout gebracht werden (Einrückungen und Zeilenumbrüche), denn sonst blickt man da nicht mehr durch und verliert schnell den Überblick. Ich weiß, daß das für Skripte wie PHP oder ASP manchmal recht schwer und aufwändig ist, aber es rechnet sich auf Dauer... Ich habe das mal für einen Block gemacht:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Gästebuch BunteBlumenWelt</title>
<style>
BODY
{
background-color: #F0F1EF;
background-image: none;
background-position: center;
color: 000000;
scrollbar-face-color: #F0F1EF;
scrollbar-shadow-color: #F0F1EF;
scrollbar-highlight-color: #F0F1EF;
scrollbar-3dlight-color: #F0F1EF;
scrollbar-darkshadow-color: #F0F1EF;
scrollbar-track-color: #F0F1EF;
scrollbar-arrow-color: #000000;
font-size: 9pt;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
TABLE
{
cell-padding: 0;
background-repeat: no-repeat;
cell-spacing: 0;
border: 1;
border-color: #000000;
border-style:solid;
background-color: #FFFFFF;
}
TD
{
font-family: Verdana;
font-size: 9pt;
text-decoration: none;
color: #000000;
}
A
{
color: #4A8667;
font-family: Verdana;
font-size: 9pt;
text-decoration: none;
font-style: none;
font-weight: bold;
cursor: hand;
}
A:hover
{
color: #BBD5BF;
text-decoration: underline;
cursor: hand;
}
TD.mark
{
color: #000000;
font-family: Verdana;
font-size: 9pt;
background-color: #F0F1EF;
}
A.mark
{
color: #FFFF33;
font-family: Verdana;
font-size: 9pt;
text-decoration: none;
font-style: none;
font-weight: bold;
cursor: hand;
}
A.mark:hover
{
color: #E0F8FF;
text-decoration: underline;
cursor: hand;
}
SELECT
{
font-family: Verdana;
font-size: 9pt;
border-color: #000000;
color: #000000;
background-color: #F0F1EF;
border-width: 0;
}
TEXTAREA
{
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #F0F1EF;
scrollbar-highlight-color: #F0F1EF;
scrollbar-3dlight-color: #F0F1EF;
scrollbar-darkshadow-color: #F0F1EF;
scrollbar-track-color: #F0F1EF;
scrollbar-arrow-color: #000000;
font-family: Verdana;
font-size: 9pt;
border-style:solid;
border-color: #000000;
color: #000000;
background-color: FFFFFF;
border-width: 0;
}
INPUT
{
font-family: Verdana;
font-size: 9pt;
border-style:solid;
border-color: #000000;
color: #000000;
background-color: #FFFFFF;
border-width: 0;
}
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="30" width="80%">
<tbody>
<tr>
<td background="v.php_files/schatten_01.gif" height="6" width="150"></td>
<td colspan="3" background="v.php_files/schatten_02.gif" height="6"></td>
<td align="right" background="v.php_files/schatten_03.gif" height="6" width="120"></td>
</tr>
<tr>
<td background="v.php_files/schatten_04.gif" height="14" valign="top" width="150"><span style="padding-left: 10px; font-size: 8pt;"><b><nobr>Anonym</nobr></b></span></td>
<td colspan="3" background="v.php_files/schatten_05.gif" height="14" valign="top" nowrap><span style="font-size: 8pt;">Titel:<b> DAs ist ein Test DAs ist ein TestDAs ist ein TestDAs ist ein Test<br></b></span></td>
<td background="v.php_files/schatten_06.gif" height="14" valign="top" width="120"><span style="padding-right: 10px; font-size: 8pt; text-align: left;"><nobr>04.01.2005 17:45</nobr></span></td>
</tr>
<tr>
<td background="v.php_files/schatten_07.gif" height="6" width="150"></td>
<td colspan="3" background="v.php_files/schatten_08.gif" height="6"></td>
<td background="v.php_files/schatten_09.gif" height="6" width="120"></td>
</tr>
</tbody>
</table>
</body>
</html>
Das Problem an Deinem Tabellenkonstrukt ist meiner Meinung nach die Kombination aus einer Höhenbeschränkung (height="14") für das Hintergrundbild und gleichzeitig zu viel Text - das gleiche Problem haben wir in unseren Intranetapplikationen auch oft! Ich habe das Problem mal von der anderen Seite her aufgerollt, nämlich dort, wo der zu lange Text entsteht - und er kann entstehen, weil das INPUT-Tag keine Maximallänge definiert hat. Dort, wo der
Betreff eingegeben werden kann, sollte stehen:
Code: Alles auswählen
<input type="text" name="oben" value="Überschrift" size="40" maxlength="40" onFocus="this.value='';">
Damit kannst Du ganz einfach die Maximallänge begrenzen, und es entstehen nicht so oft die unliebsamen Umbrüche.
Als nächstes habe ich oben in der
Ausgabe des Betreffs schlichtweg ein
nowrap eingefügt - das verhindet ein Umbrechen des Textes, bei zu wenig Platz entsteht halt evtl. eine horizontale Scrollleiste. Aber aus der Kombination
nowrap und
maxlength="40" solltest Du die Textlänge so hinbekommen, daß auch bei kleineren Bildschirmen oder im Fenstermodus das Layout nicht gleich zerreißt.
Viele Grüße,
-Gernot
Verfasst: Di Jan 04, 2005 21:30
von Hypopotamus
Uups da hast Du Dir aber viel Arbeit gemacht. Ich habe das Script nicht so in Unordung gebracht. Das war schon so, als ich es runtergeladen habe. Die ordentlichen Teile sind von mir. Weiß auch nicht warum das so aussieht. Aber ich werde einfach deines mal reinkopieren.
Da kannst Du Dir denken, was das für mich war, die noch nicht mal HTML kann. Bastle nun schon seit Tagen dran rum, habe ich auch viel gelernt. Teilweise ausgedruckt und mit Hilfe von SELFHTML zerpflückt.
Diese Begrenzung ist schon irgendwo im PHP-Code untergebracht. Das kann man in den Einstellungen ändern. Aber das Problem bleibt wohl, denn wenn sich einer den Browser schmäler zieht, umbricht es trotzdem.
Vielen DAnk
Verfasst: Mi Jan 05, 2005 0:53
von Martin Redlich
Wenn Sie das Style Attribut zu den Parametern der Tabellenzelle schreiben, wird der Einschub auch bei Umbrüchen beibehalten, beispielsweise könnte eine Tabellenzelle so aussehen:
<td style="...">testestetstetstetsdteswte</td>
Verfasst: Mi Jan 05, 2005 1:55
von Wolke36
Hi Claudia, Gernot und Redlich - wenn ich Euer perfektes japanisches China-Koreanisch so sehe - dann habe ich nicht nur Augenprobleme - NEIN! Dann frage ich mich auch nicht ob ich das auch lernen sollte - NEIN!
Da sage ich einfach dem Traum von der mitteilsamen eigenen HP "Adieu, Goodbye und Servus..." - Denn: wie lange sollte ich armer nur mit mittlerer Bildung versehener älterer Mitteleuropäer
denn mit solchen Stäbchenkürzeln das HP-Verstehste lernen??
Nebbich, neee - im Leben nicht (mehr..)
...
Naja, wer weiß -vielleicht gibt es ja adoch auch einen anderen Weg zur mitteilsamen www-Site...?
Seid herzlich gegrüßet
ich bewundere Euch
maßlos
alfred von der wolke
Verfasst: Mi Jan 05, 2005 10:14
von schiwago
Hallo Alfred,
nicht die Flinte in den Weinbrand werfen!
Sicher ist es für viele interessant und anregend neue
Programmiertechniken zu durchschauen und zu lernen.
Aber die Philosophie der Homepages ist doch eigentlich, den
Schwerpunkt auf den INHALT zu legen. Für die Präsentation genügen
in der Regel einfache Techniken und ein wenig gestalterisches
Geschick.
Ich gebe zu, dass ich auch keine Lust habe, mich in das ganze
HTML-Fachchinesisch gründlich einzuarbeiten und benutze deshalb
Hilfsmittel wie z.B. Frontpage. Da mag mancher darüber lächeln, aber
für meine Belange reicht es aus und der Inhalt kommt dahin wo er
hin soll.
Also: Nicht verzagen!
Verfasst: Mi Jan 05, 2005 11:41
von Hypopotamus
Schreibt mal bitte jemand was ins Gästebuch. Bei mir geht es nicht mehr. Weiß nicht warum. Vielleicht liegt es daran daß ich zuviel probiert habe.
Danke
Verfasst: Mi Jan 05, 2005 11:54
von Hypopotamus
Verfasst: Mi Jan 05, 2005 13:30
von KlaBu
Hallo,
Wisst ihr was, ich habe jetzt langsam aber auch die Sch.... voll. Schaue mir gerade zufällig die Seite im IE an. Da sieht das alles total durcheinander aus, was im Mozilla schön ist.
Der IE ist fast ein Allesfresser... Ich weiß nicht warum, aber der zeigt oft Seiten ganz anders an, wie andere Browser...
Sobald man etwas spezielles machen will, wird es wohl mit einfachen Mitteln nicht mehr möglich sein, dass dies von allen Browseren gleich dargestellt wird.
Ich glaube, dass da die Profis sogar verschiedene Layouts anlegen und dann während des Seitenaufrufes die Browser abfragen und dann auf das entsprechende Layout weiterverlinken... Bin mir da aber nicht ganz sicher.
Verfasst: Mi Jan 05, 2005 13:44
von Digiknipser
Hypopotamus hat geschrieben:Sowas blödes wie Webtechniken habe ich wirklich selten gesehen. Man macht und tut, liest und schreibt. Und selbst nach Stunden hat man kein bis ein schlechtes Ergebniss
Wieso, Du bist doch schon weit gekommen. Bedenke: Du hast bisher alles im Selbststudium gemacht und - nehme ich mal an - außer viel Zeit nichts oder nur sehr wenig investiert. Andere machen eine drei Jahre lange Ausbildung. Wieder andere finanzieren sich ein teures Training bei einem Profi. Webtechniken sind nicht wirklich blöde - aber man braucht eine solide Grundlage und Erfahrung, um einige zugegebenermaßen bestehende Tücken umgehen zu können.
Es wäre so ähnlich, wenn ich heute den Motor meines Autos auseinanderschraube und mich beim Zusammenbau wundere, wenn irgendwas nicht mehr passt. Ob es da helfen würde, ein Buch zu lesen oder einfach mal zu probieren, wage ich zu bezweifeln - dafür gibt es Ausbildungsberufe, wo eine Grundlage geschaffen wird, auf der man über die Jahre im Beruf aufbauen kann.
Ich will Dir wahrlich nicht zu nahe treten und ich verstehe Deinen Frust so kurz vor dem Ziel. Ich finde es nur manchmal komisch, daß alles was mit Computern zu tun hat als selbstverständlich und für jeden innerhalb kürzester Zeit machbar gilt.
Claudia, gib nicht auf - Du bist auf einem guten Weg. Such Dir vielleicht noch ein anderes Gästebuch, das leichter anzupassen ist, oder überdenke Dein Designvorhaben - vielleicht hilft es Dir bei der Umsetzung, es insgesamt einfacher zu gestalten.
Viele Grüße,
-Gernot
Verfasst: Mi Jan 05, 2005 13:47
von Digiknipser
KlaBu hat geschrieben:
Ich glaube, dass da die Profis sogar verschiedene Layouts anlegen und dann während des Seitenaufrufes die Browser abfragen und dann auf das entsprechende Layout weiterverlinken... Bin mir da aber nicht ganz sicher.
Genau so ist es... oder man hält das Design ganz bewußt so einfach, daß es in jedem Browser gut aussieht!
Merke: Auch einfaches Design kann schön sein
Viele Grüße,
-Gernot