Balise <hr>

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Balise <hr>

Message par kahlanou le Jeu 21 Juin 2012 - 2:42

Bonsoir !

Après une correction faite d'un formulaire, -dont je remercie le bénévole- je souhaitais vous voir pour un autre "problème" d'affichage. En effet, la balise
que j'ai pu personnaliser via des codes semble être affublée d'un trait noir qui coupe en plein milieu de l'écran.

Preuve à l'appuie

Comme vous le voyez, cette image n'a pas la malformation de base. Qui plus est, dans un parfait hasard que j'ai manipulé le CSS de cette barre HR car je désirais simplement, au lieu de changer la couleur de la barre de séparation qui est blanche ici-dessous, lui mettre une image à la place. Assomé

Merci à celui ou celle qui m'aidera. ok




Je vous link donc le code CSS :
Code:

/**_Couleur de la barre de séparation **/

.hr {
background: transparent url(http://image.noelshack.com/fichiers/2012/25/1340239272-hr.png) no-repeat top center;
width: 400px;
height: 10px;
border: none !important;
}


Dernière édition par kahlanou le Ven 22 Juin 2012 - 3:21, édité 1 fois

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par Izumi375 le Jeu 21 Juin 2012 - 2:57

Bonjour,

Déjà il y a une grosse embrouille.
Ceci n'est pas un hr!
Votre jolie barre blanche ornementée n'est rien autre qu'un td (une cellule d'un tableau) qui a pour fond une image (celle de votre barre).

La balise <hr> bah justement c'est votre barre noire.

Code:
<td colspan="2" class="hr"><hr /></td>

donc il vous faut enlever ce

Code:
<hr />

Et dans le meilleur des mondes ca serait de donner un autre nom à votre classe (sans oublier de la remplacer dans le css) parce là ça porte à confusion. Appelons un chat un "chat"! Mr. Green

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par kahlanou le Jeu 21 Juin 2012 - 3:27

Excusez moi dans ce cas, mais cette balise hr, je dois la trouver dans quel template, car il me semble qu'elle est partout non ?

Et sinon, comment faire pour réellement mettre la balise <hr> en mode image et non pas simple "trait noir" ? C'est surtout ça la question finalement !

Merci pour votre réponse rapide qui résout un point sur deux.

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par Izumi375 le Jeu 21 Juin 2012 - 4:10

D'accord alors c'est pas de votre faute en fait c'est forumactif qui est foutu comme ça. Ils ont appelé la cellule de tableau hr pour rappeler que dedans il y en avait une. Mais comme je l'ai dit plus haut ce n'est pas une balise <hr>.

Alors vous avez une td qui fait office de barre pourquoi voulez vous passez la balise <hr> en mode image?
Je veux dire c'est très bien comme ça mis à part la barre noir qu'on va enlever vite fait.

Donc pour cela on va dans le template viewtopic_body.
On cherche

Code:
<td colspan="2" class="hr"><hr /></td>

et on remplace donc par:

Code:
<td colspan="2" class="hr"></td>

Ca devrait coller.

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par kahlanou le Jeu 21 Juin 2012 - 10:00

ça marche parfaitement, la barre noire s'est enlevée ! Yes

Pour ce qui est de la raison à vouloir ajouter une image à la barre de séparation, c'était simplement pour personnifier un peu la mise en page, puisque j'utilise énormément le |hr].

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par Izumi375 le Jeu 21 Juin 2012 - 14:22

Bah au lieu d'utiliser le hr utilsez:

Code:
<td colspan="2" class="hr"></td>

Ca marchera niquel.
Je fais ma flemmarde mais si vous voulez on peut personnaliser votre hr.
C'est juste que comme vous avez déjà un td personnalisé c'est un peu inutile de le refaire.

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Balise <hr>

Message par kahlanou le Jeu 21 Juin 2012 - 15:58

En effet, vous n'avez pas tord. Mais disons que j'oublie très facilement de mettre ce genre code pour personnaliser les posts. J'utilise le <hr> directement sans m'en rendre compte.

Mais surtout, si vous en avez le temps, pourriez vous m'expliquer comment personnaliser ce code s'il vous plait ? Au moins par la suite, les personnes cherchant aussi cela pourront lire le topic ! Thanks

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par Izumi375 le Jeu 21 Juin 2012 - 19:27

C'est un peu difficile pour moi de vous apprendre le css en un post alors que c'est un langage. C'est un peu comme l'allemand on suit des cours, ça se pratique, ...

Mais donner des explications ça c'est dans mes compétences!
Le principe en css c'est de donner une classe (un peu comme une étiquette) à vos éléments html que ce soient une div, un hr ou un lien (<a>).

on écrit donc par exemple:

Code:
<div class="nomdelaclasse"></div>

Dans la feuille css on va dire: tous ceux qui porte l'étiquette "nomdelaclasse" ont ces propriétés.

Code:
.nomdelaclasse {
propiétés;
}

Malheureusement (ou plutôt heureusement parce que sinon internet ne serait pas aussi joli) il y a beaucoup trop de propriétés pour que je vous les énumère ici. Il y a des sites consacrés aux listing de ces propriétés et qui les expliquent.

On va prendre votre code et je vais mettre en commentaires (ce sont des lignes qui n'affectent pas le code) les indications:

Code:
.hr {
background: transparent url(http://image.noelshack.com/fichiers/2012/25/1340239272-hr.png) no-repeat top center; //on indique que le fond de la boite est transparent avec une image dont on donne l'url qu'on ne répète pas; centrée en haut.
width: 400px; //définit la largeur en pixel
height: 10px; // définit la hauteur en pixel
border: none !important; // indique qu'il ne faut pas mettre de bordure.
}

Si on veut que le css s'occupe de tous les éléments d'un certain type on ne met pas de point (qui est réservé au classe).
Par exemple si on veut qu'il fasse ceci pour tous les hr:

Code:
hr {
background: transparent url(http://image.noelshack.com/fichiers/2012/25/1340239272-hr.png) no-repeat top center;
width: 400px;
height: 10px;
border: none !important;
}

Notez qu'il n'y a pas de point avant hr.
Faites attention cela va affecter tous les hr! Donc si forumactif en a mis là où vous n'en voulez pas vous risquez de vous retrouvez avec des barres blanches un peu partout.

Mais bon si vous voulez que votre hr soit tout prêt tout fait on n'a pas le choix.

(c'est aussi pour ça que je rechignais à mettre en "mode image" votre hr)

Bon je ne vous ai pas perdu?
Si vous avez d'autres questions n'hésitez pas. Very Happy

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Balise <hr>

Message par kahlanou le Ven 22 Juin 2012 - 2:46

Oh non vous ne m'avez pas perdu ! Au contraire je connaissais les vertus du CSS pour en avoir lu des tutoriels afin de faire mon forum. Une forme de codage à l'allure simple mais fatalement complexe quand on ne sait pas quoi choisir comme classe précise sur un thème donné, comme le HR justement.

Il est vrai que c'est dangereux de configurer TOUTES les barres hr puisque certaines seraient assez révoltantes pour se montrer là où on ne les veut pas ! Bouh ! Et non ce n'était pas par acte de faignandisme (Aïe je me dénonce!) que j'ai demandé un tel code. Simplement qu'en l'état actuelle des choses, je ne vois pas un autre engouement pour rendre joli le forum.

L'image est dans le thème, il est parfait pour séparer le titre du corps du message et en plus il fait très esthétique et médieval dans un sujet ! Si cette option venait à ne plus me contenir, je saurais me rediriger vers ce sujet archivé et prendre l'autre option de la div pour m'en sortir tout aussi simplement pour un choix plus large de personnalisation finalement. ( Le choix d'avoir un HR différent et pour le titre et pour le message. Enfin si j'ai bien compris. )

Tout ceci pour vous affubler d'un "merci" et dire que votre réponse m'a énormément aidé !
ok ::pourtoi::

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par Izumi375 le Ven 22 Juin 2012 - 3:11

Ah bah les balises c'est des balises HTML faut les connaître les apprendre ya pas de secret en fait!

Un conseil prenez firebug. C'est un petit logiciel sur firefox (ya l'équivalent sur chrome) qui permet de vous affichez le code html et le css qui se rapporte à l'élément que vous survolez.
Ca m'a énormément appris. (Oui je l'avoue j'ai jamais ouvert un tuto de html ou de css j'ai tout appris sur le tas... Honte sur moi!)

Comme ça si vous voyez un effet tellement stylé que vous voulez le même. Hop! firebug et vous avez appris un nouvelle propriété css!

Si vous avez d'autres questions ou je ne sais quoi d'autres n'hésitez pas à me contacter.

Viel Glück! Mr. Green

PS: merci pour le "merchi" j'adore les points de réput! Very Happy

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Balise <hr>

Message par kahlanou le Ven 22 Juin 2012 - 3:14

Ah bah là en l'espace d'une soirée vous m'aurez peut-être apprit l'équivalent de pas mal de mois d'embuches sans le petit module de FF !

Merci encore ! Et non, je n'ai pas de nouvelles questions concernant le principal sujet de ce topic, mais je nourris une curiosité abondante sur tant d'autre chose !

Encore merci.
Je peux dire que le sujet principal est clos ! Very Happy

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum