28172 sujets

CSS et mise en forme, CSS3

Positionner deux div l'une sous l'autre

Bonjour à tous,

je suis débutant en css et j'aimerais positionner deux DIV l'une sous l'autre.
Chacune de ces div est identique, il s'agit d'une image avec du texte par dessus.
Pour la première pas de soucis, j'ai créé une div conteneur en relative dans laquelle j'ai mis mon image dans une div et mon texte dans une autre div, toutes les deux en absolute. J'ai un z-index 2 sur la div du texte pour qu'il passe par dessus l'image.
Le problème se pose quand je veux positionner la deuxième div identique en dessous.
Je n'arrive pas à ce que le flux se fasse naturellement.
Voici le code et une image.

Merci !


http://www.hostingpics.net/viewer.php?id=973034Capturedcran20150331123239PM.png

HTML



/*DIV 1*/

<div class="ventes">
<div class="container-vente">
<img src="http://localhost:8888/vivianneesders/wp-content/themes/mrtailor/images/ventes.jpg" alt="Ventes aux enchères">
</div>
<div class="titre-vente">
<hr style="height: 1px; color: white; background-color: white; width: 50%; border: none;">
<h2>Ventes aux enchères</h2>
<p>Accédez à toutes nos ventes</p>
<hr style="height: 1px; color: white; background-color: white; width: 50%; border: none;">
</div>
</div>

/*DIV 2*/

<div class="expertise">
<div class="container-expertise">
<img src="http://localhost:8888/vivianneesders/wp-content/themes/mrtailor/images/expertise.jpg" alt="Ventes aux enchères">
</div>
<div class="titre-expertise">
<hr style="height: 1px; color: white; background-color: white; width: 50%; border: none;">
<h2>Expertises</h2>
<p>Faites expertiser une œuvre</p>
<hr style="height: 1px; color: white; background-color: white; width: 50%; border: none;">
</div>
</div>


CSS



.ventes{
   position: relative;
   z-index: 1;
   height: auto;
   width: auto;
   max-width: 100%;
   margin-bottom: 32px;
}

.titre-vente{
    position:absolute;
    color: white;
    font-family: 'miller_displayregular';
    font-size: 32px;
    z-index:2;
    margin-top: 87px;
    left: 21%;
}

.container-vente{
    position: absolute;
    display: inline-block;
}

.titre-vente p {
    font-family:'miller_displayitalic';
    font-size: 0.5em;
    line-height: 1em;
    margin-bottom: 27px;
}

.expertise{
    position: relative;
    z-index: 1;
    height: auto;
    width: auto;
    max-width: 100%;
}


.titre-expertise{
    position:absolute;
    color: white;
    font-family: 'miller_displayregular';
    font-size: 32px;
    z-index:2;
    margin-top: 87px;
    left: 21%;
}

.container-expertise{
    position: absolute;
    display: inline-block;
    
}

.titre-expertise p {
    font-family:'miller_displayitalic';
    font-size: 0.5em;
    line-height: 1em;
    margin-bottom: 27px;
}

Modifié par tomdes (31 Mar 2015 - 12:48)
Modérateur
Salut,

Par défaut les div s'empile. Je pense que tu te complique la tache
Un simple code html comme ça :
<div>Div1</div>
<div>Div2</div>

Sans aucun CSS fait s'empiler les deux div.

Ton probleme se situe dans le placement des 2 enfants. Les placer en absolute est une erreur car ils sortent du "flux". Leur parent respectif s'empilent mais font comme s'ils n’avaient pas d'enfant et donc n'ont pas de hauteur.

Plutôt que de le faire en absolute tente de positionner les enfant avec une autre technique. Soit une seule div avec l'image en background ou encore 2 div mais avec une seul des deux en absolute de façon a ce que le parent garde la hauteur d'un enfant.


[EDIT] Pour illustrer un peu mes propos http://jsfiddle.net/3qanq1g8/
Modifié par _laurent (31 Mar 2015 - 13:53)
Sujet clos
Aller à