Bonjour à tous,

j'ai deux images en html que j'échoue à aligner, quelqu'un a une idée ? 

Ici mon html :

   
             <div id="containerLinks">
                
            
                <div class="containerServiettes">
          
            
                        <div >
                            
                            
                            <img id="bagLinkPic" src="bagLeather.jpg">
                        
                        
                        
                        </div>
               
                        
                    
                        <span id="serviettesText" itemscop itemprop="category">
                            
                            Serviettes
                            
                        </span>
                    
          
            
                </div>
                   
                    
                <div class="containerWallet">
          
            
                    <div >
                            
                        <img id="walletLinkPic" src="walletCover.jpg">
                        
                        
                    </div>
               
                        
                    
                    <span id="walletText" itemscop itemprop="category">
                        
                        Portefeuilles
                        
                    </span>
                    
          
            
                </div>
                    
                   
                            
                            
                    <span id="etuiStylos" itemscop itemprop="category">
                        
                        Etui à stylo
                        
                    </span>
                    
                    
                        
                 </div>

Ici mon CSS : 

@font-face{
    font-family: "minimal";
    src: url('fonts/minimal-webfont.ttf');
}

@font-face{
    font-family: "hirondelleDemo";
    src: url('fonts/hirondelle-demo-webfont.woff');
}


@font-face{
    font-family: "celticGaramond";
    src: url('fonts/celtg__-webfont.ttf');
}

html, body
{
    margin: 0;
    padding: 0;
    
    
    background-image : url('leatherBackground.jpg');
    background-size: 100% 100%;
     background-repeat: no-repeat;
     color: #F9EEBF; 
}




#headline {
    
     background-color : rgba(6,6,6,0.85) ;
     padding : 2%;
    position : absolute ;
     left: 25%;
    top : 55% ;
     font-family: hirondelleDemo;
     font-size : 555% ; 

}

#greatHomepage {
    
  
    background-size :  auto ;
    width : 100% ;
    height : 5% ;
    
    
}

#logoCuirPrecieux {
    
    display: inline-block ;
    position : fixed; 
    
    left : 5%;
    border-bottom-right-radius: 5%;
    border-bottom-left-radius: 5%;
    height : 150px ;
    width : 150px;
    
    background-color : rgba(241,234,231, 0.45) ;
    
    z-index : 1; 
    
}

#containerHomepage {
    
    
    
}


#container {
    position: relative;
    text-align: center;
    color: white;
    height : auto ;
   
}


#menu {
    
    
       width : 100% ;
    font-family: minimal;
    font-size : 1.5em ;
    
    
    
}

#menuBar {
    
    display: inline-block; 
    background-color : rgba(126,62,28,0.25);
    text-align : center ;
    width : 100% ; 
    
}


.menuSpace {
    
    margin : 2.5% ; 
    
}

#containerLinks {
    
    

    margin-top : 15% ;
    margin-bottom : 15% ; 
    
}




.containerServiettes {
    
    position:relative;
    
    width : 65% ;
    left : 10%;
    top : 35%; 
    
}


#bagLinkPic {
    
  
    display : inline-block;
    width : 45%;
    left : 10%;
    border-radius : 10%;
}

#serviettesText {
    
        
    
     background-color : rgba(6,6,6,0.85) ;
     padding : 2%;
    position : absolute ;
     left: 15%;
    top : 55% ;
     font-family: hirondelleDemo;
     font-size : 160% ;
     border-radius : 10%;
    z-index: 100; 

}


.containerWallet {
    
    position:relative;
    
    width : 65% ;
    left : 10%;
    top : 35%; 
    
}


#walletLinkPic {
    
       display : inline-block;
    width : 45%;
    right : 20% ;
    border-radius : 10%;
    
    
}


#walletText {
    
        
    
     background-color : rgba(6,6,6,0.85) ;
     padding : 2%;
    position : absolute ;
     left: 15%;
    top : 55% ;
     font-family: hirondelleDemo;
     font-size : 160% ;
     border-radius : 10%;
    z-index: 100; 

}

bien à vous et merci pour votre lecture

-
Edité par ArmandDuchatel 17 mars 2018 à 23:08:43

Bonsoir ArmandDuchatel,

Première chose... je ne vois qu'une image...

Deuxième chose... Tu as deux fermeture de div en trop.

Pour commencer, nettoie ton code. Respecter l'indentation permet de voir facilement les div en trop ou manquantes.

bonsoir Nossibe, 

Merci opur ta réponse,

J'ai repris mon code, j'espère que ça ira mieux cette fois,

Bien à toi

Pour aligner horizontalement tes deux images il faut déjà aligner les deux div containerServiettes et containerWallet, car ce sont elles qui se placent l'une en dessous de l'autre du fait qu'elles sont trop larges pour être sur la même ligne.

Essaie de mettre une largeur pour les div qui soit inférieur à 50%.

Maintenant que les deux blocs peuvent être présents sur la même ligne, tu peux leur dire qu'ils doivent se comporter comme des blocs qui peuvent s'aligner. Pour cela tu trouveras ton bonheur en manipulant le display de tes div.

Je suis volontairement assez vague dans mes explications afin que tu puisses chercher comment fonctionne le display en css.

Bonne codage 

PS: L'indentation n'est pas encore parfaite, c'est très utile donc essaie de la faire parfaitement 

Bonjour,

En complément du PS de nossibe, il y a des "beautifyers" sur le net pour reformater ton code ;

par exemple, celui-ci: ctrlq.org/beautifier/

transforme ainsi ton code HTML: 21 lignes au lieu de 62 ; c'est un peu plus clair, non?

<div id="containerLinks">
  <div class="containerServiettes">
    <div >
      <img id="bagLinkPic" src="bagLeather.jpg">
    </div>
    <span id="serviettesText" itemscop itemprop="category">
      Serviettes
    </span>
  </div>
  <div class="containerWallet">
    <div >
      <img id="walletLinkPic" src="walletCover.jpg">
    </div>
    <span id="walletText" itemscop itemprop="category">
      Portefeuilles
    </span>
  </div>
  <span id="etuiStylos" itemscop itemprop="category">
    Etui à stylo
  </span>
</div>

c'est plus facile d'avoir une vue globale effectivement,

merci à vous deux pour vos réponses,

effectivement hier entre temps j'avais capté le lien entre la div, bloc par nature, et mon soucie, donc j'ai mis les div en mode inline-block et ça a réglé le pbm. 

Bien à vous

Armand,