Marges problématiques

WRInaute impliqué
Bonjour,

Voilà j'ai voulu changer l'aspect de mes pages tests, plus exactement de celle la http://www.jeuxonline.ca/tests/PES-2011/ , tout se passait bien jusqu'au moment ou j'ai souhaité mettre une image en en tête de mon bloc. J'ai donc enlevé le paddin 10px de mon bloc (sinon il y avait un contour sur l'image), et la toutes les marges de mon bloc ont disparues. En gros margin-left/top etc ... n'ont plus d'effet, mon menu s'est retrouvé collé au bloc (j'ai ajouté un div avec une marge bottom pour arranger ça), mais surtout il n'est plus à la bonne distance de la gauche de l'écran, ce qui fait que pour certaines résolutions, les menus de droite sortent de l'écran. Auriez vous une solution pour que je puisse réduire l'écart entre la partie gauche et mon premier bloc (celui ou se trouve le test) ?

Autre question, je n'arrive pas à espacer mes colonnes de texte à l'intérieur de mon bloc central, une idée ?

Merci, voici le code

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JeuxOnline > Test PES 2011 3D sur Nintendo 3DS </title>
  <meta name="description" content="Test du jeu PES 2011 dans sa version Nintendo 3DS, l'une des références dans le domaine des jeux de football." />  
  <link rel="shortcut icon" href="http://30.media.tumblr.com/avatar_44bc7ac2161c_16.png"/>
  <link rel="alternate" type="application/rss+xml" href="http://www.jeuxonline.ca/rss"/>
  <meta name="image:Background" content="http://static.tumblr.com/zdyq0jx/inGl9uiz9/simplyblue.png"/>
  <meta name="color:Background" content="#066083"/>

  <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">
}

 
body {
 font-family: sans-serif;
 text-align: justify;
 color: ;
        font-size: 15px;
 text-shadow:  0px 1px 0px;
 background-color: ;
 
 
 
 
}
html, body {
 margin: 0px 0px 0px 170px;
 padding: 0px;
}

a {
 color: ;
 text-decoration: none;
}
h1 {
 font-size: 48px;
 color: ;
 text-shadow:  0px 0px 10px;
 padding-left: 192px;
}
h1 a {
 color: inherit;
 
}
td {
 vertical-align: top;
}

h1bis {
 font-family: Verdana;
 word-spacing:10pt;
 font-size: 20px;
 font-weight: bold;
 margin: 14px 0px 0px;
        color: #FFFFFF

}
h3 {
 font-size: 24px;
 margin: 14px 0px 0px;
        color: #C83F1C
}

h4 {
 font-family: sans-serif;
 font-size: 24px;
 margin: 0px 0px -23px 7px;
        color: #FFFFFF
}

h5 {
 font-family: Arial;
 font-weight: bold;
 font-size: 18px;
 margin: 0px 0px 0px 7px;
        color: #99CD47

}

h6 {
 font-family: Arial;
 font-size: 10px;
 margin: 0px -5px 0px 7px;
        color: #006699

}

h7 {
 font-family: Arial;
 font-size: 13px;
 text-align: justify;
 margin: 0px -5px 0px 0px;
        color: #000000

}

h7b {
 font-family: Arial;
 font-size: 13px;
 font-style: italic;
 text-align:justify;
 margin: 0px -5px 0px 0px;
        color: #000000

}

h8 {
 font-family: Arial;
 font-size: 18px;
 font-weight: bold;
 margin: 0px -5px 0px 3px;
        color: #000000

}

h9 {
 font-family: Arial;
 font-size: 12px;
 font-weight: bold;
 margin: 0px -5px 0px 3px;
        color: #000000

}

h10 {
 font-family: Arial;
 font-size: 12px;
 margin: 0px -5px 0px 5px;
        color: #006699

}

h11 {
 font-family: Arial;
 font-size: 13px;
 font-weight: bold;
 margin: 0px -5px 0px 0px;
        color: #000000

}

p {
 margin: 6px 0px;
}
img, img a {
 max-width: 800px;
 height: auto;
 border: 0px;
}
blockquote {
 font-style: italic;
}

notefinale {
 float:right;
}
/************************CONTENT BOXES************************/
.post, #description, .sidebar #other {
 width: 400px;
 padding: 10px;
 margin: 24px 24px 24px 5px;
 border: 1px solid grey;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: ;
 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;

}

#double {
 width: 200px;
 margin: 24px 0px 10px 5px;
 border: 1px solid grey;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: ;
 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;

}

div.centrage {text-align: left;font-family: Arial; font-size: 12px;margin-left:5px; }

