Discussion :

[JVN72]

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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
#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

[Invité]

Bonjour,
de l'indentation dans ton code html ne serait pas du luxe...

Voir -> http://codepen.io/jreaux62/pen/FlDKd

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#metierbloc1, #metierbloc2, #metierbloc3 {
  float:left;
  border:1px solid #ccc;
  text-align:center;
  width: 32%; /* 3 sur une ligne : (100% / 3) - (2 x 0.5%) = 32.333% -> 32% */
  margin:20px 0.5%; /* marges */
}

et

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#pied {
/* POSITIONNEMENT */
position: relative;
  clear:both;
/*......*/
}

[JVN72]

En tout cas merci ça marche sauf un souci de background derrière les blocs.

http://www.fastmancorp.com/test/

J'ai bien mis backgroung: #fffff dans le div "metierbloc".

Une idée ??

En ce qui concerne l'indexation, je ne sais pas le faire. Vous avez pu remarquer que je suis débutant en css (ce n'est pas mon métier de base)et que j'ai démarrer mon css un peu comme je le pouvais. (En piquant des brique de code de gauche à droite lol). Quelques explications si pas trop longues sont les bienvenues.

Et encore merci pour l'alignement des trois blocs. :-)

[JVN72]

Ok fong noir résolu, j'ai changé le background du body de noir à blance et c'est good.....

Merci !!!!

[Invité]

En ce qui concerne l'indexation, ...

Je n'ai pas parlé d'indexation, mais d'indentation !

En informatique : l'indentation consiste en l'ajout de tabulations ou d'espaces dans un fichier, pour une meilleure lecture et compréhension du code.

[rodolphebrd]

Ne pas confondre avec l'édentation qui pourrait exciter l'avatar de jreaux62.

[JVN72]

Ah ok ! et pourtant je fais des efforts pour la visibilté et commenter les lignes de codes quand cela est nécessaire.

En tout cas MERCI d'avoir résolu mon problème.

[Invité]

Bien vu, Rodolphe !

(je l'avais ratée, celle-là !)