Bonjour à tous,
cherchant toujours à améliorer mon site pour les terminaux mobiles et les petites résolutions d'écran, j'ai besoin d'aide pour discipliner mes infobulles...
J'ai recours à ces infobulles pour définir des termes complexes. Auparavant, j'utilisais une div sur le bord droit de l'écran pour afficher les définitions, mais c'est peu pratique pour les petites résolutions.
J'ai réussi à mettre au point des infobulles fonctionnelles (sans avoir recours à la fonction <title> qui ne correspondait pas à mes besoins). Cependant, elles sont décalées sur la droite à l'affichage et elles sortent de l'écran sur les petites résolutions. Comment les ramener dans le droit chemin et les empêcher de sortir de la div où se trouve le texte? Pour vous rendre compte du problème, voici le lien vers la page en question: http://tbouffand.free.fr/citath/agora.php
Ci-dessous, mes styles css en rapport avec les infobulles:
Et voici le code html de la page en question:
Merci d'avance pour vos suggestions!
Modifié par bouffandt (05 Aug 2016 - 11:44)
cherchant toujours à améliorer mon site pour les terminaux mobiles et les petites résolutions d'écran, j'ai besoin d'aide pour discipliner mes infobulles...
J'ai recours à ces infobulles pour définir des termes complexes. Auparavant, j'utilisais une div sur le bord droit de l'écran pour afficher les définitions, mais c'est peu pratique pour les petites résolutions.
J'ai réussi à mettre au point des infobulles fonctionnelles (sans avoir recours à la fonction <title> qui ne correspondait pas à mes besoins). Cependant, elles sont décalées sur la droite à l'affichage et elles sortent de l'écran sur les petites résolutions. Comment les ramener dans le droit chemin et les empêcher de sortir de la div où se trouve le texte? Pour vous rendre compte du problème, voici le lien vers la page en question: http://tbouffand.free.fr/citath/agora.php
Ci-dessous, mes styles css en rapport avec les infobulles:
.documentlarge /* C'est la div où j'aimerais que les infobulles soient cantonnées sans pouvoir en déborder */ {
background-color: #bfb6b6;
float: left;
display: block;
padding:10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
border-radius: 10px;
width:60%;
position: relative;
text-align:justify}
@media screen and (max-width: 800px){
.documentlarge{
float: left;
width: 94%;
}
}
.info /* C'est le style du texte qui doit être défini par une infobulle. */{
text-align: justify;
font-weight:bold;
color: #B14934;
font-size: 0.9em;
line-height:1.2em;
font-family: Tahoma;
position:relative
}
.info span /*C'est le texte mis en infobulle*/{
display: none; /* On masque l'infobulle. */
background-color: #B14934;
color:white;
border-radius:10px 10px 10px 10px;
width:150px;
text-align:left;
padding:5px;
margin:10px
}
.info:hover {
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
.info:hover span {
display: inline; /* On affiche l'infobulle. */
position:absolute;
}Et voici le code html de la page en question:
<meta charset="utf-8">
<title>Citoyenneté et démocratie à Athènes (Ve-IVe s. av JC)</title>
<link rel="stylesheet" href="style.css">
<script language="javascript" type="text/javascript" src="scripts.js"></script>
<LINK rel=STYLESHEET href="../spip/squelettes/css/styles.css" type="text/css">
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<div class="background">
<div class="body">
<div class="titre">Les institutions athéniennes</div>
<!-- on met ici le menu -->
<div class="menu">
<div class="conteneurmenu">
<?php include("menuvertical.php"); ?>
</div>
</div>
<div class="contenu">
<div class="documentlarge"<!-- Je ne veux pas que l'infobulle dépasse de cette div --> >
<b>Le découpage territorial de l'Attique</b><br>
<div class="imageattique">
<?php echo file_get_contents ('admattique.svg'); ?>
</div>
Ce découpage territorial est l'oeuvre du réformateur Clisthène (v. 508-500 av JC). Les citoyens athéniens sont répartis par <a class="info">dèmes <span>Circonscription administrative de base correspondant à un village ou un quartier.</span></a>, par <a class="info">trittyes<span>Circonscription admnistrative regroupant un nombre variable de dèmes.</span></a> et par <a class="info">tribus.<span>Groupement de citoyens appartenant à 3 trittyes situées chacune dans une région différente du territoire de la cité.</span></a> <br>Il existe 10 tribus qui sont un cadre essentiel de la vie politique du citoyen puisque magistrats, bouleutes, héliastes... doivent représenter également les 10 tribus (c'est pour cela que le nombre des magistrats, juges, bouleutes... est un multiple de 10). C'est également au sein de sa tribu que le citoyen est mobilisé pour la guerre. <br>Les citoyens participent également à une vie politique locale au niveau du dème.
</div>
</div>
</div>
</div>
</body>
</html>Merci d'avance pour vos suggestions!
Modifié par bouffandt (05 Aug 2016 - 11:44)
)? Je pensais qu'en jouant sur le margin, je la contraindrais à rester dans son conteneur, mais ce n'est pas le cas.