.tests {
 width: 700px
 margin: 24px 24px 24px -200px;
 border: 1px solid grey;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background-color: #E4E5E5;
 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;
}

#double::after {
 content: ".";
 clear: both;
 display: block;
 height: 0px;
 visibility: hidden;
}
.sidebar .icon {
 width: 48px;
 height: 48px;
 vertical-align: middle;
}
.sidebar h3 {
 margin-bottom: 14px;
}
.next {
 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;
}
div#colonne1 { 
    float: left; 
    width: 165px; 
   
}

div#colonne2 { 
    float: right; 
    width: 235px; 
   
}

#header {
height:20px;
margin: 0px;
background:#DCDDCD;

}

#header2 {
height:20px;
margin: 0px;
background:#CEDAD6;

}

#header3 {
height:80px;
background-image: url(http://farm6.static.flickr.com/5264/5572745525_74d8075999_b.jpg);

}
/************************PAGINATION************************/
.Tableau span {
   border:1px solid #E4E5E5;
   background-color:#E4E5E5;
   font-family: Arial;
   font-size: 18px;
   float:right;
   font-weight: bold;
   margin: 5px 30px 5px 270px;

  }

.images {

margin-top: 10px ;

}
.older {
 float: left;
 margin-left: -96px;
}

.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;
}

#container {margin-left: auto;margin-right: auto;width: 700px; background-color:#E4E5E5;padding:10px;;}
#col1 {float:left; WIDTH: 227px; overflow :hidden;background-color:#E4E5E5; margin-right:4px;} /*colonne gauche*/
#col2 {float:left; width:227px; overflow :hidden; background-color:#E4E5E5; } /*colonne milieu*/
#col3 {float:right; width:227px; overflow :hidden; background-color:#E4E5E5;  } /*colonne droite*/
/************************Liens***********************
.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
}

#accueil { margin-bottom:20px;
}
/************************SEARCH************************/
.search {
 font-size: 20px;
}
.searchbox {
 border: 0px;
 width: 150px;
 height: 36px;
}
.searchbutton {
 width: 48px;
}
/************************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;
}
.artist {
 font-size: 32px;
}
.album {
 font-size: 24px;
}
/************************ANSWER POSTS************************/
.question {
 font-size: 24px;
 min-height: 96px;
}
.answer {
}
/************************CHAT POSTS************************/
.chat .even {
 list-style: none;
 color: ;
}
.chat .odd {
 list-style: none;
 color: ;
}
.label {
 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: ;
 text-shadow:  0px 1px 1px;
}
.about a {
 color: inherit;
}
/************************END OF CSS************************/
  </style>
  <style type="text/css"></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>
 <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
 <body background="http://static.tumblr.com/zdyq0jx/inGl9uiz9/simplyblue.png" style="background-attachment:fixed;">
 <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" id="accueil"><a href="http://www.jeuxonline.ca">JeuxVidéo</a> <a href="http://www.jeuxonline.ca/tests">Tests</a> Fiches Vidéos Forum <a href="http://www.jeuxonline.ca/redaction/">Rédac</a></div></h1bis>
  <table><tbody><tr>
  <td>
  <div class="tests"><div id="header3"><h4>PES 2011 3D</h4><br>

<h5>Nintendo 3DS</h5></div><br>
<div id="container">
  <div id="col1"><h11>Difficile de s’extasier lorsqu’un nouveau jeu de football est annoncé sur une console portable, qu’il s’agisse aussi bien d’un épisode de FIFA que d’un Pro Evolution Soccer. Travail bâclé, graphismes médiocres et gameplay à des années lumière de celui des opus disponibles sur consoles de salon, voilà qui résume parfaitement la plupart des jeux de foot sortis sur nomades jusqu’à ce jour. Avec la Nintendo 3DS, Konami a étonnamment souhaité relever un nouveau défi, proposer un jeu de foot en 3D, qui plus est le jour du lancement de la console.</h11><br><br><h7>Seul représentant du genre en ce jour J, Pro Evolution Soccer, à la traîne depuis maintenant plusieurs saisons, arrive sur Nintendo 3DS avec son lot de promesses, mais surtout d’interrogations. Dès les premières secondes, dur de sauter de joie devant un menu particulièrement peu garni, en plus d’être totalement illisible. Seuls quelques modes de jeu sont au programme, du trop classique mode Exhibition à la Ligue des Champions en passant par l’option Wireless, jouable uniquement en local, et un Master League au contenu ridiculement faible. Comme souvent, seuls une poignée de championnats majeurs, en plus de formations aléatoires, sont représentés, dans le mode Master League.<br><br>Pire, cette compétition, qui s’affiche pourtant comme la plus complète de ce PES 2011 3D, se présente en réalité comme une espèce de championnat européen dans lequel plusieurs équipes s’affrontent dans l’espoir de grimper dans la division supérieure.</h7></div>
 <div id="col2"><h7>Malheureusement, à l’exception d’une série de rencontres, de quelques transferts et d’un budget à gérer, le mode Master League n’a, semble-t-il, rien de mieux à offrir. Même constat du côté de la Ligue des Champions, une compétition sans grand intérêt, tandis que le mode StreetPass permet à son équipe de prendre part à quelques parties une fois la console en mode veille, à l’unique condition de rencontrer des possesseurs de PES 2011 3D.<br><br>

