Forum de support officiel

Forum d'entraide et support officiel des forums Forumprod.com


Heures au format UTC + 1 heure [ Heure d’été ]


Règles du forum


Pas de support ici, uniquement des tutoriels.


Poster un nouveau sujet Répondre au sujet  [ 10 messages ] 
Auteur Message
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 30 Mar 2012, 04:23 

Créer des infobulles & des tableaux:

Ce petit tutoriel vous explique comment créer des infobulles sur vos liens ainsi que des tableaux que vous pouvez modifier à votre guise.
Les infobulles et les tableaux ne s'afficheront dans les posts que si vous êtes admin et que vous utilisez la balise [html].
Vous pouvez aussi les utiliser sur le portail,les règles d'un forum, le message de bienvenue ainsi que dans les descriptions des forums.
Si vous avez le moindre doute ,enregistrez votre feuille CSS complète avant toutes modifications.

On va commencer par lire une documentation des codes utilisés sur les CSS,cela peut s'avérer très utile pour vous ainsi que pour les infobulles et les tableaux pourquoi pas?
C'est peut-être le moyen de mieux comprendre ces lignées de codes que vous modifiez et créez dans la feuille de style ;)
A lire :arrow: Listing des propriétés CSS

Les infobulles:

Allez dans les CSS:
:arrow: Panneau d'administration :arrow: Styles :arrow: Editer la feuille de style CSS
Puis allez tout en bas de votre feuille de style.

