Discussion :

[beryamosta]

Bonjour,

J'ai un petit problème qui a été traité plusieurs fois, mais bon, j'ai pas réussi a le faire.

je n'arrive pas a aligner mes DIV horizontalement,

voici, un aperçu d'un résultat souhaité,

voici mon code 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
	#Container #Main #Conteneur{
		display:inline-block;
		margin:5px; 
		height:500px;
		width:100%;
        }
#Container #Main #Conteneur .Block{
		width:226px;
		height:330px;
	    padding:10px;
 
 
		}
	#Container #Main #Conteneur .Block .Block_title{
		padding-left:10px;
		border-style:ridge;
		text-align:left;
		}
	#Container #Main #Conteneur .Block .Block_img{
		border-style:ridge;
 
		}
 
 
		}

j'ai essayé le display : inline-block / float: left / float : right au niveau de #Container #Main #Conteneur

Et le 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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
      	<div id="Conteneur">
    		<div class="Block">
        		<div class="Block_title">
          	  Titre 01
            	</div><!--end Class Block_Title -->
           		 <div class="Block_img">
         			 <img src="images/web_design.jpg" width="220" height="220"  alt=""/> 
        	     </div><!--end Class Block_img -->
       		</div><!--end Class Block -->
 
            <div class="Block">
        		<div class="Block_title">
          	  Titre 02
            	</div><!--end Class Block_Title -->
           		 <div class="Block_img">
         			 <img src="images/web_design.jpg" width="220" height="220"  alt=""/> 
        	     </div><!--end Class Block_img -->
       		</div><!--end Class Block -->
 
            <div class="Block">
        		<div class="Block_title">
          	  Titre 03
            	</div><!--end Class Block_Title -->
           		 <div class="Block_img">
         			 <img src="images/web_design.jpg" width="220" height="220"  alt=""/> 
        	     </div><!--end Class Block_img -->
       		</div><!--end Class Block -->
 
            <div class="Block">
        		<div class="Block_title">
          	  Titre 04
            	</div><!--end Class Block_Title -->
           		 <div class="Block_img">
         			 <img src="images/web_design.jpg" width="220" height="220"  alt=""/> 
        	     </div><!--end Class Block_img -->
       		</div><!--end Class Block -->
 
 
         </div><!-- end Conteneur-->

Merci pour votre aide,

[NoSmoking]

Bonjour,
pour commencer une ID devant être unique dans une page tu peux alléger ton code CSS comme suit

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
#Conteneur {
    display: inline-block;
    width: 100%;
    height: 500px;
    margin: 5px;
}
 
#Conteneur .Block {
    width: 226px;
    height: 330px;
    padding: 10px;
}
 
#Conteneur .Block .Block_title {
    padding-left: 10px;
    border-style: ridge;
    text-align: left;
}
 
#Conteneur .Block .Block_img {
    border-style: ridge;
}

pour continuer, ce n'est pas sur le conteneur qu'il faut que tu places ton display:inline-block mais sur tes éléments contenus soit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#Conteneur {
/*    display: inline-block;  /* Inutile */
    width: 100%;
    height: 500px;
    margin: 5px;
}
 
#Conteneur .Block {
    display: inline-block;  /* Utile */
    width: 226px;
    height: 330px;
    padding: 10px;
}

et pour finir tu gagnerais à passer par une structure plus sémantique et plus légère

Code html :

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

1
2
3
4
5
6
<figure>
    <figcaption>
        Titre 01
    </figcaption>
    <img src="images/web_design.jpg"  alt=""/> 
</figure>

[beryamosta]

merci, @NoSmoking, ça m'a vraiment aidé, le sujet est résolu,

[pressdell]

Bonjour NoSmoking et beryamosta,

Petite question (pas forcément idiote) relative à ta question : Pourquoi ne pas privilégier l'utilisation des flexbox?
J'avoue les utiliser à tout va, et ça m'a réglé pas mal de problèmes...

pressdell.