Problème de marge

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Zang, 21 Mars 2011.

  1. Zang
    Zang WRInaute impliqué
    Inscrit:
    16 Septembre 2004
    Messages:
    883
    J'aime reçus:
    0
    Bonjour,

    J'avance plutôt bien sur mon site et habituellement je trouve la solution en trifouillant moi même mais la je bloque, sur un truc qui me semble simple pourtant, peut être la fatigue. J'ai donc inséré un bouton J'aime sur chacune de mes news, le problème étant que l'espace entre ce module et le module Tags en dessous est trop large à mon gout (vous pouvez le voir sur www.jeuxonline.ca), je cherche donc à réduire la marge du dessus, sachant que le module facebook n'est dans aucun div. Voici mon code du head jusqu'à l'endroit problématique :

    Code:
    <!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 name="y_key" content="4dc6fc20168f4128" />
     <meta name="google-site-verification" content="vNo6wpWot7HhTEB7iVcReQRdNzexG4osqAk-OdqOYTk" />
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}{block:TagPage} - Posts Tagged "{Tag}"{/block:TagPage}{block:DayPage} - Posts From {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}{/block:DayPage}{block:SearchPage} - Search Results For "{SearchQuery}"{/block:SearchPage}</title>
      {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}  
    <meta property=”og:title” content=”{block:PostTitle}
    {PostTitle}
    {/block:PostTitle}”>
    
      <link rel="shortcut icon" href="{Favicon}"/>
      <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
      <meta name="image:Background" content="http://static.tumblr.com/zdyq0jx/inGl9uiz9/simplyblue.png"/>
      <meta name="color:Title" content="#eeeeee"/>
      <meta name="color:Title Shadow" content="#000000"/>
      <meta name="color:Content" content="#4D4D4D"/>
      <meta name="color:Content Shadow" content="#FFFFFF"/>
      <meta name="color:Content Background" content="#D6D6D6"/>
      <meta name="color:Link" content="#00008B"/>
      <meta name="color:Chat Even" content="#8B0000"/>
      <meta name="color:Chat Odd" content="#008B00"/>
      <meta name="if:Use Background image" content="1"/>
      <meta name="if:Tile Background" content="1"/>
      <meta name="if:Expand Background" content="1"/>
      <meta name="if:Fix Background Position" content="1"/>
      <meta name="if:Center Layout" content="1"/>
      <meta name="if:Show Posts Dates" content="1"/>
      <meta name="if:Show Archive Icon" content="1"/>
      <meta name="if:Show RSS Icon" content="1"/>
      <meta name="if:Show Random Icon" content="1"/>
      <meta name="text:Disqus Shortname" content=""/>
      <meta name="text:Email Address" content=""/>
      <style type="text/css">
    @font-face {
     font-family: Ubuntu;
     src: url(http://static.tumblr.com/zdyq0jx/n0tl9uklf/ubunturegular.ttf);
    }
    @font-face {
     font-family: Ubuntu;
     font-weight: bold;
     src: url(http://static.tumblr.com/zdyq0jx/XgPl9ukmz/ubuntubold.ttf);
    }
    @font-face {
     font-family: Ubuntu;
     font-style: italic;
     src: url(http://static.tumblr.com/zdyq0jx/tGZl9ukqc/ubuntuitalic.ttf);
    }
    @font-face {
     font-family: Ubuntu;
     font-weight: bold;
     font-style: italic;
     src: url(http://static.tumblr.com/zdyq0jx/qwTl9ukrm/ubuntubolditalic.ttf);
    }
    body {
     font-family: Ubuntu, sans-serif;
     color: {color:Content};
            font-size: 15px;
     text-shadow: {color:Content Shadow} 0px 1px 0px;
     background-color: {color:Background};
     {block:IfUseBackgroundImage}
     background-image: url({image:Background});
     {/block:IfUseBackgroundImage}
     {block:IfNotTileBackground}
     background-repeat: repeat;
     {/block:IfNotTileBackground}
     {block:IfExpandBackground}
     background-size: 100% 100%;
     {/block:IfExpandBackground}
     {block:IfFixBackgroundPosition}
     background-attachment: fixed;
     {/block:IfFixBackgroundPosition}
    }
    html, body {
     margin: 0px;
     padding: 0px;
    }
    {block:IfCenterLayout}
    .center {
     width: 1018px;
     margin: auto;  
    }
    {/block:IfCenterLayout}
    a {
     color: {color:Link};
     text-decoration: none;
    }
    h1 {
     font-size: 48px;
     color: {color:Title};
     text-shadow: {color:Title Shadow} 0px 0px 10px;
     padding-left: 192px;
    }
    h1 a {
     color: inherit;
     
    }
    
    h1bis {
     font-family: Verdana;
     word-spacing:10pt;
     font-size: 20px;
     font-weight: bold;
     margin: 14px 0px 0px;
            color: #FFFFFF
    
    }
    
    td {
     vertical-align: top;
    }
    h3 {
     font-size: 24px;
     margin: 14px 0px 0px;
            color: #C83F1C
    }
    
    h4 {
     font-size: 21px;
     margin: 0px 0px 0px;
            color: #000000
    
    }
    
    h5 {
     font-size: 12px;
     margin: 0px 0px 0px;
            color: #006699
    }
    
    h6 {
     font-size: 10px;
     margin: 0px 0px 0px;
            color: #000000
    }
    
    p {
     margin: 6px 0px;
    }
    img, img a {
     max-width: 395px;
     height: auto;
     border: 0px;
    }
    blockquote {
     font-style: italic;
    }
    /************************CONTENT BOXES************************/
    .post, #description, .sidebar {
     width: 300px;
     padding: 10px;
     margin: 24px 24px 24px 48px;
     border: 1px solid grey;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     background-color: {color:Content Background};
     background-image: url(http://data.imagup.com/6/1114818764.jpg);
     background-size: 100% 100%;
     -webkit-box-shadow: 0px 2px 8px #000;
     -moz-box-shadow: 0px 2px 8px #000;
     box-shadow: 0px 2px 8px #000;
    }
     
    .facebook {
     width: 300px;
    
     padding: 10px;
     margin: 24px 24px 24px 48px;
     border: 1px solid grey;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     background-color: #FFFFFF;
     background-size: 100% 100%;
     -webkit-box-shadow: 0px 2px 8px #000;
     -moz-box-shadow: 0px 2px 8px #000;
     box-shadow: 0px 2px 8px #000;
    }
    .post {
     width: 400px;
     margin: 24px 0;
    }
    .post::after, #description::after, .sidebar::after {
     content: ".";
     clear: both;
     display: block;
     height: 0px;
     visibility: hidden;
    }
    .sidebar .icon {
     width: 48px;
     height: 48px;
     vertical-align: middle;
    }
    .sidebar h3 {
     margin-bottom: 14px;
    }
    .portrait {
     padding: 16px;
    margin: -8px 0;
     background-image: url(http://static.tumblr.com/zdyq0jx/mXQl9uj5h/user.png);
     float: left;
             
    }
    .followed {
     padding: 12px;
     background-image: url(http://static.tumblr.com/zdyq0jx/gy8l9uj7g/user72.png);
     background-size: 72px 72px;
     float: left;
    }
    #posts {
     padding-left: 192px;
     list-style: none;
    }
    .post ul {
     list-style: none;
     padding-left: 20px;
    }
    .post ul li::before {
     content: "\2192 \2003"
    }
    .post .icon {
     float: left;
     margin-left: -96px;
    }
    /************************DATES************************/
    .date {
     text-shadow: white 0px 0px 0px;
     text-transform: uppercase;
     margin: 10px;
     position: relative;
     float: left;
     margin-left: -182px;
    }
    .day {
     position: absolute;
     bottom: 8px;
     text-align: center;
     width: 96px;
     font-size: 42px;
     font-weight: bold;
     color: #333;
     margin: 0;
     padding: 0;
    }
    .month {
     position: absolute;
     bottom: 63px;
     left: 13px;
     font-size: 12px;
     font-weight: bold;
     color: white;
     margin: 0;
     padding: 0;
    }
    .day a, .month a {
     color: inherit;
    }
    /************************PAGINATION************************/
    .older {
     float: left;
     margin-left: -96px;
    }
    .newer {
     float: right;
     margin-right: -96px;
    }
    .pagination {
     font-size: 32px;
     text-align: center;
     line-height: 96px;
    }
    .pagination img {
     vertical-align: middle;
    
    }
    
    .menu a { /* Les liens qui ne sont pas sous le curseur. */
    	color: #FFFFFF; //ta couleur
    	text-decoration:none; // pas de soulignement
    	font-family: Verdana; // la font du texte
    }
    .menu a:hoover { /* Les liens lorsque le curseur est dessus. */
    	color: #FFFFFF; //ta couleur
    	text-decoration:none; // pas de soulignement
    	font-family: Verdana; // la font du texte
    }
    .menu a:visited { /* Les liens visités. */
    	color: #FFFFFF; //ta couleur
    	text-decoration:none; // pas de soulignement
    	font-family: Verdana; // la font du texte
    }
    /************************TAGS************************/
    .tags {
     font-size: 11px;
     font-style: italic;
    margin-top: -10px;
    }
    /************************SEARCH************************/
    .search {
     font-size: 20px;
     font-weight: bold;
    }
    .searchbox {
     border: 0px;
     width: 150px;
     height: 36px;
    }
    .searchbutton {
     width: 48px;
    }
    /************************NOTES AND COMMENTS************************/
    div.note, .disqus {
     float: right;
     width: 48px;
     height: 48px;
     margin-right: -48px;
     text-shadow: white 0 0 0;
     font-style: normal;
     font-weight: bold;
     font-size: 14px;
     line-height: 48px;
     text-align: center;
     color: #333;
    }
    div.note a, .disqus a {
     color: inherit;
    }
    div.note {
     background-image: url(http://static.tumblr.com/zdyq0jx/nzGl9ujcn/notes48.png);
     background-size: 48px;
     {block:IfDisqusShortname}
     margin-top: 48px;
     {/block:IfDisqusShortname}
    }
    .disqus {
     background-image: url(http://static.tumblr.com/zdyq0jx/aRgl9ujd6/comments48.png);
     background-size: 48px;
     line-height: 40px;
    }
    ol.notes {
     padding-left: 0px;
     list-style-type: none;
    }
    ol.notes a {
     color: black;
    }
    ol.notes blockquote {
     margin: 3px 20px;
    }
    ol.notes blockquote a {
     color: #4D4D4D;
    }
    .avatar {
     padding: 4px;
     background-image: url(http://static.tumblr.com/zdyq0jx/H2Ul9uj6m/user24.png);
     background-size: 24px;
     vertical-align: middle;
    }
    /************************REBLOGS************************/
    img.reblog {
     padding: 16px;
     background-image: url(http://static.tumblr.com/zdyq0jx/mXQl9uj5h/user.png);
     float: left;
     margin-left: -96px;
     margin-top: 96px;
     clear: right;
    }
    /************************QUOTE POSTS************************/
    .quote {
     font-size: 32px;
     font-style: italic;
    }
    .source {
     font-size: medium;
     font-style: none;
     text-align: right;
    }
    /************************AUDIO POSTS************************/
    .albumart {
     width: 144px;
     padding: 24px;
     background-image: url(http://static.tumblr.com/zdyq0jx/XpXl9ujdx/album.png);
     background-size: 192px;
     float: left;
    }
    .track {
     font-size: 32px;
     font-weight: bold;
    }
    .artist {
     font-size: 32px;
    }
    .album {
     font-size: 24px;
    }
    /************************ANSWER POSTS************************/
    .question {
     font-size: 24px;
     font-weight: bold;
     min-height: 96px;
    }
    .answer {
    }
    /************************CHAT POSTS************************/
    .chat .even {
     list-style: none;
     color: {color:Chat Even};
    }
    .chat .odd {
     list-style: none;
     color: {color:Chat Odd};
    }
    .label {
     font-weight: bold;
     text-align: right;
    }
    /************************TWEETS************************/
    #twitter a {
     color: #006699;
    font-size: 20px;
    }
    .tweet {
            color: black;
     border-top-style: solid;
     border-top-color: gray;
     border-top-width: 1px;
     padding: 2px 0px;
            font-size: 14px;
    }
    /************************ABOUT************************/
    .about {
     text-align: right;
     font-size: 10px;
     color: {color:Title};
     text-shadow: {color:Title Shadow} 0px 1px 1px;
    }
    .about a {
     font-weight: bold;
     color: inherit;
    }
    /************************END OF CSS************************/
      </style>
      <style type="text/css">{CustomCSS}</style>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-22061394-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
     </head>
     <body>
     <div class="center">  
      <h1><a href="/"><img src="http://data.imagup.com/5/1114786667.png" alt="Jeux Vidéo" /></a>
            <a href="/rss"><img src="/themes/5/rss.gif" id="rss" alt="RSS"/></a></h1>
    <h1bis><div class="menu"><a href="http://www.jeuxonline.ca">JeuxVidéo</a> <a href="http://www.jeuxonline.ca/tests">Tests</a> Fiches Vidéos Forum Rédac</div></h1bis>
      <table><tbody><tr>
      <td>
      <ol id="posts">
      {block:SearchPage}
       <li class="post search">
        Showing {SearchResultCount} results for {SearchQuery}.
       </li>
      {/block:SearchPage}
      {block:DayPage}
       <li class="post search">
        Showing posts from {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}.
       </li>
      {/block:DayPage}
      {block:TagPage}
       <li class="post search">
        Showing posts tagged “{Tag}”.
       </li>
      {/block:TagPage}
      {block:Posts}
      {block:IfShowPostsDates}
      {block:NewDayDate}
       <div class="date">
        <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">
         <div class="day">{DayOfMonthWithZero}</div>
         <div class="month">{Month}</div>
         <img src="http://static.tumblr.com/zdyq0jx/sFdl9ujev/date2.png" alt="Date"/>
        </a>
       </div>
      {/block:NewDayDate}
      {/block:IfShowPostsDates}
      {block:Text}
       <li class="post text">
        <a href="{Permalink}"><img class="icon" src="http://static.tumblr.com/zdyq0jx/Jbbl9ujfn/text.png" alt="Text"/></a>
       {block:RebloggedFrom}
        <a href="{ReblogRootURL}"><img class="reblog" src="{ReblogRootPortraitURL-64}" title="Originally by {ReblogRootName}" alt="Originally by {ReblogRootName}"/</a>
       {/block:RebloggedFrom}
       {block:NoteCount}
        <div class="note"><a href="{Permalink}#notes">{NoteCount}</a></div>
       {/block:NoteCount}
       {block:IfDisqusShortname}
        <div class="disqus"><a class="dsq-comment-count" href="{Permalink}#disqus_thread"></a></div>
       {/block:IfDisqusShortname}
        <h3>{Title}</h3>
        {Body}<br>
    <iframe src="https://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:60px;"></iframe>
       {block:HasTags}
        <span class="tags"><br/>Tagged:  
        {block:Tags}
         <a href="{TagURL}">{Tag}</a>,
        {/block:Tags}
        </span>
       {/block:HasTags}  
     
  2. davyd
    davyd Nouveau WRInaute
    Inscrit:
    24 Février 2011
    Messages:
    24
    J'aime reçus:
    0
    Le bouton j'aime et facebook dans un div en float:left et ensuite margin top rihgt bottom left
     
Chargement...
Similar Threads - Problème marge Forum Date
WordPress Un problème de marge Développement d'un site Web ou d'une appli mobile 5 Février 2020
problème marge droite body 100% / Ipad et Iphone Développement d'un site Web ou d'une appli mobile 7 Août 2013
Problème marge du pied de page Développement d'un site Web ou d'une appli mobile 9 Mai 2011
probleme de marge de page - Resolu Développement d'un site Web ou d'une appli mobile 5 Août 2010
Problème de marge sous IE6 Développement d'un site Web ou d'une appli mobile 30 Mars 2009
Probleme avec une marge inutile dans mon iframe Développement d'un site Web ou d'une appli mobile 8 Juin 2008
Problème de marge négative en basse résolution Développement d'un site Web ou d'une appli mobile 24 Avril 2006
[CSS] problème de marge dans liste Développement d'un site Web ou d'une appli mobile 28 Octobre 2005
problème avec le développeur Droit du web (juridique, fiscalité...) Mercredi à 14:05
Problème désindexation des pages de Google Débuter en référencement Mardi à 18:25
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Problème avec GA4 : nb de visiteurs temps réel et par jour Google Analytics 19 Avril 2022
Problème indexation pages précises en React.js Débuter en référencement 19 Avril 2022
Problème de référencement Demandes d'avis et de conseils sur vos sites 8 Avril 2022
Problème adsence : Annonces ne s'affichent plus AdSense 10 Mars 2022