[résolu] Probleme de class H1

bonsoir,

j'ai paramétré pour tout mon site la balise H1 ainsi :

h1{
	font-size: 18px;
	color: #333333;
	text-decoration: none;
	margin-bottom:10px;
	margin-top:20px;
	margin-left:30px;
	background-image: url(images/flechetitre.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:25px;
	}	
	

j'aimerais appliquer sur une image la balise H1 mais je ne voudrais pas que cette propriété précédement cité ne s'appliquer pas, surtout l'image.

j'ai donc placé mon image ainsi :

<div id="labi"><img src="labos/big/image2.jpg" alt="titre de l'image" border="0"/></div>

avec la propriété css ainsi :

#labi h1{
padding : 10px;
}

cependent cette css ne s'applique pas apparement ... car l'image s'affiche tout de même.

une idée ?

Merci de votre aide.
Modifié par mims1664 (15 Oct 2008 - 13:44)

mims1664 a écrit :
j'aimerais appliquer sur une image la balise H1 mais je ne voudrais pas que cette propriété précédement cité ne s'appliquer pas, surtout l'image.

Humm... désolé, cette phrase n'est pas compréhensible.

ok lol il y a un 'pas' en trop !

ce qui donne :

j'aimerais appliquer sur une image la balise H1 mais je ne voudrais pas que cette propriété précédement cité ne s'appliquer, surtout l'image.

j'espère être clair....

mims1664 a écrit :
ok lol il y a un 'pas' en trop !

Ça et de nombreuses autres choses.

a écrit :
appliquer sur une image la balise H1

H1 n'est pas une balise mais un élément (les balises correspondantes sont <h1> et </h1>). Une balise ou un élément ne s'«appliquent» pas sur un contenu (une image, ici). Une image de contenu (par opposition à une image de décoration) sera placée dans la page avec l'élément HTML IMG (balise <img />). Cet élément peut être placé à l'intérieur d'un titre de niveau 1 (élément H1), si l'image correspond effectivement à un titre. Auquel cas, on décrira plutôt la situation dans l'autre sens: j'aimerais placer une image dans mon titre H1, mais...

a écrit :
mais je ne voudrais pas que cette propriété précédement cité

Ce qui est précédemment cité, c'est un bloc de déclarations CSS, composé d'un sélecteur, et de déclarations (couples propriété/valeur(s)). On parle plus couramment de «styles» pour tel ou tel élément (ou type d'élément). Si j'ai bien compris, tu veux placer une image comme contenu d'un élément H1, mais tu ne souhaites pas que les styles déjà définis pour les H1 ne s'appliquent (et pas «ne s'appliquer»).

Cela fait donc deux utilisations différentes de l'élément H1. Si tu penses que les deux sont pertinents, et que tu veux des styles spécifiques à la première utilisation, tu devrais sans doute jouer sur:
- les classes ou les identifiants;
- le «contexte» (quels sont les parent et ancêtres des divers H1, et est-ce qu'on peut en déduire une logique du genre «les H1 dans l'en-tête on tel style, et ceux dans le contenu ont tel autre style»?).

a écrit :
surtout l'image

Parles-tu de l'image de fond (propriété CSS background-image) qui fait partie des styles pour tes éléments H1?

avant de commencer une remarque : j'aurais sans doute du placer mon topic dans la section débutant.

donc je vais essayer de reformuler correctement et plus précisément ma recherche

Je désire appliquer sur une image la balise H1 mais je ne voudrais pas que les propriétés définies sur la balise H1 globale ne s'applique cette fois ci.

a écrit :
Parles-tu de l'image de fond (propriété CSS background-image) qui fait partie des styles pour tes éléments H1?

Oui

J'ai l'impression de parler le patois... désolé si mon language n'est pas CSS valide

Ta dernière formulation ne me semble pas en patois, ni d'ailleurs la réponse détaillée de Florent.
Ton problème est que l'élément image hérite du style de son parent (l'élément h1). Je pense qu'une solution serait d'affecter une classe aux éléments h1 contenant une image.

<h1 class="image"><img src="labos/big/image2.jpg" alt="titre de l'image" /></h1>

et de (re)définir pour cette classe (toutes) les propriétés que tu souhaites

h1.image {
...
padding : 10px;
...
}

Modifié par Merlin (14 Oct 2008 - 23:20)

c'est une chose que j'ai essayer hier soir ! mais qui n'a pas fonctionné d'ou ce message sur le forum.
Pr contre je crois que j'avais un problème de cache car en testant (apres avoir vidé le cache de mon navigateur ) le résultat est bon.

Merci de m'avoir permis de valider cette solutions.

bonne journée a vous deux.

Hello mims1664,

Si tu considères ce sujet comme [résolu] merci de l'indiquer dans le titre de ton sujet, en éditant ton premier message

A noter en passant qu'il peut s'avérer interessant de spécifier les dimensions de l'image dans le code html, le navigateur connait ainsi par avance la taille de l'image sans avoir à la charger au préalable (celle-ci peut d'ailleurs être indisponible), il peut alors disposer correctement les éléments dans la page à leur bonne place.

Cdt,
Sylvain

ok merci du conseil je vais l'appliquer sur toutes les images auxquelles je n'applique pas la taille.

Merci