18041 sujets

Questions générales et questions de débutants

[Résolu] Problème alignement de 3 blocs

Bonjour,

J'essaie depuis deux jours de mettre 3 blocs à l'horizontal. J'ai testé le display:inline, position absolute ou relative.... mais mon pied de page vient couvrir les 3 blocs.

Quelqu'un peut m'aider ????

Voici on code html :

<div id="contenu">
		<div id="titre">
			<p align="center">Bienvenue sur le site <b>FASTMAN Corporation</b></p>
			<p align="center">Votre spécialiste du conseil et des outils pour la gestion d'Affaires !</p>
			<p align="center">Nous intervenons auprès des SSII, PME et le C.H.R.</p>
		</div>
		<div id="metierbloc1">
			<a href="ssii.html"><img src="images/ssii.png"></img><p>Découvrez notre offre de partenariat dédiée aux SSII</p></a>
		</div>
		<div id="metierbloc2">	
			<a href="pme.html"><img src="images/pme.png"></img><p>Nos services d'optimisation commerciale pour les PME</p></a>
		</div>
		<div id="metierbloc3">
			<a href="chr.html"><img src="images/chr.png"></img><p>Notre outil d'aide à la vente pour les métiers du C.H.R.</p></a>
		</div>
	</div><
<div id="pied">
		<p>
			FASTMAN Corporation - All rights reserved 2014
		</p>
	</div>



et mon fichier css

#contenu {
	display:block;
	background:#ffffff;
	padding: 20px 20px;
	margin: auto;
	height: auto;
	color: #000000; /* couleur corps de texte */
}

#contenu p {
	line-height: 1.5em; /* hauteur en les lignes et la balise <p> */
}

#contenu ul {
	list-style-type: square;
	list-style-position: outiside;
}

#contenu ol {
	list-style-type: circle;
}

#titre {
	border-style:solid;
	border-width:2px;
	border-color:#bebebf;
	border-radius: 20px;
	margin: 50px 400px;
	padding: 10 10;
}

#metierbloc1 {
	margin-right: 1000px;
	border-style:solid;
}

#metierbloc2 {
	margin-right: 1000px;
	border-style:solid;
}

#metierbloc3 {
	margin-right: 1000px;
	border-style:solid;
}

#souscontenu {
	padding: 0 0;
	margin:auto;
}
/* --- PIED DE PAGE --- */
#pied {
	/* POSITIONNEMENT */
	position: relative;
	padding: 10px 10px; /* marges intérieurs */
	background: #368412; /* Fond bloc pied de page */
	margin: auto;
	/* POLICE */
	font-size: 10px; /* taile de la police */
	font-style:italic; /* format police */
	color: #bebebf; /* couleur texte pied de page */
	vertical-align: middle; /* alignement vertical police */
}


Merci pour l'aide
Modifié par 6l20 (23 Jan 2014 - 14:37)
Salut,

Pour aligner horizontalement des blocs tu peux utiliser :

display:inline-block;

ou
float:left;

Modifié par Horo (23 Jan 2014 - 11:03)
Salut,

J'ai aussi essayé cela mais quand j'applique j'ai mon pied de page qui vient dessus mes trois blocs.

J'ai pas réussit en modifiant les paramètres "position" float" " display" mon pied de page à le mettre ne ligne en dessous sur toute la largeur de la page.
J'ai essayé display:inline-block dans mes balise #metierblocx avec ou sans float:left et en mettant overflow: hidden dans le div "pied" ais rien ne fait. Tout est imbriqué !!
OUI je suis ok avec toi mais les 3 blocs sont alignés verticalement. Moi je veux que les trois blocks soient à l'horizontal cote à cote....et c'est là que mon pied de page remonte n'importe comment.
J'ai l'impression qu'on parle pas du même sens d'alignement verticale et horizontale :s
Ils sont aligné horizontalement la, ils sont les 3 sur la même ligne si il y a assez de place ( avec l’écran au plus large), et si il n'y a pas assez de place le plus à droite passe à la ligne en dessous.

Tu veux les 3 blocs sur la même ligne ou sur la même colonne ?

Edit : Ce site est pas mal pour partager, mais sinon de encore plus pratique je trouve, tu as l'extension firebug de firefox pour travailler sur la page en ligne directement
Modifié par mathieu1004 (23 Jan 2014 - 14:35)
Oui je veux les 3 blocs sur la même ligne (cote à cote) et pas en vertical car je sais le faire Smiley cligne .

PS: j'essaierai l'extension firebug.
Bon bah du coup sur le lien que je t'ai donné, si tu agrandis en largeur la partie result ( en bas à gauche), les 3 blocs sont sur la même ligne Smiley smile
Sujet clos
Aller à