Transferts, sélections à la ramasse, avec notamment Anelka toujours attaquant de pointe de l’équipe de France, et commentaires décalés viennent s’ajouter à la liste déjà longue des points négatifs de ce PES 2011 3D qui, pourtant, s’en sort avec les honneurs sur le plan graphique. Même si la vue par défaut n’est pas forcément la plus agréable lorsqu’il s’agit de construire une action, elle permet, par sa caméra positionnée derrière les joueurs, mais surtout la présence de 3D, d’admirer une profondeur de champ à couper le souffle et des graphismes épatants, du moins pour une console portable. Pourtant, d’un point de vue gameplay, cet angle de caméra s’avère au final loin d’être optimal, les passes devenant bien trop imprécises et les actions défensives impossibles. Un élément obligeant à passer rapidement en vue latérale, à l’image de la plupart des jeux de football actuels, et à couper la 3D, rendue quasi-inutile avec cet angle de caméra, excepté lors des ralentis.<br><br>Car oui, s’il y a bien un élément majeur dans tout bon jeu de football, c’est bien son gameplay. Bien loin des opus en haute définition mais tout de même un cran au dessus des précédentes versions sorties sur</h7>  
</div>
 <div id="col3"><h7>portables, le système de jeu offre une prise en main rapide, grâce notamment à la présence du stick analogique permettant de contrôler le ballon et de tirer avec plus de précision. Formation, disposition des joueurs sur le terrain et tactiques à adopter se gèrent quelques clics par le biais de l’écran tactile. Un gros plus, particulièrement utile, pouvant devenir un atout de luxe lorsqu’il devient indispensable de modifier sa stratégie en temps réel. Pourtant, une fois de plus, PES 2011 3D surfe sur la même vague que ses prédécesseurs en multipliant les situations ridicules, de l’arbitrage à deux, ou trois vitesses, aux courses incompréhensibles de nos joueurs en passant par ses gardiens sortis d'on ne sait quelle division, souffrants de crampes au cerveau bien trop fréquentes. Autant dire qu’il n’est pas rare d’éteindre la console après une énième erreur du gardien qui laisse filer un ballon anodin en plongeant lamentablement à l’intérieur de son propre but.</h7><br><br>

<h11>Au final uniquement réservé aux véritables adeptes de la franchise, probablement ravis de découvrir un épisode potable sur une nomade Nintendo, PES 2011 3D reste malheureusement l’une des grosses déceptions de ce line-up pourtant bien garni. Contenu trop léger, gameplay limité et IA à la ramasse, autant dire que le CV de ce PES 2011 3D n’est pas bien reluisant en comparaison à celui des versions sorties sur les plateformes en haute définition.</h11>
</div>
</div>
<div class="Tableau">
      <span class="col1"><div class="notefinale">Note finale</div> <img src="http://farm6.static.flickr.com/5059/5561335317_e70180ee96_t.jpg"><img src="http://farm6.static.flickr.com/5059/5561335317_e70180ee96_t.jpg"><img src="http://farm6.static.flickr.com/5175/5561335331_4c3951016d_t.jpg"><img src="http://farm6.static.flickr.com/5177/5572276644_64fde7b06e_t.jpg"><img src="http://farm6.static.flickr.com/5177/5572276644_64fde7b06e_t.jpg"></span>
</div><br style="clear:both;" />
   
    <table class="chat"><tbody>
    
    </tbody></table>
   
   </li>

  
  
  
  
  
  
  
  
  </ol>
  </td>
  <td>
<div id="colonne1">
   <div id="double"><div id="header"><span style="font-family: Verdana;font-weight: bold; color: #DC3535;font-size: 14px;margin-left:7px;margin-top:2px;">Les points forts</span></div>
