Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Table hoger dan height

Pagina: 1
Acties:

Onderwerpen


  • NielsSanders
  • Registratie: februari 2012
  • Laatst online: 19-03 15:51
Als iemand mij kan helpen met mijn - waarschijnlijk zeer eenvoudig - probleem, dan zou ik dat zeer waarderen.

Ik ben bezig met het maken van een email signature. Hiervoor wil ik gegevens plaatsen in een table. Uiteindelijk wil ik een signature zoals volgend voorbeeld:
http://nielssanders.nl/emailsignature/sig4.jpg

De Html/Css maak ik in Dreamweaver. Met onderstaande code ziet mijn signature er als volgt uit:
http://nielssanders.nl/emailsignature/sig1.jpg

In live mode - of in een browser ziet het er echter zo uit:
http://nielssanders.nl/emailsignature/sig2.jpg

Het probleem waar ik tegenaan loop is dat de table hoger is dan ik aangeef. Hierdoor loopt de 'blauwe cel' onder door, lager dan de foto. Zie:
http://nielssanders.nl/emailsignature/sig3.jpg

Ik vermoed dat er toch iets speelt als een padding of margin. Maar ik kan de fout niet ontdekken... |:( Wie helpt?

De code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
height: 80px;
padding: 0;
margin: 0;
}

td, img {
padding: 0;
margin: 0;
}

#Avatar {
width: 80px;
height: 80px;
}

#Whitespace {
width: 2px;
}

#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}

</style>
</head>

<body>
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" id="Avatar"><img src="enhanced-buzz-16839-1297795475-9.jpg" height="80px" width="80px"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>

  • foxgamer2019
  • Registratie: februari 2009
  • Niet online
Verschrikkelijk dat DW, gebruik gewoon editor (zoals Np++) en CSS.
Het maakt het ook allemaal wat eenvoudiger.

Verder moet je de 'height' aanpassen op basis van de afbeelding.

  • NielsSanders
  • Registratie: februari 2012
  • Laatst online: 19-03 15:51
Thx voor de tip. Zal binnenkort eens kijken naar een andere editor. DW is inderdaad niet zo fijn (meer).

Ontopic: zover ik begrijp gebruik ik zowel voor de table als img de height afmeting 80px. Wat is er nu dan niet juist?

  • foxgamer2019
  • Registratie: februari 2009
  • Niet online
Kijk eens naar <div>, <ul>, <li>, die schalen toch iets makkelijker en zijn flexibeler.
Gebruik daarvoor floats, etc. Maar het is op T.net niet echt de bedoeling volledige code te schrijven voor de andere. ;)

Verder dien je ook font-sizes (in px bijvoorbeeld), etc. op te geven als je het perfect wilt hebben.

foxgamer2019 wijzigde deze reactie 31-08-2015 15:03 (25%)


  • NMe
  • Registratie: februari 2004
  • Laatst online: 02:08

NMe

Admin Devschuur®

Quia Ego Sic Dico.

Gewoon de table geen height geven, en inderdaad de border-spacing, padding en margin van de table-elementen op 0 zetten. Niet de padding van alle elementen zoals gesuggereerd in de bovenstaande post, want dat heeft ook effect op de rest van je mail.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • foxgamer2019
  • Registratie: februari 2009
  • Niet online
quote:
NMe schreef op maandag 31 augustus 2015 @ 15:00:
Gewoon de table geen height geven, en inderdaad de border-spacing, padding en margin van de table-elementen op 0 zetten. Niet de padding van alle elementen zoals gesuggereerd in de bovenstaande post, want dat heeft ook effect op de rest van je mail.
Helemaal gelijk, niet over nagedacht! :D

  • NielsSanders
  • Registratie: februari 2012
  • Laatst online: 19-03 15:51
Heb het probleem opgelost. Heb img vertical-align: middle gegeven. Dat was het. Thx!

  • maarud
  • Registratie: mei 2005
  • Laatst online: 10-06 21:54
Hou deze ook goed in de gaten, e-mailopmaak is altijd drama en hij kan er super uitzien op je scherm maar bij iemand in Outlook of Gmail een stuk minder ;(
https://www.campaignmonitor.com/css/

  • NielsSanders
  • Registratie: februari 2012
  • Laatst online: 19-03 15:51
@Maarud, thanks voor advies. Had de link ook gevonden. Vervelend dat mailclients extreem achterlopen...

  • foxgamer2019
  • Registratie: februari 2009
  • Niet online
quote:
maarud schreef op woensdag 02 september 2015 @ 10:49:
Hou deze ook goed in de gaten, e-mailopmaak is altijd drama en hij kan er super uitzien op je scherm maar bij iemand in Outlook of Gmail een stuk minder ;(
https://www.campaignmonitor.com/css/
Thanks, deze wist ik ook nog niet. :)

Je kan beter met 'plaatjes' werken, maar ook deze worden tegenwoordig geblokkeerd, al is Google daarmee gestopt.
Pagina: 1


Call of Duty: Black Ops 4 HTC U12+ dual sim LG W7 Google Pixel 3 XL OnePlus 6 Battlefield V Samsung Galaxy S9 Dual Sim Google Pixel 3

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V. © 1998 - 2018 Hosting door True

*