28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je rencontre depuis cette semaine un petit problème avec la balise <h1>, <h2> et <h3> de ma feuille CSS, je l'utilise depuis plus de 2 ans et jusqu'à présent tout fonctionnait correctement.

Mon site ne prend plus en compte les modifications de taille et de caractère (gras, normal etc ....) de mes polices <h1>, <h2> et <h3> par contre je peux modifier la position (left, justify etc .....) et la couleur.

J'ai laissé sur ma page d'accueil le <h1> (taille de police trop grande) et j'utilise <p> à la place de <h2> et <h3>, cela n'est pas très esthétique et lorsque j'ai beaucoup de texte je n'ai pas assez de place. Ci-joint le lien vers l'index de mon site, il s'agit du 2ème slider en bas de page (3 lignes et 3 colonnes). http://www.alcoataudonfoot.com/temporaire.php

Ci-joint ma feuille CSS en question et le contenu de ma page d'accueil en HTML (page temporaire ou j'essaie de trouver une solution).

http://www.aht.li/2967339/style.css

http://www.aht.li/3035312/Sauvegarde_Index_Page_temporaire.html

Je ne suis pas vraiment un expert du CSS et du HTML, j'ai accepté pour mon club de foot de prendre la gestion du site internet suite au départ d'un collègue, je découvre et je m'améliore au fil du temps. Pour info le site est hébergé chez wiféo.

Merci d'avance pour votre aide
Modifié par tourbian (08 Mar 2017 - 12:01)
Bonjour,

Je ne suis pas sûr d'avoir compris la demande concrète mais je peux tout de même vous apporter deux précisions qui pourrait vous aider :

1/ Je crois que votre problème est lié, d'une part, à une règle "!important" placée sur tous les font-size de vos titres, celle-ci écrase toutes les tentatives de mises en forme qui suivront :
.boxcontent h1{
    margin:2px 5px 5px 5px;
	text-align:left;
	font-size:14px!important;
	font-weight:bold!important; /* le problème est ici ; il faut, soit la retirer soit, moins risqué, mettre vous aussi une règle !important sur votre modification */
	padding-top:2px;
	padding-bottom:0px;
	font-family: Verdana, Times New Roman, Arial, Serif, Sans-serif;
	color:#f56505;
	border-bottom:2px solid #f56505;
}

Je ne rentrerais pas dans la question de la pertinence ou non de cette règle, ainsi que de ses éventuels inconvénients, vous n'êtes pas trop concerné.

2/ D'autre part, il peut en plus s'agir du "poids" d'une sélection. Vos titres sont par exemple définis comme ceci :
.boxcontent h1{
    /* votre code */
}

Si donc vous faites un changement comme ceci :
h1{
    /* votre code */
}

Votre sélection sera moins "forte" que la précédente et ne sera pas prise en compte même vous placez votre règle après. Si vous ajoutez une règle après coup il vous faut un poids de sélection au moins égal au précédent.
Modifié par Olivier C (09 Mar 2017 - 08:07)
Merci pour ces précisions
En effet j'ai rajouté hier !important après font-size et font-weight et cela fonctionne correctement maintenant, si je l'enlève la mise en page de mes polices ne marche pas.
Je reste vigilant sur cette règle.
Merci encore pour votre intervention.