1. Accueil
  2. Question et réponse
  3. css style avec html

css style avec html

2010-08-09 4 views
2

Comment puis-je avoir cette autre boîte d'affichage en bas de la première?css style avec html

Si vous essayez ce code, ces 2 cases seront affichés ensemble:
AB

et je voudrais que ce soit comme ceci:
A
B

Merci

=== maintenant c'est ce que j'ai fait: mais ça va à gauche. Je veux qu'il reste du bon côté. Voici le code complet:

   <html> 
<head> 
<title>*|MC:SUBJECT|*</title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <style type="text/css" media="screen"> 
     p{margin-bottom:10px;} 

     /** 
     * @tab Page 
     * @section background color 
     * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding. 
     * @theme page 
     */ 
     body { 
      /*@editable*/ background-color:#FFFFFF; 
      text-align:center; 
     } 

     #layout { 
      margin:0 auto; 
      text-align:left; 
     } 

     /** 
     * @tab Header 
     * @section header top 
     * @tip Set the look of the archive link bar. 
     */ 
     #header-top { 
      /*@editable*/ background-color:#FFFFFF; 
      /*@editable*/ border-top:0px none; 
      /*@editable*/ border-bottom:0px none; 
      /*@editable*/ color:#505050; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:11px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      padding:15px 0 5px; 
      /*@editable*/ text-align:center; 
     } 

     /** 
     * @tab Header 
     * @section title style 
     * @tip Titles and headlines in your message body. Make them big and easy to read. 
     * @theme title 
     */ 
     .primary-heading { 
      /*@editable*/ color:#ACCB4E; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:48px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:100%; 
      margin:0; 
      padding:0px; 
      /*@editable*/ text-transform:uppercase; 
     } 

     /** 
     * @tab Header 
     * @section subtitle style 
     * @tip This is the byline text that appears immediately underneath your titles/headlines. 
     * @theme subtitle 
     */ 
     .secondary-heading { 
      /*@editable*/ color:#ACCB4E; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:20px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:100%; 
      margin:0; 
      padding:10px 0 0 0; 
      /*@editable*/ text-transform:uppercase; 
     } 

     /** 
     * @tab Body 
     * @section content 
     * @tip This is the default text style for the main content of your email. 
     * @theme content 
     */ 
     #content-left, #content-right { 
      /*@editable*/ background-color:#FFFFFF; 
      /*@editable*/ color:#808080; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:14px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:150%; 
      padding:15px 0 15px 20px; 
      vertical-align:top; 
      width:300px; 
     } 

     #content-right{ 
      vertical-align:top; 
     } 

     /** 
     * @tab Body 
     * @section green box 
     * @tip This is the default style for the green tip box of your email. 
     * @theme content 
     */ 
     #greenbox{ 
      /*@editable*/ background:#ACCB4E; 
      /*@editable*/ color:#FFFFFF; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:16px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:150%; 
      margin-top:20px; 
      padding:10px 20px; 
      /*@editable*/ text-transform:none; 
     } 

     /** 
     * @tab Body 
     * @section green tip box heading 
     * @tip This is the default style for the heading of the green tip box. 
     * @theme content 
     */ 
     #greenbox .secondary-heading { 
      /*@editable*/ color:#FFFFFF; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:20px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
     } 

     /** 
     * @tab Body 
     * @section sidebar widget headings 
     * @tip This is the default style for the sidebar widgets of your email. 
     * @theme content 
     */ 
     .widget .secondary-heading { 
      /*@editable*/ color:#ACCB4E; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:18px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:100%; 
      /*@editable*/ text-transform:none; 
     } 

     /** 
     * @tab Body 
     * @section sidebar widget text 
     * @tip This is the default style for the sidebar widgets of your email. 
     * @theme content 
     */ 
     .widget { 
      /*@editable*/ color:#808080; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:12px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:150%; 
      margin-top:20px; 
      margin-bottom:15px; 
      width:260px; 
     } 

     /** 
     * @tab Footer 
     * @section footer 
     * @tip You might give your footer a light background color and separate it with a top border 
     * @theme footer 
     */ 
     #footer { 
      /*@editable*/ background-color:#FFFFFF; 
      /*@editable*/ border-top:0px none; 
      /*@editable*/ border-bottom:0px none; 
      /*@editable*/ color:#909090; 
      /*@editable*/ font-family:Arial; 
      /*@editable*/ font-size:11px; 
      /*@editable*/ font-style:normal; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ line-height:14px; 
      padding:20px 0 20px 0; 
      /*@editable*/ text-align:center; 
     } 

     /** 
     * @tab Footer 
     * @section link style 
     * @tip Specify a color for your footer hyperlinks. 
     * @theme link_footer 
     */ 
     #footer a { 
      /*@editable*/ color:#5D7428; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ text-decoration:underline; 
     } 

     /** 
     * @tab Page 
     * @section link style 
     * @tip Specify a color for all the hyperlinks in your email. 
     * @theme link 
     */ 
     a, a:link, a:visited { 
      /*@editable*/ color:#5D7428; 
      /*@editable*/ font-weight:normal; 
      /*@editable*/ text-decoration:underline; 
     } 
    </style> 
