Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Witte ruimte rond afbeelding in Outlook

teacher
8 antwoorden
  • Met Ymlp.com heb ik een nieuwsbrief gemaakt. Twee afbeeldingen staan onder elkaar, zonder ruimte. Als ik van de afbeeldingen links maak zie ik in Outlook (2007) een witte ruimte tussen de afbeeldingen. In andere mailclients is dat niet.
    Hoe kan ik die witte ruimte verwijderen?
  • hoe het weergeven van dit soort dingen uitpakt kan per pc en per client verschillen. de vraag is of je daar altijd stuur op krijgt.
    maw voor jouw case: wat gebeurt er als je dat outlook probleem opgelost krijgt met de weergave in die andere clients….? oftewel: soms is accepteren van dingen ook een fraaie oplossing :wink:
  • Dat is niet het antwoord dat de klant wil horen ;-)
    De twee afbeeldingen vormen 1 grote, dus de ruimte is een storend gezicht.
  • dan zul je toch wat openheid moeten geven over de gebruikte opbouw/code…
  • ik denk aan een display:inline…
    http://www.handleidinghtml.nl/css/eigenschappen/display/beschrijving.html#inline
  • @teacher: ik heb je tip geprobeerd, maar helaas… geen verandering.

    @derkdejong. De code is:
    [code:1:2517067085]
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    body {
    min-width:800px;
    margin: 0 auto;
    clear:right;
    text-align:left;
    }

    img {
    border: none;
    padding: 0;
    margin: 0;
    }

    .adres {
    width: 371px;
    height: 76px;
    background-image: url('http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_08.jpg');
    background-color: #f25822;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    }

    .adres a {
    color: #ffffff;
    text-decoration: none;
    }

    .link {
    color: #ffffff;
    text-decoration: none;
    }
    </style>
    </head>
    <body style="min-width: 800px; max-width: 810px; margin: 0 auto; clear: right; text-align: left;">
    <p style="text-align: center; font-family: Arial; font-size: 16pt;">Voor al uw oranje artikelen kunt u ook bij sive terecht!</p>
    <p style="text-align: center;">
    <table width="805" border="0" cellpadding="0" cellspacing="0" style="width: 805px; border-collapse: collapse; margin: 0; padding: 0;">
    <tr>
    <td>
    <a href="http://www.sive.nl/?products=feestdagen"><img align=left width="800" height="147" src="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_01.jpg" border="0" style="border: 0; margin: 0;"></a>
    <a href="http://www.sive.nl/?products=feestdagen"><img align=left width="800" height="147" src="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_02.jpg" border="0" style="border: 0; margin: 0;"></a>
    <a href="http://www.sive.nl/?products=feestdagen"><img align=left width="800" height="147" src="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_03.jpg" border="0" style="border: 0; margin: 0;"></a>
    <a href="http://www.sive/?products=feestdagen"><img align=left width="800" height="147" src="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_04.jpg" border="0" style="border: 0; margin: 0;"></a>
    </td>
    </tr>
    <tr>
    <td>
    <table width="800" border="0" cellpadding="0" cellspacing="0" style="display: inline; width: 800px; border-collapse: collapse; margin: 0; padding: 0;">
    <tr>
    <td>
    <img align=left width="176" height="76" src="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_06.jpg" border="0" style="border: 0; margin: 0;">
    </td>
    <td class="adres" width="371" height="76" align="center" bgcolor="#f25822" background="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_08.jpg">
    <font color="#ffffff">Ekijt 404, 569<br />
    <span style="font-weight: bold; font-style: italic;">t</span> +31 269, <span style="font-weight: bold; font-style: italic;">f</span> +31 421<br />
    <span style="font-weight: bold; font-style: italic;">e</span> .nl
    </font>
    </td>
    <td>
    <img align=left width="253" height="76" src="http://www.yn5.nl/2b-xcl/mailing/map/wk12_NL_07.jpg" border="0" style="border: 0; margin: 0;">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </p>
    </body>
    </html>[/code:1:2517067085]

    En een afbeelding van het resultaat:
    [img:2517067085]http://www.yn5.nl/2b-xcl/mailing/map/witregel.jpg[/img:2517067085]
  • Precies waar de streep staat, begin je een nieuwe tabel binnen een cel. Wellicht zit daar de crux? Een margin of padding die eromheen bedacht wordt ofzo?

    Misschien moet je voor het gemak gewoon even af van die extra tabel binnen de andere tabel.
  • Die tabel is inderdaad het probleem. Maar die heb ik nodig om in het oranje vlak tekst te kunnen plaatsen.

    EDIT:
    Nee, ik was te voorbarig. Alles wat na de afbeelding komt wordt met de witruimte getoond. Ook tekst.
    Als ik een <span> gebruik staat het netjes tegen elkaar aan. Maar bijv. een <div> of <p> geven een witruimte. Ook als ik padding en margin op 0 heb staan.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.