Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 579

Enregistré le: 9 Fév 2004

Message le Jeu Juin 08, 2017 15:12

Salut à tous,

J'ai une série d'onglets horizontal et en cliquant sur l'un deux, le texte de cet onglet s'affiche en dessous.

Je souhaiterai mettre 2 div l'une à côté de l'autre dans le premier onglet parce que je vais devoir masquer la 2ième div afin que l'affichage sur les mobiles soit responsive mais il y a un bug ces 2 div ne s'affichent pas correctement :(

J'ai passé pas mal de temps à chercher le problème mais là je sèche...

Voici le bug d'affichage :
Image

Si je supprime les 2 div et que je met juste du texte dans l'onglet, ça s'affiche correctement :
Image

Voici le code html de mes onglets avec juste du texte dans le 1er onglet :
Code: Tout sélectionner
<div class="onglet">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1" name="details-monture">Détails Article</a></li>
            <li><a href="#tabs-2">Livraison</a></li>
            <li><a href="#tabs-3">Paiement</a></li>
            <li><a href="#tabs-4">Garanties</a></li>
            <li><a href="#tabs-5" name="avantages">Avantages Clients</a></li>
            <li><a href="#tabs-6">Atelier Joaillerie</a></li>           
            <li><a href="#tabs-7">Contact</a></li>       
       </ul>
        <div id="tabs-1">
        Voici le contenu de cet onglet<br><br>
        Ca s'affiche parfaitemen bien<br><br>
        Il n'y a aucune div, simplement du texte
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
     etc...
</div>


Voici le code html de mes onglets avec mes 2 div supplémentaires :
Code: Tout sélectionner
<div class="onglet">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1" name="details-monture">Détails Article</a></li>
            <li><a href="#tabs-2">Livraison</a></li>
            <li><a href="#tabs-3">Paiement</a></li>
            <li><a href="#tabs-4">Garanties</a></li>
            <li><a href="#tabs-5" name="avantages">Avantages Clients</a></li>
            <li><a href="#tabs-6">Atelier Joaillerie</a></li>           
            <li><a href="#tabs-7">Contact</a></li>       
       </ul>
        <div id="tabs-1">
       <div class="bloc_bijou_details_gauche">
        Div 1<br><br>
        Voici le contenu de la div 1<br>
        Voici le contenu de la div 1<br>
        Voici le contenu de la div 1<br>
        </div>
        <div class="bloc_bijou_details_droite">
        Div 2<br><br>
        Voici le contenu de la div 2<br>
        Voici le contenu de la div 2<br>
        </div>       
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
     etc...
</div>


Et voici mon code css :
Code: Tout sélectionner
.onglet{margin:0;margin-top:30px;margin-bottom:30px;padding:0;}
.onglet ul li{font-size:0.83em;}
.onglet select{font-size:0.8em;}
#tabs1{padding:0;margin:0;margin-top:3px;}
#tabs1 ul li{padding:0;margin:0;margin-right:3px;margin-top:2px;margin-bottom:-1px;font-size:0.8em;}
#tabs1-1{padding:0;margin:0;}
#tabs p{font-size:0.83em;}
.bloc_bijou_details_gauche{float:left;position:relative;width:52%;border: 1px solid red;margin:3px;margin-right:5px;padding:0;}
.bloc_bijou_details_droite{float:left;position:relative;width:45%;border: 1px solid red;margin:0;margin-top:3px;margin-bottom:3px;padding:0;}


Qu'est-ce que je dois modifier pour afficher correctement mes 2 div dans mon 1er onglet ?

Merci pour vos réponses et votre aide.
Haut
4 Réponses
Messages: 8552

Enregistré le: 14 Mai 2003

Message le Jeu Juin 08, 2017 15:24

Il suffit de mettre un clear après le 2° div (celui de droite <div class="bloc_bijou_details_droite">)
Code: Tout sélectionner
.clear {
    clear: both;
}

Code: Tout sélectionner
<div class="clear"></div>

Démo: https://jsfiddle.net/0dLL1f0h/
Haut
Messages: 579

Enregistré le: 9 Fév 2004

Message le Jeu Juin 08, 2017 15:38

Un grand merci Spout ça marche nickel :)

J'avais essayé le <div class="clear"></div> mais devant la première div :( et ça marchait pas, il fallait le mettre après la 2ième div....
Haut
Messages: 8552

Enregistré le: 14 Mai 2003

Message le Jeu Juin 08, 2017 15:38

C'est ce que j'ai dit :mrgreen:
Haut
Messages: 289

Enregistré le: 10 Sep 2006

Message le Ven Juin 09, 2017 16:41

spout a écrit:Il suffit de mettre un clear après le 2° div (celui de droite <div class="bloc_bijou_details_droite">)

C'est une solution qu'on utilisait quand il fallait être compatible avec IE6, mais on peut faire plus simple... et surtout, éviter d'ajouter des éléments inutiles dans le DOM. Il suffit d'ajouter la propriété overflow:auto à l'élément contentant les divs en float :

Code: Tout sélectionner
<style>
.cadre {
  border: 1px solid #000;
  overflow: auto;
  padding: 5px;
}

.gauche, .droite {
  border: 1px solid red;
  float: left;
  width: 200px;
}
</style>
<div class="cadre">
  <div class="gauche">FIX FIX FIX</div>
  <div class="droite">FIX FIX FIX</div>
</div>
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.