Utiliser une classe CSS sans l'attribuer à une balise HTML

islogged · 19/07/2011, 04h29

Bonjour !

Juste 1 questions :

Comment attribuer une classe Css .blabla a un objet sans le mettre dans des balises Html ?

merci d'avance !

12monkeys · 19/07/2011, 09h41

Bonjour

Impossible à ma connaissance. Si tu ne spécifie pas la classe dans ton HTML, le CSS va s'appliquer à rien...

Mais c'est quoi le but exactement.

Atomya Rise · 19/07/2011, 11h11

Je rejoins l'avis de 12monkeys

au pire des cas, tu peux affecter un css à une balise pour la globalité des même balises sans définir de class css.

exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

td { background-color: #cdcdcd; }

Ainsi, toutes tes balises td auront un fond de couleur grise...

Sinon, je pose la même question que 12monkeys... Mais c'est quoi le but exactement ?

islogged · 20/07/2011, 01h09

Salut, merci pour vos réponses.

Je constate donc que ce n'est pas possible.

Citation:

Mais c'est quoi le but exactement ?

Ben peut-être que je ne sais pas coder correctement mais ct pour éviter des balises inutiles.

Par ex : <font> inutile à la base mais obligatoire pour y mettre class='align'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
	<head>
		<style type='text/css'>
			.align															/* Aligner les formulaires a 150px du bord */
			{
				display:block;
				width:150px;
				float:left;
			}
		</style>
 
		<title>Datas Input</title>	
	</head>
 
	<body>
		<form action='process.php' method='post'>
			<font class='align'>Nom :</font><div><input type='text' name='nom' style='width:100px'/></div>
			<font class='align'>Prenom :</font><div><input type='text' name='prenom' style='width:100px'/></div>
			<input type='submit' value='> Envoyer <'>
		</form>
	</body>
</html>

Atomya Rise · 20/07/2011, 10h06

Si tu ne veux vraiment pas utiliser ta class align tu peux toujours faire le bourrin, et l'écrire en brut, mais c'est pas très propres...
je te conseille de garder les class qui sont tout de même plus générique.

<FONT STYLE="display:block; width:150px; float:left;"> </FONT> .

Par contre, pour ce que tu veux faire, tu n'est pas obligé d'utiliser une balise font, tu ne pouvais pas utiliser une simple balise div ou span, ou encore, un super tableau

?

12monkeys · 20/07/2011, 10h15

Tu peux clairement simplifier :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form action='process.php' method='post'>
	<p>Nom : <input type='text' name='nom' style='width:100px'/></p>
	<p>Prenom : <input type='text' name='prenom' style='width:100px'/></p>
	<p><input type='submit' value='> Envoyer <'></p>
</form>

Tu appliques ton style à form p donc même pas besoin de classe... Et pour décaler d'une manière différente l'input (car je supposes que c'est ce que tu veux faire) tu appliques un autre style à form p input.

Si tu as plusieurs formulaires avec des styles différentes : form#nom-id-a-ta-guise p.

Pour t'inspirer tu as : http://a-pellegrini.developpez.com/t...ss/formulaire/ et http://j-willette.developpez.com/tut...ss/formulaire/

islogged · 20/07/2011, 15h39

Citation:

Par contre, pour ce que tu veux faire, tu n'est pas obligé d'utiliser une balise font, tu ne pouvais pas utiliser une simple balise div ou span, ou encore, un super tableau ?

Ouai, sauf que quand j'avais mis un <div> ca me sauter a la ligne, et <span> j'avais un autre pb (je sais plus koi) !

Alors curieusement aujourd'hui <div> et <span> fonctionne bien, pas de saut de ligne, rien. Zarb !!!
Je ne sais pas si je suis le seul a être confronté à ce genre de situation ?

@12monkeys
Merci, mais en quoi ta solution est plus simple (déclaration de 2 styles au lieu d'1 class)

12monkeys · 20/07/2011, 16h00

Déjà le code HTML est plus propre, plus court. Il n'y a pas une multitude de balises font

, div et input (y compris si tu remplaces font par autre chose)

Pourquoi ça nous horripile l'utilisation de la balise font : parce qu'elle est obsolète, qu'elle ne devrait plus être utilisée. Que la stylisation des éléments devrait être mise dans le fichier CSS.

L'exemple que je t'ai donné est pour positionner l'input différemment du texte qui se trouve avant, c'est pas ce que tu voulais faire ? Dans ce cas ton code est encore beaucoup plus compliqué que nécessaire : pourquoi mettre font pour le texte ? il aurait suffit de mettre le texte dans le div et ajouter la classe sur ce div : on retombe sur mon code...

Bref sans savoir exactement ce que tu veux faire, on ne peut que te donner des réponses approximatives...

Le comportement du div est normal : c'est un élément de type block donc c'est un élément qui force le retour à la ligne. Si tu ne veux pas de retour à la ligne, il faut utiliser un élément en ligne comme span, em, strong...

Atomya Rise · 20/07/2011, 18h55

Entièrement d'accord avec 12monkeys !

Citation:

Envoyé par islogged

@12monkeys
Merci, mais en quoi ta solution est plus simple (déclaration de 2 styles au lieu d'1 class)

Moi, j'ai plus l'impression que islogged cherche simplement à éviter de faire trop de ligne (ou travail)... Mais il faut savoir que tout ne tombe pas comme par magie, il faut savoir se creuser la tête et affronter les ligne pour obtenir quelque chose de correct et d'actualité !

Je préfère largement voir un code comme 12monkeys à proposé avant qui pour moi à beaucoup plus de sens et de grâce, que celui de islogged qui est vraiment très moche et sans queue ni tête... On se demande bien comment la balise <font> à atterrie ici... Et très sincèrement, quand j'ai vu ton code, je me suis même demandé si cela se faisait ! Car une balise <font> sert pour une taille, une face ou encore un taille d'écriture, mais en aucun cas pour l'utiliser comme une div ^^
L'utilisation d'un tableau aurait nettement été meilleur que ta solution actuelle

Citation:

Envoyé par islogged

Alors curieusement aujourd'hui <div> et <span> fonctionne bien, pas de saut de ligne, rien. Zarb !!!
Je ne sais pas si je suis le seul a être confronté à ce genre de situation ?

Non, tu n'es pas le seul à avoir ce genre de soucis, bien au contraire ^^ C'est pour ceci qu'il y a les feuilles de style

Si tu aurais cherché un peu, tu aurai vite compris comment positionner 2 div l'une à côté de l'autre !

Un petit exemple rapide et grossier

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="header"> <!-- Div début header -->
		<div id="header-l"></div> <!-- Image gauche -->
		<div id="header-r"></div> <!-- Image droite -->
		<div id="header-m"></div> <!-- Image milieu -->
	</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
/* Header */
#header 	{ width: 100%; height: 205px; background: url(../images/fond-header.png); background-position: center top; background-repeat: no-repeat; }
#header-l	{ float: left; width: 35px; height: 205px; background-image: url(../images/header-l.png); }
#header-m 	{ height: 205px; background-image: url(../images/header-m.png); background-repeat: repeat-x; background-position: top; margin-left: 35px; margin-right: 35px; }
#header-r 	{ float: right; width: 35px; height: 205px; background-image: url(../images/header-r.png); }

Candygirl · 20/07/2011, 21h23

Hello,

Tu peux utiliser l'élément label tout à fait indiqué dans ton contexte.

19/07/2011, 04h29	#1
islogged Invité régulier Inscription : mai 2008 Messages : 102 Détails du profil Informations forums : Inscription : mai 2008 Messages : 102 Points : 8 Points : 8	Utiliser une classe CSS sans l'attribuer à une balise HTML Bonjour ! Juste 1 questions : Comment attribuer une classe Css .blabla a un objet sans le mettre dans des balises Html ? merci d'avance !
	00

19/07/2011, 09h41	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Impossible à ma connaissance. Si tu ne spécifie pas la classe dans ton HTML, le CSS va s'appliquer à rien... Mais c'est quoi le but exactement. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

19/07/2011, 11h11	#3
Atomya Rise Membre Expert Emilie Lefol En recherche d'emploi Inscription : février 2009 Messages : 411 Détails du profil Informations personnelles : Nom : Emilie Lefol Âge : 26 Localisation : France, Somme (Picardie) Informations professionnelles : Activité : En recherche d'emploi Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2009 Messages : 411 Points : 1 277 Points : 1 277	Je rejoins l'avis de 12monkeys au pire des cas, tu peux affecter un css à une balise pour la globalité des même balises sans définir de class css. exemple : Code css : Sélectionner tout - Visualiser dans une fenêtre à part td { background-color: #cdcdcd; } Ainsi, toutes tes balises td auront un fond de couleur grise... Sinon, je pose la même question que 12monkeys... Mais c'est quoi le but exactement ? __________________ *Si un message vous a aidé, pensez à voter positivement pour lui ! Merci* Pas de question technique en privé - Si on criait sur la place publique les fautes de tout le monde, on ne pourrait plus fréquenter personne ! (Marcel Pagnol) - Technocrates, c’est les mecs que, quand tu leur poses une question, une fois qu’ils ont fini de répondre, tu comprends plus la question que t’as posée. (Coluche)
	00

20/07/2011, 10h06	#5
Atomya Rise Membre Expert Emilie Lefol En recherche d'emploi Inscription : février 2009 Messages : 411 Détails du profil Informations personnelles : Nom : Emilie Lefol Âge : 26 Localisation : France, Somme (Picardie) Informations professionnelles : Activité : En recherche d'emploi Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2009 Messages : 411 Points : 1 277 Points : 1 277	Si tu ne veux vraiment pas utiliser ta class align tu peux toujours faire le bourrin, et l'écrire en brut, mais c'est pas très propres... je te conseille de garder les class qui sont tout de même plus générique. <FONT STYLE="display:block; width:150px; float:left;"> </FONT> . Par contre, pour ce que tu veux faire, tu n'est pas obligé d'utiliser une balise font, tu ne pouvais pas utiliser une simple balise div ou span, ou encore, un super tableau ? __________________ *Si un message vous a aidé, pensez à voter positivement pour lui ! Merci* Pas de question technique en privé - Si on criait sur la place publique les fautes de tout le monde, on ne pourrait plus fréquenter personne ! (Marcel Pagnol) - Technocrates, c’est les mecs que, quand tu leur poses une question, une fois qu’ils ont fini de répondre, tu comprends plus la question que t’as posée. (Coluche)
	00

20/07/2011, 16h00	#8
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Déjà le code HTML est plus propre, plus court. Il n'y a pas une multitude de balises font , div et input (y compris si tu remplaces font par autre chose) Pourquoi ça nous horripile l'utilisation de la balise font : parce qu'elle est obsolète, qu'elle ne devrait plus être utilisée. Que la stylisation des éléments devrait être mise dans le fichier CSS. L'exemple que je t'ai donné est pour positionner l'input différemment du texte qui se trouve avant, c'est pas ce que tu voulais faire ? Dans ce cas ton code est encore beaucoup plus compliqué que nécessaire : pourquoi mettre font pour le texte ? il aurait suffit de mettre le texte dans le div et ajouter la classe sur ce div : on retombe sur mon code... Bref sans savoir exactement ce que tu veux faire, on ne peut que te donner des réponses approximatives... Le comportement du div est normal : c'est un élément de type block donc c'est un élément qui force le retour à la ligne. Si tu ne veux pas de retour à la ligne, il faut utiliser un élément en ligne comme span, em, strong... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

20/07/2011, 21h23	#10
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	Hello, Tu peux utiliser l'élément label tout à fait indiqué dans ton contexte. __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	40

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email