Un conteneur qui fait bouger ceux du dessous :/

Bonjour à toutes et tous,

J'ai un souci. Je souhaite utiliser des tabs (2 onglets) en css et JS pour faire apparaitre du texte quand on clique dessus. Le souci c'est que lorsque j'ouvre les onglets, tout ce qui est en dessous du coup se décale lorsque le contenu est affiché. Un peu comme le ferai un effet accordéon, vous voyez ?
Je pensais à un truc, mais j'aimerais savoir si c'est correct et à défaut savoir si il n'y a pas d'autres solutions pour faire apparaitre du texte (autre que infobulle): si j'insère les tabs dans un conteneur assez grand, est-ce que c’est correct ?
J'imagine que niveau fluidité/responsivité du site, c'est pas génial du coup ?

Merci aux intervenants

Avec un span d'id en position:absolute pour le texte sera peut-être une solution ...
Modifié par pictural (25 Dec 2016 - 20:48)

Comme je débute, est-ce que tu pourrais m'expliquer par un exemple concret, stp ?

Gilles123C a écrit :
Comme je débute, est-ce que tu pourrais m'expliquer par un exemple concret, stp ?

Tous nous débutons. Mais un bout de ton code nous instruira davantage ...

Bonjour,

il est normal que le contenu s'affiche juste après la fin du contenu précédent (ici l'un ou l'autre contenu de tes onglets). Sinon il y aurait un blanc, un vide et l'utilisateur va pas comprendre (sur desktop) ou comprendre que la page est finie (sur mobile).
Si la longueur des contenus est vraiment très différente (3 paragraphes et paf 1 ligne pour le 2e onglet) et que le contenu a une bordure (basse, au moins), tu peux envisager d'ajouter un min-height sur chacun des parents du contenu (pas un height, jamais un height puisque le contenu peut être bien plus long que prévu (sur un écran moins large, en zoomant, en choisissant une taille de texte plus grande enfin plein de raisons que nous ne connaissons pas en tant que développeur-se-s). Comme ça même avec un contenu très court, il apparaîtra d'une hauteur minimale.

Bonsoir Felipe,
Très intéressante l'idée du min-height, je n'y avais pas pensé. Par contre, il faut spécifier en % ou en px ?

Sinon, j'ai trouvé ceci en pure css qui fait monter du texte contenu dans un div:

      
 .box {
	width: 636px;
	margin: 60px auto;
	position: relative;
	overflow: hidden;
	border: 4px solid #fff;
}

.box__image {
	display: block;
}

.box__icon {
display: inline-block;
vertical-align: bottom;
height: 40px;
margin-right: 5px;
}

.box__caption {
	position: absolute;
	color: #000;
	left: 0;
	right: 0;
	bottom: 0;
	top: 270px;
	transition: top .4s ease-in-out;
}

.box__title {
font-size: 3em;
font-weight: 100;
line-height: 1;
padding: 20px;
}

.box__description {
	position: absolute;
	padding: 20px 0;
	border-top: 1px solid red;
	left: 20px;
	right: 20px;
}

.box:hover .box__caption {
	top: 0;
	transition: top .3s ease-in-out;
}

et le html :

<div class="box">
	<div class="box__content">
		<img src="images/.jpg" class="box__image" alt="" />
	</div>
	<div class="box__caption">
		<div class="box__title">
			<img src="images/.jpg" alt="" class="box__icon" />
			Blablablabla
		</div>
		<div class="box__description">
			<strong>blabla</strong> blabla 
						
		</div>
	</div>
</div>

ça fait le rendu comme j'attends: tout ce qui est au-dessous ne bouge absolument pas, aucun décalage. Par contre, dans la box, le texte est bien trop bas et une grande partie de ce texte apparaît d'emblée. L'idéal serait de ne faire apparaitre que le titre de l'onglet puis une action de visibilité au passage de la souris ou au click.

Bonjour,

un multi ou pas qui n'aura fait que passer ; il est banni. Désolé pour cette lecture dont tu te serais bien passé pour commencer le WE j'imagine...

Bah ce n'est pas agréable de lire ce genre de chose, entre agressivité et mépris dans un forum d'entraide ou les lacunes uns peut entrainer le rejet et la moquerie des autres Mais il a été banni et on va pouvoir s'entraider dans un meilleur état d'esprit.
Merci à toi en tout cas..