Sujet Précédent Sujet Suivant

Problème de DIV sur des colonnes CSS

Fermé
nbollier Messages postés 4 Date d'inscription mercredi 10 septembre 2014 Statut Membre Dernière intervention 11 septembre 2014 - Modifié par nbollier le 10/09/2014 à 15:22
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 - 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 !!!
A voir également:

1 réponse

Réponse 1 / 1
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
10 sept. 2014 à 18:33
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>
0
nbollier Messages postés 4 Date d'inscription mercredi 10 septembre 2014 Statut Membre Dernière intervention 11 septembre 2014
10 sept. 2014 à 18:51
Bonjour,

Merci mais le problème reste identique quand j'inclue ton code dans des colonnes CSS.
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
10 sept. 2014 à 20:48
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
0
nbollier Messages postés 4 Date d'inscription mercredi 10 septembre 2014 Statut Membre Dernière intervention 11 septembre 2014
11 sept. 2014 à 11:22
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)
0
nbollier Messages postés 4 Date d'inscription mercredi 10 septembre 2014 Statut Membre Dernière intervention 11 septembre 2014
11 sept. 2014 à 12:33
Voilà une image pour mieux comprendre ce que je cherche : http://nbollier.free.fr/css-column.jpg
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
12 sept. 2014 à 20:45
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>
0

Discussions similaires

liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses
Ajuster tableau a la taille d'une feuille A4
keke10501 -
fffff -

9 réponses
Tri les lettres d'un mot par ordre alphabétique
labejau37 -
DjiDji59430 -

9 réponses