</head> 
<body> 
    <table width="600" border="0" cellspacing="0" cellpadding="0" id="layout"> 
     <tr> 
      <td id="header-top" colspan="2" mc:edit="header-top"> 
       <p>Email not displaying correctly? <a href="*|ARCHIVE|*" title="View this email in your browser.">View it in your browser</a></p> 
      </td> 
     </tr> 
     <tr> 
      <td id="content-left" colspan="1"> 
       <div mc:edit="main"> 
        <!--<img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/environment_newsletter_header.png">--> 
        <img alt="" border="0" height="234px" src="http://gallery.mailchimp.com/86b4d752e397a2dbd09e3dd60/images/big_image_edited.2.jpg" width="400px" /> 
        <h1 class="primary-heading">Live Green</h1> 
        <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p> 
        <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo.</p> 
       </div> 
       <div id="greenbox" mc:edit="greenbox"> 
        <h2 class="secondary-heading">Green Living Tip</h2> 
        <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis. </p> 
       </div> 
      </td> 


    <tr> <div id="content-right" colspan="1"> 
     <div class="widget" mc:repeatable> 
      <div mc:edit="content-right-repeatable"> 
       <h2 class="secondary-heading">Green Living Tip</h2> 
       <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis.</p> 
       <p><a href="#">Read More</a></p> 
      </div> 
     </div> 
    </div> 
    </tr> 


<tr> 
    <div id="content-right" colspan="1"> 
     <div class="widget" mc:repeatable> 
      <div mc:edit="content-right-repeatable"> 
       <h2 class="secondary-heading">Green Living Tip</h2> 
       <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis.</p> 
       <p><a href="#">Read More</a></p> 
      </div> 
     </div> 
    </div> 
</tr> 




     </tr> 
     <tr> 
      <td id="footer" colspan="2" mc:edit="footer"> 
       <p><a href="*|UNSUB|*">Unsubscribe</a> | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend</a></p> 
       <p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.<br />*|LIST:DESCRIPTION|*<br />*|HTML:LIST_ADDRESS_HTML|*</p> 
      </td> 
     </tr> 
    </table> 
    <span style="padding: 0px;"></span> 
</body>

Source

2010-08-09 tintincutes

+0

Corrigé votre message pour montrer correctement ce que vous voulez dire, vous pouvez aller à une nouvelle ligne en laissant deux espaces à la fin de la ligne en cours. Pour plus d'informations, vous pouvez cliquer sur l'icône de point d'interrogation rose. –

+0

Cela devrait être sur Stack Overflow ... S'il vous plaît ne pas crosspost là, il sera migré automatiquement. – Hello71

+0

je vois merci beaucoup – tintincutes

Répondre

0

Vous pouvez résoudre ce problème en changeant de la TD en TR de. (Cela change de deux colonnes à deux lignes)

Source

2010-08-09 16:39:11

+0

salut Tom où est le point d'interrogation rose situé? je ne peux pas le voir merci – tintincutes

+0

C'est dans le coin supérieur droit lorsque vous éditez votre question, il explique comment vous pouvez taper les lignes correctement. Mais je l'ai changé pour vous déjà ... :-) –

2

Au lieu d'utiliser des tables, vous pouvez utiliser <div> s pour créer vos boîtes. Par défaut, les éléments <div> s'alignent les uns après les autres ... mais vous pouvez utiliser CSS pour les styler et les positionner comme vous le souhaitez.

Consultez le lien suivant pour voir ce que j'ai fait avec votre conception.

http://hristo.oskov.com/wp-content/uploads/2010/08/test.html

Si vous avez des questions sur ce que je faisais ou comment je l'ai fait, laissez-moi savoir et je serai heureux de vous expliquer en détail.

Espérons que cela aide!

Source

2010-08-09 16:49:08 Hristo

+0

merci Hristo c'est ce que j'ai fait mais c'est descendu tout en bas. Je voudrais qu'il reste dans le bon côté. ma page a 2 colonnes et je voudrais l'avoir sur la colonne de droite comment pouvez-vous faire cela? merci – tintincutes

+0

@tintincute ... regardez ma mise à jour. Faites-moi savoir si c'est ce que vous cherchiez. – Hristo

+0

@Hristo: vous l'avez fait encore mieux ;-) La boîte verte en bas vous l'avez fait au centre et plus longtemps. Mais c'est OK. J'étudierai ce code et je comprendrai. Merci de votre aide. Mais ceci est supposé être dans la première colonne. – tintincutes

2

Si vous utilisez simplement la table pour disposer des éléments individuels, vous pouvez (et devez) utiliser CSS pour cela. Il suffit de transformer les td en divs, et ils seront automatiquement placés les uns au-dessous des autres. Ensuite, si vous voulez changer de positionnement plus tard, vous pouvez juste mettre à jour votre CSS au lieu de réorganiser la structure de la table.

J'ai trouvé une belle série de tutoriels utiles au http://www.htmldog.com/guides/ lors du changement de disposition de table à base css.

Source

2010-08-09 16:49:49

+0

J'ai réellement css. mais je ne suis pas sûr si c'est celui-ci: # content-right {vertical-align: top;} comment puis-je le changer dans le css? – tintincutes

+0

s'il vous plaît voir ma question éditée – tintincutes

+0

Ouais j'allais prendre un coup à ce coup, mais ensuite j'ai vu qu'il utilise des tableaux pour la mise en page. –

Questions connexes

 Questions connexes