Bild mit Tabelle zusammenstückeln

[Chräcker Heller]

Hallo zusammen,

ein Bild in mehrere zerlegen, per Tabelle zusammenstückeln und sich dann über die Zwischenräume beschweren, ist so beliebt, daß ich es auch mal machen möchte.... naja, "möchte" eigendlich weniger, aber was solls:

mein Tabellenkonstrukt:

<table class="logo">
<tr>
<td colspan="3"><img src="logo1.jpg" width="730" height="62" alt=""></td>
</tr>
<tr>
<td><img src="logo2_1.jpg" width="125" height="34" alt=""></td>
<td><img src="logo2_2.gif" width="516" height="34" alt=""></td>
<td><img src="logo2_3.jpg" width="89" height="34" alt=""></td>
</tr>
<tr><td colspan="3"><img src="logo3.jpg" width="730" height="60" alt=""></td>
</tr>
</table>

wird mit folgenden css-Angaben gefüttert:

table.logo {
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    text-align:left;
    border:none;
    padding:0px;
    width:730px;
}
table.logo tr,td {
    margin:0px;
    padding:0px;
    text-align:left;
    border:none;
    font-size : 1px;
    line-height : 1px;
    }
img {
     border:none;
     margin:0px;
     padding:0px;
     }

____

die drei zellen in der mittleren reihe haben nach allen vier Seiten(!) einen Rand zur Nachbarzelle. Mit dem obigen css-konstrukt habe ich den rand aufs kleinste mögliche bekommen. display:block bei den images wie das schändliche Weglassen eines Doctypes (käme mir ja nie in die Tüte ,-))) haben keinen Unterschied gebracht.

Zu sehen unter http://www.chraecker.de/netzwerk/test.html

Wo fehlt mir was?

Danke,

Chräcker

[Fabian Transchel]

Hi Chräcker ;-)

ein Bild in mehrere zerlegen, per Tabelle zusammenstückeln und sich dann über die Zwischenräume beschweren, ist so beliebt, daß ich es auch mal machen möchte.... naja, "möchte" eigendlich weniger, aber was solls:

mein Tabellenkonstrukt:

[...]

die drei zellen in der mittleren reihe haben nach allen vier Seiten(!) einen Rand zur Nachbarzelle. Mit dem obigen css-konstrukt habe ich den rand aufs kleinste mögliche bekommen. display:block bei den images wie das schändliche Weglassen eines Doctypes (käme mir ja nie in die Tüte ,-))) haben keinen Unterschied gebracht.

tja, wenn es so nicht geht... dann würde ich ganz zur not (bastel ein wenig ;-))) eben noch sagen, dass du dir ein <div> nimmst, das absolut mittig positionierst und die grafiken so verteilst, wie du möchtest.
ich muss allerdings anfügen, dass ich die horizontalen striche erst suchen musste, das wirkt schon recht gut und fällt (extrem) wenig auf!

Chräcker

Fabian

ps: was macht dein neue page? *scnr*

[Chräcker Heller]

Hallo,

tja, wenn es so nicht geht... dann würde ich ganz zur not (bastel ein
wenig ;-))) eben noch sagen, dass du dir ein <div> nimmst, das
absolut mittig positionierst und die grafiken so verteilst, wie du
möchtest.

Danke! das war es. Und schwups, die Suche konsultiert und dazu einen spannenden Thread eines Chräckers gefunden.....

Chräcker

ps: was macht dein neue page? *scnr*

gaaaanz langsam wächst die.... wenn nicht immer "so" Aufträge dazwischen kommen ;-) Habe mir bis Ende des Jahres Zeit gegeben....

[Fabian Transchel]

hi

tja, wenn es so nicht geht... dann würde ich ganz zur not (bastel ein
wenig ;-))) eben noch sagen, dass du dir ein <div> nimmst, das
absolut mittig positionierst und die grafiken so verteilst, wie du
möchtest.

Danke! das war es. Und schwups, die Suche konsultiert und dazu einen spannenden Thread eines Chräckers gefunden.....

dachte ich mir, ich hatte vor kurzem ein ähnliches Problem mit meiner Page (wie bekomm ich alles festgenagelte zeugs in die mitte? *g*) ;-))

ps: was macht dein neue page? *scnr*

gaaaanz langsam wächst die.... wenn nicht immer "so" Aufträge dazwischen kommen ;-) Habe mir bis Ende des Jahres Zeit gegeben....

bin ja geduldig und gespannt ;-))

Fabian

[Orlando]

Hi Chräcker,

ein Bild in mehrere zerlegen, per Tabelle zusammenstückeln und sich dann über die Zwischenräume beschweren, ist so beliebt, daß ich es auch mal machen möchte....

gerne. Mach's doch einfach ;)

