Bonjour!

J'aimerais aligner des textes à la suite horizontalement sur une des pages de mon site, mais malgré quelques essais, je n'ai pas réussi à obtenir le résultat que je voulais.

Je mets un screen de la page en question :

Voilà j'aurais aimé que les trois "nom prénom" soient alignés côte à côte, mais je n'ai pas réussi.

CSS du texte :

p{
	margin-bottom:50px;	
	font-weight:normal;
	padding-top:15px;
	text-align:left;
	font-family: "verdana";
	font-size: 11px;
	color:#6c2323;
	text-align:justify;
}

Code :

<div id="contenu">
		<h1>Nous contacter ?</h1>
		<p><b>NOM Prénom</b><br>
		e-mail@hotmail.fr</p>
		<p><b>NOM Prénom</b><br>
		e-mail@hotmail.fr</p>
		<p><b>NOM Prénom</b><br>
		e-mail@hotmail.fr</p>
		<div style="clear:both;"></div>
		<div id="piedDePage">
			Copyright ifList
		</div>

</div>

Merci d'avance !

-
Edité par Mirajen 20 avril 2017 à 16:55:18

Bonsoir,

Je viens de te faire un exemple à partir de ton code. C'est ça que tu souhaitais faire ? 

https://codepen.io/Blooster/pen/zwqBZZ

Blooster: Oui voilà l'alignement c'est exactement ça, mais il faudrait des espaces entre chaque "nom prenom" pour la lisibilité. J'ai tenté d'en rajouter sur ce que tu m'as donné, mais toujours pas 

Voilà : http://codepen.io/Blooster/pen/zwqBZZ

Je t'ai laissé les couleurs pour que tu puisses analyser. Pour pouvoir espacer tous les blocs "nom prenom" tu dois faire un margin-right (vu que tu es actuellement en float  : right).

C'est la même chose que le lien précédent ? Ou c'est juste que je comprends pas tout ? 

Ah oui génial c'est exactement ce que je voulais faire !

Merci beaucoup pour ton aide. 

EDIT

Sorry j'ouvre à nouveau le sujet parce que je viens de rencontrer un nouveau problème quant à l'alignement de ces blocs. 

Jusque là tout allait bien :

Mais dès que l'adresse e-mail contient trop de caractères (exemple avec des p), il y a tout qui décale, le premier bloc sort de l'alignement :

Et oui j'ai bien tenté d'agrandir le "container" rouge en modifiant largeur et hauteur pour élargir vers la droite, mais rien n'y fait.

Merci encore.

-
Edité par Mirajen 20 avril 2017 à 18:45:09

Bonjour,

Tu peux me montrer ton code ?

Je pense que tu mets un margin-right trop important ce qui fait sortir ton bloc tout à droite de ta div.

Re bonjour

Voici le code :

/* GENERALITE */
*{
	padding:0px;
	margin:0px;
}

html {
  height: 100%;
}

body  {	
	background-color:#4d4d4d;
	background-image:url(images/fond-site.gif);
	background-repeat:repeat-x;
}

img{
    	padding:0px;
}

img.imageGauche{
	float:left;
	margin-right:60px;
	margin-bottom:60px;
	margin-top:20px;
}

img.imageDroite{
	float:right;
	margin-left:10px;
	margin-bottom:0px;
	margin-top:0px;
}

a{
	color:#6c2323;	
} 

p{
	margin-bottom:50px;	
	font-weight:normal;
	padding-top:10px;
	text-align:left;
	font-family: "verdana";
	font-size: 11px;
	color:#6c2323;
	text-align:justify;
}


#container {
  background-color : none;
  width : 690px;
  height : 200px;
  flex : dislay;
}

#container p {
  margin : auto;
  transform : translateY(60%);
  background-color : none;
  float : right;
  margin-left : 60px;
}

#global { 
margin-left: auto; /* Permet de centrer le site */
margin-right: auto; /* Permet de centrer le site */
    width: 850px;
    height: 660px;
    background-color:#dfdfdf;
    border: 1px solid #000000;
    text-align:left;
    padding-bottom:20px;
}

Merci pour ta réponse !

-
Edité par Mirajen 22 avril 2017 à 14:58:40

Personnellement si je copie tout ton code CSS, j'ai un rendu correct.

Donne moi ton code HTMl également, je pense qu'il n'est pas structuré comme je te l'avais proposé ci-dessus.