Bonjour à tous !
Merci d'avoir porté attention à mon problème.
Commençons par définir ma situation globale :
Dans le cadre d'un projet personnel amateur de création d'un roman, j'ai souhaité sur demande de certains de mes amis pouvoir publier en ligne mes chapitres "brouillons" pour les soumettre à leur sens critique. J'ai donc entamé avec mes minces connaissances en Html/Css la conception d'une plate-forme de lecture en ligne, globalement un site internet Html/Css relié via Php à une base de donnée MySQL contenant mes chapitres proprement dits.
L'interface de lecture consiste en une page blanche de format 21cm x 29,7cm dont l'émargement intérieur (padding) est de 2,5cm.
J'ai ainsi deux avantages : je respecte un standard d'impression papier pour les éventuels connaissances qui n'apprécient pas la lecture sur écran, et je reste dans un cadre visuel proche de Microsoft Word, avec lequel je rédige mon roman, pour ceux qui ont l'habitude de lire mes premiers jets sous format .doc.
Les avantages d'un tel système et pourquoi l'avoir choisi :
- Mise à jour rapide, voir automatisé du contenu en temps réel.
- Pas de transfert de document, voir de pièces-jointes de masse pour une liste de contact "lecteurs" par exemple.
- Facile d'utilisation, ne nécessite pas de logiciels particuliers (excepté un navigateur, bien entendu) et donc très facile d'accès et d'utilisation même sur mobile 3G/3G+ (ex: Nokia N97).
- Pas de problèmes de compatibilité entre moi, un addict microsoft, et certains de mes amis, plutôt 'free-mind' (Open Office, voir pour les plus aguéris, VI sur Linux).
- Respect total de la mise en forme initiale du texte, qui par certains point profite à l'immersion scénaristique.
Le code de la page Html :
Code de la feuille de style CSS :
Mon Problème :
Afin de compléter les références qu'il peut encore manquer à mes lecteurs pour bien saisir l'univers dans lequel se situe mon histoire, j'ai décidé de m'inspirer de l'article Alsacréations concernant les infobulles et leurs "stylage".
Lien ici : http://www.alsacreations.com/astuce/lire/1-comment-contrler-et-modifier-lapparence-dune-infobullenbsp.html
cela pour deux raisons :
- valoriser l'interactivité du format web avec le lecteur.
- éviter les commentaires de bas de pages en très petits caractères qui sont de mon point de vue disgracieux et peu pratique à générer lors de la rédaction.
Après quelques bidouillages persos, j'en suis venu à créer ce que je voulais. Mais l'usage d'une liste dans mon infobulle provoque immanquablement un retour à la ligne au mot suivant directement celui qui "contient" l'infobulle.
Exemple :
dans mon code ci-dessus, les mots "interdum" et "donec" ne provoquent pas de retour à la ligne, puisque n'utilisant pas de liste dans l'infobulle.
Tandis que les mots "ipsum" et "tellus" renvoi à la ligne sans me demander mon avis...
Je sais, je chipote, mais dois-je me priver de ce cas très particulier qu'est la liste, sous prétexte que cela provoque un effet non souhaité ? En contournant tous les problèmes que j'ai eu précédemment je n'aurai jamais abouti à un tel résultat...
Comment faire pour corriger ce problème ?
Quelques questions subsidiaires :
- Ma page est elle conforme aux standards web, notamment d'accessibilité ?
- Je prévois par la suite de rendre impossible à copier/coller le contenu de mes pages, par exemple en interdisant le clic-droit, mais cette méthode m'est désagréable puisque le clic-droit ne sert pas qu'à cela...et pourrait donc gêner d'autres utilisateurs (par exemple, ceux qui utilisent NoScript dans le menu contextuel). Que puis-je faire pour empêcher efficacement la copie ? (sachant que je prévois de déposer mes droits sur mes écrits actuellement et que je ne tiens pas à voir de multiples extraits de mon roman partout sur les blogs).
Informations complémentaires :
La div "toolbar" contiendra les outils de navigation (page précédente, suivante, placer un signet, notation sur 5 pour les chapitres déjà terminés, possibilité de commenter la page ou le chapitre, etc.
Ne travaillant pour l'instant que sur l'aspect graphique qui me taquine (de nombreux outils php ayant déjà étés développés ces derniers jours) je n'ai pas posté ici son contenu trop long, dense, peu annoté, et nécessitant trop de liens externes vers des .php).
Je vous remercie d'avoir porté attention à mon problème et vous souhaite une excellente soirée, en souhaitant que vous puissiez apporter une pierre à mon édifice !
Un grand "Merci" à Alsacréation qui m'a beaucoup apporté lors de mon auto-formation Html/Css, par exemple concernant les ombrages ou le positionnement.
Merci d'avoir porté attention à mon problème.
Commençons par définir ma situation globale :
Dans le cadre d'un projet personnel amateur de création d'un roman, j'ai souhaité sur demande de certains de mes amis pouvoir publier en ligne mes chapitres "brouillons" pour les soumettre à leur sens critique. J'ai donc entamé avec mes minces connaissances en Html/Css la conception d'une plate-forme de lecture en ligne, globalement un site internet Html/Css relié via Php à une base de donnée MySQL contenant mes chapitres proprement dits.
L'interface de lecture consiste en une page blanche de format 21cm x 29,7cm dont l'émargement intérieur (padding) est de 2,5cm.
J'ai ainsi deux avantages : je respecte un standard d'impression papier pour les éventuels connaissances qui n'apprécient pas la lecture sur écran, et je reste dans un cadre visuel proche de Microsoft Word, avec lequel je rédige mon roman, pour ceux qui ont l'habitude de lire mes premiers jets sous format .doc.
Les avantages d'un tel système et pourquoi l'avoir choisi :
- Mise à jour rapide, voir automatisé du contenu en temps réel.
- Pas de transfert de document, voir de pièces-jointes de masse pour une liste de contact "lecteurs" par exemple.
- Facile d'utilisation, ne nécessite pas de logiciels particuliers (excepté un navigateur, bien entendu) et donc très facile d'accès et d'utilisation même sur mobile 3G/3G+ (ex: Nokia N97).
- Pas de problèmes de compatibilité entre moi, un addict microsoft, et certains de mes amis, plutôt 'free-mind' (Open Office, voir pour les plus aguéris, VI sur Linux).
- Respect total de la mise en forme initiale du texte, qui par certains point profite à l'immersion scénaristique.
Le code de la page Html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="toolbar"></div>
<div class="feuille">
<p>Lorem <a class="info">ipsum <span><h1>ipsum</h1><h2>Définition :</h2><p>Bla bla bla blablabla bla blabla blabla bla, blabla bla.</p><h2>Précisions Hors Contexte :</h2><p>Blabla bla blablabla.</p><h2>Dans mon roman :</h2><p><ul><li>Blabla.</li><li>Bla.</li><li>Blablabla blabla bla bla blabla.</li><li>Blabla bla bla bla.</li></ul></p></span></a> dolor sit amet, consectetur adipiscing elit. Nunc tellus ipsum, ullamcorper ut aliquet id, consequat at quam. Mauris in arcu mauris, a dignissim enim. Maecenas <a class="info">interdum <span><h1>interdum</h1><h2>Définition :</h2><p>Bla bla bla blablabla bla blabla blabla bla, blabla bla.</p><h2>Dans mon roman :</h2><p>Blabla bla blablabla Blabla bla blablabla Blabla bla blablabla.</p></span></a>, mauris vitae mattis semper, nunc lacus interdum nibh, ut suscipit lacus magna vitae arcu. Duis congue dolor aliquet justo mollis tempus. Suspendisse eu felis dui. Quisque mauris leo, rutrum eu rutrum nec, euismod nec magna. Nulla facilisi. Donec sodales neque vitae ipsum egestas quis consequat dolor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="info">Donec <span><h1>Donec</h1><h2>Définition :</h2><p>Bla bla bla blablabla bla blabla blabla bla, blabla bla.</p><h2>Dans mon roman :</h2><p>Blabla bla blablabla Blabla bla blablabla Blabla bla blablabla.</p></span></a> nunc lectus, facilisis quis eleifend a, egestas vitae lectus. Quisque mattis, lorem vitae consequat facilisis, lacus mi imperdiet massa, in semper nulla dolor non quam. Aliquam erat volutpat. Suspendisse ac mollis mi. Integer imperdiet feugiat luctus. Vestibulum lorem justo, fermentum eget adipiscing id, adipiscing nec dui. Suspendisse ut vehicula massa. Donec porttitor egestas lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed fringilla, mi sed rhoncus elementum, quam <a class="info">tellus <span><h1>tellus</h1><h2>Définition :</h2><p>Bla bla bla blablabla bla blabla blabla bla, blabla bla.</p><h2>Précisions Hors Contexte :</h2><p>Blabla bla blablabla.</p><h2>Dans mon roman :</h2><p><ul><li>Blabla.</li><li>Bla.</li><li>Blablabla blabla bla bla blabla.</li><li>Blabla bla bla bla.</li></ul></p></span></a> tincidunt enim, nec pretium est magna nec augue. Suspendisse odio purus, congue et fringilla quis, egestas in massa. Curabitur at ante sed dui tincidunt tincidunt eget in eros. Morbi imperdiet erat eget lorem pulvinar pretium. Donec augue odio, dignissim vel vestibulum sit amet, condimentum et urna. Aliquam.</p>
</div>
</body>
</html>Code de la feuille de style CSS :
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: justify;
}
body {
background-color: #9099AE;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #CCCCCC;
font-style: italic;
}
a:visited {
color: #666666;
}
a:hover {
color: #999999;
}
a:active {
color: #999999;
}
.toolbar {
width: 100%;
height: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
background-color: #D8E7FC;
}
.feuille {
width: 16cm;
height: 24.7cm;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
border: #000000 solid 1px;
-moz-box-shadow: 1px 1px 2px #000000;
-webkit-box-shadow: 1px 1px 2px #000000;
background-color: #FFFFFF;
padding: 2.5cm
}
a.info { /*Paramètres relatifs aux liens qui afficheront la bulle en hover*/
position: relative; /*Sert au placement de l'infobulle*/
font-weight: bold;
color: #000000;
}
a.info span {
display: none; /*Cache le contenu de l'infobulle lorsqu'elle n'est pas survolée*/
}
a.info:hover {
background: none; /*Correctif pour IE 6*/
z-index: 500; /*Correctif pour IE 6*/
}
a.info:hover span { /*Paramètres relatif au Style de l'infobulle*/
-moz-border-radius: 5px; /*Arrondis des Angles de l'infobulle pour Gecko (Firefox, Opéra)*/
-webkit-border-radius: 5px; /*Arrondis des Angles de l'infobulle pour Webkit (Google Chrome)*/
display: inline;
position: absolute;
top: 2em;
left: 1em;
width: 250px; /*Largeur fixe en pixels*/
background-color: #181818;
padding:5px;
border:#CCCCCC solid 1px;
}
a.info span h1 { /*Paramètres relatif au Style du titre infobulle*/
color:#FFFFFF;
text-align: center;
font-size:14px;
font-weight:bold;
}
a.info span h2 { /*Paramètres relatif au Style du sous-titre infobulle*/
color:#FFFFFF;
text-align:left;
font-size:12px;
}
a.info span p { /*Paramètres relatif au Style paragraphe infobulle*/
color:#F9C400;
text-align:justify;
font-size:12px;
}
a.info span li { /*Paramètres relatif au Style liste infobulle*/
color:#F9C400;
text-align: left;
font-size:12px;
}
Mon Problème :
Afin de compléter les références qu'il peut encore manquer à mes lecteurs pour bien saisir l'univers dans lequel se situe mon histoire, j'ai décidé de m'inspirer de l'article Alsacréations concernant les infobulles et leurs "stylage".
Lien ici : http://www.alsacreations.com/astuce/lire/1-comment-contrler-et-modifier-lapparence-dune-infobullenbsp.html
cela pour deux raisons :
- valoriser l'interactivité du format web avec le lecteur.
- éviter les commentaires de bas de pages en très petits caractères qui sont de mon point de vue disgracieux et peu pratique à générer lors de la rédaction.
Après quelques bidouillages persos, j'en suis venu à créer ce que je voulais. Mais l'usage d'une liste dans mon infobulle provoque immanquablement un retour à la ligne au mot suivant directement celui qui "contient" l'infobulle.
Exemple :
dans mon code ci-dessus, les mots "interdum" et "donec" ne provoquent pas de retour à la ligne, puisque n'utilisant pas de liste dans l'infobulle.
Tandis que les mots "ipsum" et "tellus" renvoi à la ligne sans me demander mon avis...
Je sais, je chipote, mais dois-je me priver de ce cas très particulier qu'est la liste, sous prétexte que cela provoque un effet non souhaité ? En contournant tous les problèmes que j'ai eu précédemment je n'aurai jamais abouti à un tel résultat...
Comment faire pour corriger ce problème ?
Quelques questions subsidiaires :
- Ma page est elle conforme aux standards web, notamment d'accessibilité ?
- Je prévois par la suite de rendre impossible à copier/coller le contenu de mes pages, par exemple en interdisant le clic-droit, mais cette méthode m'est désagréable puisque le clic-droit ne sert pas qu'à cela...et pourrait donc gêner d'autres utilisateurs (par exemple, ceux qui utilisent NoScript dans le menu contextuel). Que puis-je faire pour empêcher efficacement la copie ? (sachant que je prévois de déposer mes droits sur mes écrits actuellement et que je ne tiens pas à voir de multiples extraits de mon roman partout sur les blogs).
Informations complémentaires :
La div "toolbar" contiendra les outils de navigation (page précédente, suivante, placer un signet, notation sur 5 pour les chapitres déjà terminés, possibilité de commenter la page ou le chapitre, etc.
Ne travaillant pour l'instant que sur l'aspect graphique qui me taquine (de nombreux outils php ayant déjà étés développés ces derniers jours) je n'ai pas posté ici son contenu trop long, dense, peu annoté, et nécessitant trop de liens externes vers des .php).
Je vous remercie d'avoir porté attention à mon problème et vous souhaite une excellente soirée, en souhaitant que vous puissiez apporter une pierre à mon édifice !
Un grand "Merci" à Alsacréation qui m'a beaucoup apporté lors de mon auto-formation Html/Css, par exemple concernant les ombrages ou le positionnement.