<table class="logo">
<tr>
<td colspan="3"><img src="logo1.jpg" width="730" height="62" alt=""></td>
</tr>
<tr>
<td><img src="logo2_1.jpg" width="125" height="34" alt=""></td>
<td><img src="logo2_2.gif" width="516" height="34" alt=""></td>
<td><img src="logo2_3.jpg" width="89" height="34" alt=""></td>
</tr>
<tr><td colspan="3"><img src="logo3.jpg" width="730" height="60" alt=""></td>
</tr>
</table>

die drei zellen in der mittleren reihe haben nach allen vier Seiten(!) einen Rand zur Nachbarzelle.

Entferne mal alles unnötige zwischen <table> <tr> <td> usw.
                                            ^    ^
Das verursacht in einigen Browsern diese Zwischenräume. Bei einem CSS-Layout nicht, gell *g*

LG Orlando

[Chräcker Heller]

Hallo,

gerne. Mach's doch einfach ;)

tja, eben.... das "einfach" ist das Problem ,-)

Entferne mal alles unnötige zwischen <table> <tr> <td> usw.

habe ich "natürlich" auch schon, alles in eine zeile geschrieben, aber das gleiche Ergebnis bekommen. Ich denke eher, daß es eine logik haben muß. Der IE5.5 wie der mozilla sind sich ja sonst so selten einig, wie was darzustellen ist. Es muß einen CSS-Grund geben, warum diese Zwischenräume da sind, aber auch im Archiv konnte keiner der klugen CSS-freaks den wirklich erläutern.... Aber wie dem auch sei, ich habe eine lösung gefunden, aber die ist mir fast zu peinlich ,-))))

Chräcker

[Chräcker Heller]

Hallo Chräcker,

wenn Du mal die Suchmaske mit den richtigen Werten füttern würdest, dann wäre Dir folgendes doch eher nun penliche Posting aufgefallen:

http://forum.de.selfhtml.org/archiv/2002/5/12907/#m71398

kopfschüttelnd,

Chräcker ;-)

PS. es hat schon seinen Grund, warum ich gerade für ein Senioren-Netzwerk eine Seite bastel, mein Gedächtnis läst doch auch etwas nach....

[Joachim]

hi,

nun ist ja das puzzlespiel mit zerstueckelten Grafiken im Tabellen auch eher "old" Style, der Versuch, sowas rein mit Css zu loesen duerfte schwierig sein. Die Logik der Zwischenraeume verstehe ich allerdings auch nicht, denn padding: 0px ist eigentlich unmissverstaendlich...
Anyway: mit einem kleinen Kompromiss waere Dir vielleicht geholfen, zumindestens im Moz schliessen sich so die Luecken. (Allerdings jetzt nur Mac-tested)

Nacht, Gruesse und bis denne...  Joachim

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Netzwerk-Garath</title>
<meta name="author" content="Chräcker">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">

<style type="text/css">
table {border: 0px;}
#td1, #td2, #td3, #td4, #td5 {
 line-height: 1px;
}
</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
<tr>
 <td id="td1" colspan="3"><img src="logo1.jpg" width="730" height="62" alt=""></td>
</tr>
<tr>
 <td id="td2"><img src="logo2_1.jpg" width="125" height="34" alt=""></td>
 <td id="td3"><img src="logo2_2.gif" width="516" height="34" alt=""></td>
 <td id="td4"><img src="logo2_3.jpg" width="89" height="34" alt=""></td>
</tr>
<tr>
 <td id="td5" colspan="3"><img src="logo3.jpg" width="730" height="60" alt=""></td>
</tr>
</table>
</body>
</html>

[Thomas J.S.]

Hallo Chräcker,

ein Bild in mehrere zerlegen, per Tabelle zusammenstückeln und sich dann über die Zwischenräume beschweren, ist so beliebt, daß ich es auch mal machen möchte.... naja, "möchte" eigendlich weniger, aber was solls:

mein Tabellenkonstrukt:

<table cellpadding="0" cellspacing="0" border="0">

wird mit folgenden css-Angaben gefüttert:

wozu?!?!

Wo fehlt mir was?

für table "fehlte":
border-collapse:collapse;

grüße
Thomas

[Chräcker Heller]

Hallo,

für table "fehlte":
border-collapse:collapse;

border-collapse??? was es alles gibt ,-))) Danke, ja, dann gehts. Aber da ich es ja auch verstehen möchte ;-)

Sollte ein Unterbinden des Rahmens die Gedanken über deren "übereinanderlegung" nicht überflüssig machen? Wo kein Rahemn da ist (none und dann noch 0px breit ,-)) kann man ja auch nichts beeinflussen.... anders gefragt: was sind das für zwischenräume, wenn "keine Rahmen"? (und wenn "Rahmen", warum konnte ich sie nicht per css unterbinden?)

Danke nochmals an alle fürs Mitdenken....

Chräcker

[Thomas J.S.]

Hallo Chräcker,

border-collapse??? was es alles gibt ,-))) Danke, ja, dann gehts. Aber da ich es ja auch verstehen möchte ;-)

Im Grunde hast du recht. Also gibt's nichts zu erklären. ;-)

Es ist eine Frage der Implementation wie Browser Dinge verstehen.

Grüße
Thomas