Il faut y insérer ces codes à la fin de la feuille de style CSS, bien alignés et balisés:
Code:
a.bubble{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
a.bubble:hover{
z-index:25;
background-color:#FFF
}
 
a.bubble span{
display: none
}
 
a.bubble:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;

Comme vous pouvez le voir il y a le mot bubble qui est la "class" de vos infobulles,vous pouvez modifier le nom de votre class en modifiant juste le mot bubble par le nom voulu,attention si vous modifiez le bubble sur une ligne il faudra le modifier dans tout les autres débuts de codes.
:arrow: Légende & aides des lignes de codes:
Display: ceci n'est pas à changer
Position: ceci n'est pas à changer
Top: le width:15em; est à modifier si voulu pour agrandir la bulle -- le left:2em; est à changer si voulu pour déplacer la bulle vers la gauche
Border: le 1px est à changer pour l'épaisseur de la bordure -- le solid est à changer pour l'effet de la bordure(voir listing des bordures ici -- la couleur est à changer si voulu en modifiant les #000
Background-color: constitue la couleur de fond de la bulle
Color: la couleur du texte à changer si voulu
Text-align: le justify si vous voulez est à changer par soit left / center / right (utile si vous mettez une image dans la bulle car celle ci se pourrait qu'elle empiète sur votre texte)
Font-weight: modifiez si voulu le none par bold / bolder / normal / lighter
Padding: ceci n'est pas à changer

Vous pouvez aussi arrondir la bulle et y ajouter un effet ombré,les codes: ici à ajouter à la suite de cette partie du tableaux: a.bubble:hover span{
Vous pouvez aussi ajouter une image pour ce faire ajouter à la suite du code au dessus celui-ci: background: url(url-de-l'image); Mettez l'url de l'image à la place comme indiqué en rouge
Il se pourrait que l'image colle le haut de votre bulle pour remedier à cela insérez ce code à la suite: background-position: left; vous pouvez modifier le left par right ou center selon vos besoins.

Ensuite il va falloir afficher votre infobulle(s) pour ce faire insérez ce code ci-dessous dans l'emplacement où le html est activé:
Code:
<a class="bubble" href="url">texte<span>texte dans linfo bulle</span></a> 

:arrow: Aides pour afficher les infobulles:
Si vous avez modifier le nom de la class dans les CSS modifiez cela aussi dans les balises ci-dessus.
Modifiez le url par l'adresse du site qui sera redirigé au clic.
Modifiez le texte par le texte qui sera survolé pour afficher l'infobulle
Modifiez le texte dans l'info bulle par le texte qui sera affiché dans l'infobulle

Créer des tableaux:

Nous allons commencer par donner une class à notre tableau,mettez ce que vous voulez pour notre exemple j'ai choisi  de mettre test comme class :
.test {
Ensuite on va y ajouter des informations importantes selon vos besoins,exemple pour commencer , couleur du texte,couleur du fond,un cadre,un effet arrondis,une propriété width qui génère la longueur du tableau ainsi qu'une propriété margin qui place le tableaux au millieux.Il est bien évidemment possible de rajouter d'autres informations mais on va y aller doucement ;)
Couleur du texte: Ajouter bien aligné cette ligne color: #000000; et modifiez le 000000 par le code couleur voulu.
Couleur du fond: Ajoutez bien aligné cette ligne: background: #000000; et modifiez le 000000 par le code couleur voulu.
Le cadre: Ajoutez bien aligné cette ligne: border: 0px solid #000000; et modifiez le 0px pour avoir une épaisseur de cadre selon vos goûts,Modifiez le solid par une propriété voulu(listing des bordures ici,Modifiez le 000000 par la couleur du cadre voulu.
La longueur du tableau: modifiez le 50% à la propriété width pour choisir la longueur.
L'emplacement au millieu: Ajoutez cette ligne: margin: auto; ainsi le tableaux sera au millieux,pour ne pas voir le tableau ainsi,supprimé cette ligne ou ne la mettez pas ainsi votre tableaux restera du côté standard donc à gauche.
L'effet arrondis: ajoutez ce code ci-dessous bien aligné dans la class:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Vous pouvez modifier le 6px de l'effet arrondis si vous le voulez mais si vous changer le chiffre sur une ligne il faudra changé le 6px sur les autres.


Ainsi si je reprend tout mon tableaux depuis le début avec les informations ajoutées on obtient ceci:
Code:
.test {
  background: #000000;
  border: 0px solid #000000;
  color: red;
  width: 50%;
  margin: auto;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;


Où installer les codes?
Il faut les mettres tout à la fin de la Feuille de style CSS
:arrow: PA :arrow: Styles :arrow: Editer la feuille de style CSS


Maintenant il va falloir utiliser un code html pour afficher le tableau avec le/les textes que vous voulez:(assurez-vous que le html est activé à l'emplacement voulu)
Code:
<table class="test"><tr><td><b>MonTexte</b></td></tr></table> 


Ma class est test si vous avez modifier le nom de la class il faudra le modifier dans ce code ci-dessus.
Là où il y a écrit MonTexte mettez le texte voulu,
Vous pouvez voir que cela fonctionne ;) or peut-être que vous voulez placer votre texte au centre avec une image à droite ou à gauche?C'est tout à fait possible en html mais en BBcode également pour ce faire ajouter ces bbcodes à la place de MonTexte dans le code html ci-dessus:(donc entre les balises <b></b>)
Code:
[align=left][img]lien[/img][/align][align=center]MONTEXTE[/align] 

Ainsi qu'en HTML bien entendu:(donc toujours pareil mettre ces codes à la place de MonTexte)
Code:
<div align="left"><img src="url_image" alt="texte alternatif" /></div><div align="center">MONTEXTE</div> 

Merci à Willy_00a pour la modification de balise.

Modifiez selon vos besoins les propriétés left / center
Le mot url_image est à remplacer par l'adresse de votre image
Le mot texte alternatif désigne le texte qui sera diffusé si l'image ne s'affiche pas
Mettre le texte choisi à la place de MONTEXTE
Pour un éventuelle éspace dans votre tableaux utilisez la balise <br>


ImageTutoriel rédigé pour le forum de support de ForumProd.

En éspèrant que cela vous sera utile  ;)


Dernière édition par Lesny le 03 Avr 2014, 21:08, édité 1 fois.
Modification d'un lien en erreur 404


Haut
  Profil 
 
Membre super
Membre super

Inscription: Jan 2011
Messages: 1141
Points: 1096
Sexe: Masculin
Age: 25
Posté: 30 Mar 2012, 08:54 

Bonjour WADJH,
Super Tuto.. Pour la balise
Code:
<img..,>
, faudra la rectifier comme ça
Code:
<img src="url_image" alt="texte alternatif" /> 

Texte alternatif étant celui sortira si l'image n'est pas chargée..


Haut
  Profil 
 
Membre super
Membre super

Inscription: Aoû 2011
Messages: 272
Points: 30
Sexe: Féminin
Forum: http://poesie.forumprod.com
Posté: 30 Mar 2012, 09:17 

Bonjour Wadjh,

Les infobulles se sont bien les textes, que l'on peut lire en passant la souris sur l'image, ou lien ?
Bien figurez-vous, que sur mon forum, comme sur le portail, j'ai annoté certaines images, d'une mini description, et j'ai remarqué que celle-ci est visible avec internet explorer 8, mais pas sous firefox moxilla, ni sur google chrome. Quand on passe la souris dessus elle reste muette. Bien entendu, je n'ai pas fait tout ce que vous expliquez de faire avec le css, vu que ça marchait sans cela, avec internet explorer 8. Mais je vais essayer vos manipulations pour voir si ça rend Firefox Mozilla et Google chrome plus coopératifs :)

Merci en tout cas pour ce tutoriel :thumbup:


Haut
  Profil 
 
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 30 Mar 2012, 09:43 

Bonjour,

Willy, ca y est merci pour la balise! ^^ j'ai placé ceci dans le tutoriel et merci du compliment ;)
J.B D'accord mais bizarre sur firefox et g. chrome cela fonctionne :/ et derien pour le tuto avec plaisir
J.B a écrit:
Les infobulles se sont bien les textes, que l'on peut lire en passant la souris sur l'image, ou lien ?

Oui c'est ca,le texte apparait dans la bulle carré.

Pour IE malheureusement je n'ai plus connaissance de ce navigateur :problem: :silent:

d'accord pour vos modifs, enregistrez votre feuille de style css avant modification c'est plus sur au moin ;)


Haut
  Profil 
 
Membre super
Membre super

Inscription: Déc 2010
Messages: 1779
Points: 295
Localisation: Larochelle/Lagord
Sexe: Masculin
Age: 52
Forum: http://pub-forum.forumprod.com
Posté: 31 Mar 2012, 16:35 

merci wadjh que de codes à insérer, c'est pour des personnes ayant un peu de connaissances en css et html, et dans tous les cas enregistrez votre feuille de style css avant toutes modifications j'ai un forum ou l'on peut remettre la feuille de style css par défaut voila, une chance quand l'on fait des bêtises!regardez la modif du qeel>> http://tylipub.1fr1.net/


Haut
  Profil Site Internet 
 
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 31 Mar 2012, 19:19 

Bonsoir,derien Skiptonick ^^ en effet un petit peu de connaissances en html / css seront appréciées,mais j'apprend tout les jours donc je fais partager ^^,peut-être aussi que j'explique pas asser je vais revoir de A à Z mes tutos rédigés et essayer d'y apporter plus d'informations.

J'ai été voir le QEEL sur le forum,c'est par les templates qu'on arrive à cela en effet par les CSS c'est pas bon même avec une propriété du style content: je crois,en tout cas c'est très réussi ;) bravo ! et derien encore c'est un plaisir.
Bon courage Skiptonick.


Haut
  Profil 
 
Membre fidèle
Membre fidèle

Inscription: Aoû 2013
Messages: 42
Points: 154
Sexe: Féminin
Posté: 21 Oct 2013, 09:58 

Merci pour le tuto, c'est une superbe idée !


Haut
  Profil 
 
Membre reconnu
Membre reconnu

Inscription: Avr 2014
Messages: 7
Points: 35
Localisation: FRANCE, OISE, BEAUVAIS
Sexe: Masculin
Age: 45
Forum: headhunter.forumprod.com
Posté: 03 Avr 2014, 20:23 

Bonsoir,
Le liens du tuto A lire: Listing des propriétés CSS est HU HU ! 404 !
La page que vous cherchez n'existe pas (ou plus).
Quelqu'un aurait il un autre lien à fournir :?:
Merci d'avance.
Cordialement.


Haut
  Profil Site Internet 
 
Modérateur
Modérateur
Avatar de l’utilisateur

Inscription: Sep 2009
Messages: 4602
Points: 9926
Localisation: en France
Sexe: Masculin
Age: 27
Forum: http://support.forumprod.com
Posté: 03 Avr 2014, 21:08 

Bonjour / bonsoir

voici le bon lien

http://fr.openclassrooms.com/informatiq ... rietes-css

_________________
Nous restons à votre disposition pour toutes questions complémentaires.

Cordialement,
Lesny- Modérateur du forum de support.

- Merci de lire les règles du forum
- Merci de faire une recherche avant de poster
- Pas de support par MP, merci.


Haut
  Profil Site Internet 
 
Membre reconnu
Membre reconnu

Inscription: Avr 2014
Messages: 7
Points: 35
Localisation: FRANCE, OISE, BEAUVAIS
Sexe: Masculin
Age: 45
Forum: headhunter.forumprod.com
Posté: 04 Avr 2014, 18:32 

Bonjour et merci Lesny
cordialement.
C'est chaud, j'en ais au moins pour deux semaines :| mais bon cela me rendra moins novice :)


Haut
  Profil Site Internet 
 

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Modérateur:

Aideurs

Permissions de ce forum:

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers
Poster un nouveau sujet Répondre au sujet  [ 10 messages ] 


cron
Créer un forum | © phpBB | Entraide & support | Forum gratuit