Demande d'aide aux pros du HTML et CSS

RENAUD Eric · 09-04-2007 16:28:15

Bonjour,

Je m'initie aux feuilles de style.
J'ai un style simple qui représente une bande horizontale sur la largeur de la page (du style celles de l'Aide concernant le forum).
Dans ma feuille de style :

.Lebloc {
  border: ;
  background-color: #FF9999
}

Quand je fais un Preview de ma feuille CSS c'est bon, je vois la bande horizontale.
Maintenant je veux dans une page Html, utiliser cette CLASS et mettre du texte à l'intérieur.

J'ai déclaré ma feuille de style dans mon fichier Html et dans le Body j'ai mis :

 <SPAN CLASS=Bloc> La classe Bloc</SPAN>

Hélas ça ne fonctionne pas.
D'avance merci

Michel · 09-04-2007 18:53:39

Il y a peut être d'autres méthodes, mais celle la marche.

1) un exemple avec position ; enregistré sous renaud.css :

.lebloc {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; MARGIN: 0px; PADDING-TOP: 6px; BACKGROUND-COLOR: #ffdddd
}

2) dans le head de la feuille html :

3) dans le Body de cette même feuille :

<P class=lebloc>Renaud test</P>

Le 2 indique l'appel à la feuille de style.
Le 3 permet de définir le nom de la rubrique du style à appliquer pour "Renaud test", par exemple, comme ici "lebloc".

Dernière modification par Michel (09-04-2007 19:34:46)

ManicoW · 09-04-2007 19:54:23

Bonjour,

En fait le problème que tu mentionne Eric est lié au type de conteneur (les balises html). En l'occurence, par defaut, la balise span n'est pas un élément de type bloc.

En gros, il existe deux type de conteneur, les conteneur de type bloc et les conteneur de type in-line.

Un conteneur de type bloc provoquera systématiquement un retour a la ligne a sa fin, des marges, etc... Typiquement, des conteneur de bloc :
p, div, h1, h2, ...

Un conteneur de type in-line quant a lui est intégré dans le texte. Pas de retour ligne a sa fin, par de marge par defaut. Exemple de conteneur de type in-line :

span, b, i, u, ...

Il est néanmoins possible de transformer un conteneur de type bloc en in-line et inversement. Ceci ce fait via la directive css "display".

Par exemple, dans la feuille de style un

display: block;

Fait que le conteneur désigné (celui auquel on applique le class donc) se comporte comme un bloc.

Dans le meme style, il existe display: in-line (avec ou sans - , je ne sais plus).

Histoire de jouer, il existe aussi un display:none qui permet de ne pas afficher le bloc. Cela peut etre utilisé soit en coordination avec javascript pour cacher puis afficher un morceau de page (réduction d'arbre par exemple) sans recharger la page, ou bien pour des question d'accessibilité. Sur le site wdmedia-hebergement par exemple, nous avons fait les titres dans des balises h2 dans lesquelles nous avons mis un conteneur span. Le style de la page défini pour le h1 une image de fond, qui forme le titre visuellement, mais également un display: none afin de cacher le texte du span, qui serai moche sinon. L'interet c'est qu'en cas de non utilisation de la css (moteur de recherche, logiciel de lecture pour aveugle) l'image n'apparait pas mais le texte est présent.

Bon courage, les CSS c'est beaucoup de tatonnement et d'essai avant d'arriver a faire ce que l'on veut

Cordialement,

RENAUD Eric · 09-04-2007 21:20:24

Bonsoir,
Merci à tous
Je vais continuer à étudier ces feuilles de styles.

Forums de WDMédia-Hébergement

#1 09-04-2007 16:28:15

Demande d'aide aux pros du HTML et CSS

#2 09-04-2007 18:53:39

Re : Demande d'aide aux pros du HTML et CSS

#3 09-04-2007 19:54:23

Re : Demande d'aide aux pros du HTML et CSS

#4 09-04-2007 21:20:24

Re : Demande d'aide aux pros du HTML et CSS

Pied de page des forums