Forums de WDMédia-Hébergement

Bienvenue sur nos forums

Vous n'êtes pas identifié(e).

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

RENAUD Eric
Membre
Lieu : EVREUX (Hte Normandie)
Inscription : 28-03-2007
Messages : 115
Site Web

Demande d'aide aux pros du HTML et CSS

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. colere.gif
D'avance merci


Merci pour votre collaboration.
Bien cordialement
Eric

Hors ligne

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

Michel
Membre
Lieu : Provence
Inscription : 05-04-2007
Messages : 113

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

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 :

<link rel="stylesheet" href="renaud.css">


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)

Hors ligne

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

ManicoW
Administrateur WDMédia-Hébergement
Lieu : Tours
Inscription : 18-01-2007
Messages : 343
Site Web

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

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 smile

Cordialement,


Nicolas Lafont

Hors ligne

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

RENAUD Eric
Membre
Lieu : EVREUX (Hte Normandie)
Inscription : 28-03-2007
Messages : 115
Site Web

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

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


Merci pour votre collaboration.
Bien cordialement
Eric

Hors ligne

Pied de page des forums