<div class="centrage">
• Un jeu de foot sur 3DS !<br>
• La qualité des graphismes<br>
• Un mode de jeu en réseau local					</div>

</div>
   </div>
<div id="colonne2">
   <div id="double"><div id="header2"><span style="font-family: Verdana;font-weight: bold; color: #2B4F60;font-size: 14px;margin-left:7px;margin-top:2px;">Les points faibles</span></div>
<div class="centrage">• Un contenu bâclé<br>
• L'amateurisme des gardiens<br>
• Un gameplay décevant<br>				</div>
</div>
   </div><br style='clear: both' />

<div id="description"><img src="http://farm6.static.flickr.com/5101/5563443830_9efae843dd_m.jpg" align="left">
<h8>PES 2011 3D</h8><br>
<h9>Date de sortie :</h9> <h10>27 mar 2011 (ca) 25 mar 2011 (eu)</h10><br>
<h9>Platesforme(s) :</h9> <h10>Xbox 360, PS3, PC, Wii, PSP</h10><br>
<h9>Éditeur :</h9> <h10>Konami</h10><br>
<h9>Développeur :</h9> <h10>Konami</h10>

</div>
  

   <div id="description">
<img src="http://farm6.static.flickr.com/5211/5533439203_50ee302ba0.jpg">
<center><object width="292" height="178"><param name="movie" value="https://www.youtube.com/v/wHc7VsJ-Axw?fs=1&amp;hl=fr_FR&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/wHc7VsJ-Axw?fs=1&amp;hl=fr_FR&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="292" height="178"></embed></object></center></div>
</div>
  
 </div>
 </body>
</html>
 
WRInaute impliqué
1. Dans ton CSS ==>body ligne 46,vires margin: 0px 0px 0px 170px avec cette marge gauche de 170px
2. Rajoutes le style suivant: table { margin:0 auto 0 auto; }

Normalement déjà tes blocs devraient être centrés au milieu de l'écran.
 
WRInaute impliqué
Ton problème sur le menu vient du fait que tu as crée un balise <h1bis> c'est elle qui fait tout foirer.

Enlèves là et mets les styles que tu lui avais mis sur ta boite avec la class accueil et là tu pourras de nouveau utiliser les marges. C'est à dire que:
Code:
h1bis {
font-family: Verdana;
word-spacing:10pt;
font-size: 20px;
font-weight: bold;
margin: 14px 0px 0px;
        color: #FFFFFF

tu le vires et tu mets ces styles dans:
Code:
#accueil { margin-bottom:20px;
}

D'ailleurs au passage inutile de créer 50 balises h. Il faut simplement les balises h1 à h6 c'est tout. Et ensuite, ne mets pas de boite div dedans sinon ça va pas le faire.

Enfin, pour tes deux blocs principaux, c'est dommage d'avoir utiliser un tableau. Il aurait mieux fallu utiliser des boites pour faire deux colonnes.
 
WRInaute impliqué
Bah j'avais l'intention de le faire mais je ne peux pas, car pour l'heure c'est une redirection sur blog tumblr et je ne peux pas mettre de docs en externe (du moins il serait sur un serveur type free ou hebergement gratuit et ça me tente pas)

Merci pour les réponses je vais essayer
 
WRInaute impliqué
Bon ça fonctionne, merci, il ne manque plus que mon problème d'espacement entre mes blocs de texte, si vous avez une petite idée (j'ai tenté du padding ou du margin mais ça ne fonctionne pas trop) En gros je voudrais un espace, par exemple de 10 pixels, entre chaque bloc de texte, que tout ne semble pas collé.
 
WRInaute impliqué
Si tu augmentes tes marges, c'est normal que ça ne fonctionne pas car la largeur cumulée de tes trois colonnes (col1,col2 et col3) + les marges > largeur de ton bloc de gauche.

Pour augmenter la marge entre les trois blocs, il faut que tu diminues d'autant le width de tes trois colonne (col1,2 et 3).
 
WRInaute impliqué
question idiote du jour qui concerne facebook, j'ai placé un bouton Like pour toutes mes news (sur la page d'accueil), le problème est que lorsque je clique sur j'aime, dans mon facebook il affiche à gauche de l'info une image sans rapport avec la news (exemple il m'affiche les étoiles qui sont à droite) ... je cherche donc comment l'empêcher d'afficher une image. Le code facebook en question (cliquez sur j'aime de n'importe quelle news sur la page d'accueil www.jeuxonline.ca pour comprendre mon problème)

Code:
<iframe src="https://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=no&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>

(je précise qu'une version du site développée de a à z par mes soins est en préparation)
 
Haut