28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je réalise actuellement un template de newsletter en XHTML pour Mailchimp et le XHTML étant loin, les balises .DIV me manquent. Mon soucis actuel est que je dois mettre en forme du texte dans un tableau mais que ce dernier ne veut pas m'obéir ! GGGRRRR

Je voudrais mon texte au sommet de ma colonne ; l'ennui c'est que dès que je charge le style de mon texte (via une balise .h4 par exemple et une font google) le texte se prend 15 px d'interlignage et cela même avec un line-height.
Le vertical align ne change rien lui non plus... Smiley bawling

A L'AIDEEEEUUUHHH !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <!-- Facebook sharing information tags -->
        <meta property="og:title" content="*|MC:SUBJECT|*" />
        
        <title>*|MC:SUBJECT|*</title>

		<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700,900,200italic,300italic,400italic,600italic,700italic' rel='stylesheet' type='text/css'>
        	<style type="text/css">
			/* NOTE: CSS should be inlined to avoid having it stripped in certain email clients like GMail. 
			MailChimp automatically inlines CSS for you or you can use this tool:  http://beaker.mailchimp.com/inline-css.  */
			
	        
			/* Client-specific Styles */
			#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
			body{width:100% !important;} /* Force Hotmail to display emails at full width */
			body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
			body{background: #e7e7e7;} /* Couleur du background. */
			
			#gros_titre{ line-height:1.2;}
			.h4{color:#666; font-family: 'Titillium Web', sans-serif; font-weight:700; font-size:30px; text-transform:uppercase;}
			.h1{color:#e5221f; font-family: 'Titillium Web', sans-serif; font-weight:600; font-size:15px; text-transform:none;}

			/* Reset Styles */
			body{margin:0; padding:0;}
			img{border:none; font-size:14px; font-weight:bold; height:auto; line-height:100%; outline:none; text-decoration:none; text-transform:capitalize;}
			#global{height:100% !important; margin:0; padding:0; width:100% !important;}
			
			
			#courrielbrowser{color:#706f6f; font-family: 'Titillium Web', sans-serif; font-size:10px; text-align:center; height:15px; padding:15px 0px 5px 0px;}
			#courrielbrowser A:link, A:visited{color:#e52028; text-decoration:none;}
			#courrielbrowser A:hover{color:#706f6f; text-decoration:none;}
			
			#logopromoguide{height:68px; padding-left:20px;}
			#regiepub{height:40px; padding-right:20px; padding-top:28px;}
			
			#slogan{color:white; font-family: 'Titillium Web', sans-serif; font-weight:600; font-size:17px; text-transform:uppercase;}
		</style>
</head>

    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">

    <div align="center">
    <table width="720" border="0" cellspacing="0" cellpadding="0">
	
  <!-- courrielbrowser -->
  <tr height="15px">
    <td colspan="5">
    	<div mc:edit="std_preheader_links" id="courrielbrowser"><!-- *|IFNOT:ARCHIVE_PAGE|* -->Si ce courriel ne s’affiche pas correctement, <a href="*|ARCHIVE|*" target="_blank">cliquez ici!</a><!-- *|END:IF|* --></div></td>
  </tr>

  <!-- header -->
  <tr>
    <td colspan="3" height="80px">
    	<div id="logopromoguide"><img src="img/logo_promo.png" width="171" height="68"></div>
	</td>
    <td colspan="2" align="right">
    <div id="regiepub"><img src="img/regiepublicitaire.png" width="250" height="41"></div>
	</td>
  </tr>
  
  <tr>
    <td colspan="5" background="img/background_slogan.png" height="42px" align="center" valign="top" style=" padding-top:4px;"><span id="slogan" mc:edit="std_preheader_content">affinez votre ciblage publicitaire</span></td>
  </tr>
</table>
  
<table width="700px" style="border:solid 10px white" cellspacing="0" cellpadding="0">
  <tr>
  <td colspan="5" style="background-color:white;" align="center">
  
  		<!-- // Begin Module: Standard Header Image \\ -->
		<img src="img/headerimage.jpg" style="max-width:680px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
		<!-- // End Module: Standard Header Image \\ -->
        
  </td>
  </tr>
</table>

<!-- Blanc -->
<table width="700px" height="10" border="0" cellspacing="0" cellpadding="0">
	<tr>
    <td></td>
    </tr>
</table>
<!-- Blanc -->

<table width="720px" height="800px" border="0" cellspacing="0" cellpadding="0">
	<tr>
    <td width="10px"></td>
    <td width="520px" bgcolor="#FFFFFF" valign="top">
        
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
    		<tr valign="top">
            	<td>
    			<p class="h4">dans notre prochain numéro</p><br />
                Sortie prévue le 19 mars 2013
                </p>                
                </td>
            </tr>
            <tr height="18px">
            	<td><img src="img/filet_3compos.png" width="500" height="18" /></td>
          	</tr>
        </table>
        
    </td>
	<td width="10px"></td>
	<td width="170"></td>
	<td width="10px"></td>
    </tr>
    <tr>
    <td width="10px">&nbsp;</td>
    <td width="520px" bgcolor="#FFFFFF">&nbsp;</td>
	<td width="10px">&nbsp;</td>
	<td width="170">&nbsp;</td>
	<td width="10px">&nbsp;</td>
    </tr>
</table>

    </div>
	</body>
    
</html>