28172 sujets

CSS et mise en forme, CSS3

Voilà parce qu'une comparaison vaut mieux qu'un long discours :

page sans l'Iframe problématique
Page avec l'Iframe problématique

L'Iframe en question est bien sûr le "j'aime" de Facebook. J'aimerais qu'il soit centré comme les autres petites bannières et j'y arrive pas.

<div class='contenucolonne'>
            <p class='bouton1'>PARTENAIRES</p>
            <br /><iframe class='facebooklike' src="http://www.facebook.com/plugins/like.php?href=www.yuimen.com&amp;layout=button_count&amp;show_faces=true&amp;width=175&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:175px; height:21px;" allowTransparency="true"></iframe>
            <br /><a class='miniban' href="http://www.sawen.net" target="_blank"><img class='petiteban' src="http://www.sawen.net/sawentop.jpg" alt="Annuaire forum RPG" title="Annuaire forum RPG" /></a>
            <br /><a class='miniban' href="http://www.yuimen.net" target="_blank"><img class='petiteban' src="http://www.yuimen.net/miniban.gif" alt='L#39;Univers de Yuimen jeu par forum' title='L&#39;Univers de Yuimen jeu par forum' /></a>
            <br />
            <a href='partenaires.php' class='colonne'>Autres partenaires</a>
          </div>


.contenucolonne{
  background-color:transparent;
  margin-left:12px;
  margin-top:18px;
  width:152px;
}

.facebooklike{
  display: block; 
  margin: 0 auto;  
  border-width:0;
}

.petiteban { 
  display: block; 
  margin: 0 auto; 
  height: 31px; 
  width: 88px;  
  border-width:0;
}


Je précise que j'y connais rien en IFrame^^
Modifié par Lothindil (27 Sep 2010 - 10:14)
Personne n'a une idée ?

J'ai bien lu que les Iframe se positionnaient comme des images, mais ça n'a pas l'air d'être le cas.

est-ce parce que j'ai pas mentionnée la taille de la-dite IFrame ? Smiley sweatdrop
bon, j'ai trouvé, c'est pas l'IFrame, c'est le code derrière l'Iframe, qui n'est pas modifiable le problème (vive Facebook), mais soit.

Ce que j'ai fait pour que ça marche :
-> au lieu de prendre la largeur de ma colonne, j'ai pris la largeur de leur bouton (60px).

J'ai modifié les données de l'Iframe :

<iframe class='facebooklike' src="http://www.facebook.com/plugins/like.php?href=www.yuimen.com&amp;layout=button_count&amp;show_faces=true&amp;width=175&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:175px; height:21px;" allowTransparency="true"></iframe>


en 2 endroit : le "width=175" dans l'adresse source et le width:175px dans leur style. J'ai remplacé les 2 fois le 175 par 60.

Pour la classe, ça donne :

.facebooklike{
  display: block; 
  margin: 0 auto;  
  border-width:0;
}