Problème de DIV sur des colonnes CSS

nbollier Messages postés 4 Statut Membre -
mr_demonicon Messages postés 921 Statut Membre - 12 sept. 2014 à 20:45

Bonjour,

J'ai un DIV (ou TD de TABLE) dont le contenu est organisé en 3 colonnes CSS.
C'est une liste de liens étalées sur ces 3 colonnes et j'aimerais qu'en passant la souris sur chaque lien on ait une petite prévisualisation au-dessus des colonnes dans un DIV supplémentaire et séparé.
Le problème c'est que le contenu de ce nouveau DIV de prévisualisation s'étale lui aussi automatiquement dans les 3 colonnes du DIV parent, alors que je voudrais qu'il puisse sortir des colonnes.

J'ai essayé de jouer avec les attributs CSS float, block, overflow, display, etc des différentes DIV mais je n'arrive pas à sortir des colonnes.

Voici le code avec lequel je lutte : http://jsfiddle.net/jug29yzf/1

Au secours !!!

Afficher la suite

A voir également:

Problème de DIV sur des colonnes CSS
Comment faire des colonnes sur word - Guide
Formule moyenne excel plusieurs colonnes - Guide
Classer par ordre alphabétique excel plusieurs colonnes - Guide
Déplacer des colonnes excel - Guide
Dans le fichier, générez ce tableau automatiquement (tableau croisé dynamique ou table de pilote) à partir des quatre premières colonnes. - Guide

1 réponse

Réponse 1 / 1

mr_demonicon Messages postés 921 Statut Membre 126

Utilise plutot le css a c moment la et non le js (regarde :hover)
Par exemple

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>CSS3 tooltip</title>
	
	<style type="text/css">
a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #000000;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}


.contenu{
	overflow:hidden;
	height: 50px;
	width:250px;
	padding-bottom: 150px;
}
.file{
	width:100px;
}
	</style>
	
	
</head>
<body>
	<div class='contenu'>
		<div class='file'>
			<a class="tooltips" href="#">CSS Tooltips
		<span>Tooltip</span></a>
	</div>

	<div class='contenu'>
		<div class='file'>
			<a class="tooltips" href="#">CSS Tooltips
		<span>Tooltip</span></a>
	</div>

	<div class='contenu'>
		<div class='file'>
			<a class="tooltips" href="#">CSS Tooltips
		<span>Tooltip</span></a>
	</div>

	<div class='contenu'>
		<div class='file'>
			<a class="tooltips" href="#">CSS Tooltips
		<span>Tooltip</span></a>
	</div>

</div>
</body>
</html>

nbollier Messages postés 4 Statut Membre

Bonjour,

Merci mais le problème reste identique quand j'inclue ton code dans des colonnes CSS.

mr_demonicon Messages postés 921 Statut Membre 126

mon code se suffit a lui meme apres adapte le sinon dis moi exactement ce que tu veux dans les details et je te le fais

nbollier Messages postés 4 Statut Membre

Salut,

Merci pour ton aide.

Ma liste de liens est affichée dans 3 colonnes CSS, quand j'inclue ton code dans des colonnes CSS, le problème reste entier : les SPANs Tooltip sont coupés et continuent de s'étaler sur les colonnes.

Par exemple, j'ai inclus ton code dans <div style="-webkit-columns:3 150px; -moz-columns:3 150px; columns:3 150px;"></div> et les coupure restent.

(note : j'ai besoin de supprimer l'overflow de .contenu pour pouvoir afficher plus de contenu)

nbollier Messages postés 4 Statut Membre

Voilà une image pour mieux comprendre ce que je cherche : http://nbollier.free.fr/css-column.jpg

mr_demonicon Messages postés 921 Statut Membre 126

okk j'ai compris ce que tu voulais dire en gros tu veux faire sortir les tooltips ou autre de ton div pour ca la solution consiste a creer un div class="block et deux "sous div" pour controler l'un les tooltips l'autre ton tableau je te met un exemple

<div id="block">
<div class="1"> Mon element</div>
<div class="2"><a href="#">Mon element</a></div>
</div>

Comme class 1 et 2 sont dans des div different on peux faciilement placer class 1 ou on veut dans le div block sans interferer avec le class 2 (l'exemple n'est peut etre pas abouti mais c'est lle principe qu'il faut comprendre)
Sinon je te propose une autre solution qui te plaira tout autant et la voila:

le principe est que je decale ta boite sur le coté au lieu d'etre en dessous des liens qui peut s'obtenir avec le fameux title sur un lien (

<a href="index.html" title="cela s'ouvrira dans une autre fenetre" target="_blank" class="lien10">  ici </a>

)

<head> <script type="text/javascript"> function show(id) {
    document.getElementById(id).style.visibility = 'visible';
}

function hide(id) {
    document.getElementById(id).style.visibility = 'hidden';
}</script> <style>.columns {
    -webkit-columns:3 150px;
    -moz-columns:3 150px;
    columns:3 150px;
    padding:8px;
}
.relative {
    position:relative;
    visibility:hidden;
    top:16px;
	left: 80%;
}
.absolute {
    position:absolute;
    visibility:hidden;
    background-color:#6cf;
    width:100px;}
	
</style></head><body><div class="style">
    <div class='relative'>
                    <div id='div1' class='absolute'>preview 1
                        <br />preview 1
                        <br />preview 1
                        <br />preview 1</div>
                </div>
				<div class='relative'>
                    <div id='div2' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div>
				<div class='relative'>
                    <div id='div3' class='absolute'>preview 3
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div4' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div5' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div6' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div7' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div8' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div9' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div10' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div><div class='relative'>
                    <div id='div11' class='absolute'>preview 2
                        <br />preview
                        <br />preview
                        <br />preview</div>
                </div></div>
	<table border="1">
        <tr>
            <td class='columns'>
                	<a href='#1' onmouseover="show('div1')" onmouseout="hide('div1')">link 1</a>

                <br />
                	<a href='#2' onmouseover="show('div2')" onmouseout="hide('div2')">link 2</a>

                <br />
                	<a href='#3' onmouseover="show('div3')" onmouseout="hide('div3')">link 3</a>

                <br />
               <a href='#4' onmouseover="show('div4')" onmouseout="hide('div4')">link 4</a>

                <br />
                	<a href='#5' onmouseover="show('div5')" onmouseout="hide('div5')">link 5</a>

                <br />
                <a href='#6' onmouseover="show('div6')" onmouseout="hide('div6')">link 6</a>

                <br />
                	<a href='#7' onmouseover="show('div7')" onmouseout="hide('div7')">link 7</a>

                <br />
                	<a href='#8' onmouseover="show('div8')" onmouseout="hide('div8')">link 8</a>

                <br />
                	<a href='#9' onmouseover="show('div9')" onmouseout="hide('div9')">link 9</a>

                <br />
               	<a href='#10' onmouseover="show('div10')" onmouseout="hide('div10')">link 10</a>

                <br />
                <a href='#11' onmouseover="show('div11')" onmouseout="hide('div11')">link 11</a>
            </td>
        </tr>
    </table>
</body>

Discussions similaires

Tri les lettres d'un mot par ordre alphabétique

Ecrire sur 2 colonnes indépendantes

Votre réponse

Discussions similaires