Kombinieren Sie separate Bilder zu einem einzigen Bild mit HTML-tags

Habe ich 3 Teile von Bildern und ich habe, um es anzuzeigen als einzelnes Bild und auch die links zu den 3 teilen von Bildern mithilfe von HTML-tags.

Erstellte ich eine Tabelle mit 1 Spalte und 2 Zeilen und ich steckte die Bilder in den 3-Bereich der Tabelle. Aber es haben einige Räume zwischen der oberen und der unteren Bilder (1. und 2. Zeile). Wie kann dieses problem beheben, und erstellen Sie eine einzelne Grafik ohne Leerzeichen und auch link in das 3. Bild.

Brauchen dringend Hilfe

<table style="width: 660px; border-collapse: collapse; height: 237px;" border="0" cellspacing="0" cellpadding="0" sizset="0" sizcache="15">
<tbody sizset="0" sizcache="15">
<tr>
<td><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/masthead-ball_top.jpg" width="665" height="197"></td>
</tr>
<tr>
<td><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/ball_bottom_left.jpg" width="579" height="37"><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/ball_bottom_right.jpg" width="86" height="37"></td>
</tr>
</tbody>
</table>

Ich habe die oben genannten code, haben aber immer noch Platz zwischen den Bildern. In meiner Unternehmens-website verwaltet werden mit der finalsite, also ich bin mit dem finalsite editor für diese ein.

  • Es würde helfen, wenn du posten könntest den code, den Sie bisher haben - vorzugsweise in jsfiddle.net—, so dass wir es sehen können. Vielleicht möchten Sie versuchen, die Einstellung der Bilder zu display: block mit CSS, aber es ist schwer zu sagen, aus Ihrer Frage, wie es steht.
  • jsfiddle.net/wLA3T/1/- der link für den code
  • Bei fast 20K rep, sollten Sie wissen, das war nicht die Antwort, sondern ein Kommentar.
  • sicher — ich dachte, die OP könnte aktualisiert haben, ist die Frage schnell, wodurch es einfacher, schreib einfach eine Antwort und update es mal etwas code gepostet wurde. Ich bin damit einverstanden die Inhalte, die ich gepostet war angemessen für einen Kommentar statt einer Antwort.
InformationsquelleAutor user1487320 | 2012-07-02
  1. 1

    Verwenden, cellpadding und cellspacing, die in der Tabelle Tags:

    <table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">

    und das 3. Bild als link benutzen Sie einfach

    <a href="http://www.example.com"><img src="yourimage.jpg" border="0" style="float:left;" /></a>

    EDIT:

    Hinzufügen style="float:left;" um Ihre img-tags.

    http://jsfiddle.net/H628X/1/

    • Möglicherweise müssen Sie auch Blick auf die border-collapse:collapse; css-Attribut, das zusammenbrechen der Rahmen um jede Zelle in der Tabelle.
    • Oder wir setzen border="0", so dass wir nicht haben keine Grenzen, die verhindern, dass anzeigen, die Teile des Bildes als einer 🙂
    • Klappt nicht immer, ich werde versuchen zu Graben und ein Beispiel später, und es kann nur bestimmte Browser, aber die Einstellung " cellpadding cellspacing und border auf 0 ist nicht ausreichend, um loszuwerden, die Lücke zwischen den Zellen in allen Fällen. Es ist manchmal eine Notwendigkeit für die border-collapse zu.
    • Also um auf der sicheren Seite sein, dann brauchen wir alle? cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;"
    • Um ehrlich zu sein, war es wohl schlecht Codierung auf meiner Seite eine Weile zurück, ich weiß nur noch, dass real Probleme mit einer bestimmten website, die ich machte zu der Zeit. Ich bin mir nicht 100% sicher, ob es nötig ist, ich weiß, border-collapse kollabiert die Grenzen von benachbarten Zellen in 1 Grenze, so kann es sein, dass die Einstellung border=0 an einzelnen Zellen oder Zeilen kann das Problem zu lösen? Ich bin nicht dieser Strom mit html und css obwohl. Ich werde versuchen, es später zu aktualisieren hier, wie erforderlich.
    • Können Sie post-Codes?
    • Ich werde später, im bei der Arbeit im moment, so don ' T haben es in der hand.
    • hehe ich meinte user1487320 post den code, aber er gelöscht sein Kommentar, nachdem er gepostet code 😀
    • Aktualisiert meine Antwort mit Beispiel.

    InformationsquelleAutor WolvDev
  2. 0

    Zusammen mit der @Wolv3r Antwort, wenn Sie nicht haben

    img {
   display:block;
}

    Inline oder mit style-tags, das führt zu Problemen in gmail /yahoo.

    Quelle für guten html-Code für E-Mail-Versand Methoden:

    http://24ways.org/2009/rock-solid-html-emails/

    InformationsquelleAutor Zork
Schreibe einen Kommentar