28172 sujets

CSS et mise en forme, CSS3

Twitter & facebook like - problème d'alignement

Bonjour,

je suis actuellement en train de faire quelques petits tests pour afficher l'icone 'tweeter' et 'liker' mais je n'arrive pas à les coller sur une même ligne.

Qu'est ce que j'ai loupé ?

Merci

Vincent


<!DOCTYPE html>
<html>
	<body id="siteInterior">
	
	Ensemble complet
	<div style="width:500px;height:200px;border:1px solid blue;">
		<div style="border:1px solid blue;">
		<!-- Facebook code 2-->
			<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&amp;send=true&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp" scrolling="no" frameborder="0" style="border:none; width:150px; height:30px;" allowTransparency="true"></iframe>
		<!-- End of Facebook code 2-->
		</div>
		<div style="border:1px solid blue;">
		<!-- Tweeter code 1-->
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
		<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
		<!-- End of Tweeter code 1-->
		</div>
		
	</div>
	
	THE END
	</body>
</html>
Essais ça, je pense que c'est un bon départ :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.button{
display:inline-block;
}
</style>
</head>
	<body id="siteInterior">
	
	Ensemble complet
		<div class="button">
		<!-- Facebook code 2-->
			<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&amp;send=true&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp" scrolling="no" frameborder="0" style="border:none; width:150px; height:30px;" allowTransparency="true"></iframe>
		<!-- End of Facebook code 2-->
		</div>
		
		
		<div class="button">
		<!-- Tweeter code 1-->
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
		<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
		<!-- End of Tweeter code 1-->
		</div>
		
	</div>
	
	THE END
	</body>
</html>
Bonjour,

c'est effectivement déjà mieux merci.
Reste à voir comment aligner ce petit monde.

Je continue les recherches en tout cas.
Avec celui-ci tout s'aligne (textes & bouttons) =D


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.button{
position:relative;
display:inline-block;
height:15px;
}

</style>
</head>
	<body id="siteInterior">
	
	Ensemble complet

		<div class="button">
		<!-- Facebook code 2-->
			<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&amp;send=true&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp" scrolling="no" frameborder="0" style="border:none; width:150px; height:30px;" allowTransparency="true"></iframe>
		<!-- End of Facebook code 2-->
		</div>
		
		
		<div class="button">
		<!-- Tweeter code 1-->
		<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
		<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
		<!-- End of Tweeter code 1-->
		</div>
	

	
	THE END
	</body>
</html>
Tu peux toujours mettre tout ça en liste et les aligner après Smiley cligne 


<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.test ul li{
	float:right;
	list-style: none;
	margin-left:7px;
}
</style>
</head>
	<body id="siteInterior">
		<div class="test">
			<ul>
    			<li>Ensemble complet</li>
				<li><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&amp;send=true&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp" scrolling="no" frameborder="0" style="border:none; width:150px; height:30px;" allowTransparency="true"></iframe></li>
				<li><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><a href="http://twitter.com/share" class="twitter-share-button">Tweet</a></li>
				<li>THE END</li>
   			</ul>
		</div>
	</body>
</html>
@lithiumsound : Marche pas mieux (FF,Opera, IE sous Win 7)
@TxReplay : Ca fonctionne on dirait Smiley smile . Est ce que c'est HTML5 compliant ?
Étant donné que je sais pas vraiment ce que c'est, je ne peux pas te répondre, mais il est compatible tout navigateur si c'est ce que tu veux savoir.
Re bonjour à tous.

En explorant le web, Monsieur Facebook dédie une page à son bouton like au format HTML5 (et autres) :

http://developers.facebook.com/docs/reference/plugins/like/

Du coup, j'ai écrit mon test comme ils l'indiquent (enfin je crois) :

<!DOCTYPE html>
<html>
	<body id="siteInterior">
	<!-- source :  http://developers.facebook.com/docs/reference/plugins/like/  -->
	TEST
	<div class="fb-like" data-href="http://www.google.fr" data-send="true" data-width="350" data-show-faces="true"></div>
	THE END
	</body>

	<div id="fb-root"></div>
	<script>(function(d, s, id)
		{
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
	</script>
</html>


Mais lors du rendu, je n'ai rien qui s'affiche si ce n'est mes 2 phrases : TEST et THE END.
- IE9 me parle d'ActiveX bloqué
- Opera me dit rien du tout
- Firefox ne me dit rien du tout.

C'est quoi le hic ?
Merci,

Vincent
Sujet clos
Aller à