28221 sujets

CSS et mise en forme, CSS3

[Résolu] Besoins d'infos sur la syntaxe..

Bonjour à tous..

Voila je fais mes premières armes avec CSS (disons dans le sens noble du terme) et j'aurais besoins qe quelques éclaircissement niveau syntaxe.

jusqu'ici j'utilisais des classes.. mais vraiment super standards, genre pour définir un style de lien.

Et je ne comprend pas 2,3 petites choses.

1) Comment par exemple définir des comportement spécifiques d'une balise <p> pour une classe définit ?

dans le genre le p de header ?

2 ) Quelle est la différence entre les classes et le id ? bon voila des bonnes question de débutant Smiley idee ...

3) les premiers tests de bases que j'ai fais me montrent des résultats relativement différent entre Firefox et IE 6... autre question de nain du CSS : Existe t'il un navigateur témoin absolue... et comment partir sur de bonnes bases pour ne pas se retouver avec une site à la norme et à la rue en même temps ??


merci d'avance....
Modifié le 12 Nov 2004 - 17:36
Si header est un id, tu peux mettre en forme les <p> contenus dans le header comme ceci :
#header p { ... }
Si header est une class, tu peux faire ceci :
.header p { ... }

Pour la différence entre class et id, id doit être unique et designe un élément de la page (unique donc), tandis que class fait de même mais peut définir plusieurs elements, par exemple plusieurs paragraphes d'un certain style, <p class="rubrique">...</p> tu les met en formes grâve à .rubrique et tu peux avoir plusieurs paragraphes avec la class rubrique.
en complément n'oubli pas d'aller voir les tutoriels CSS :
http://www.alsacreations.com/articles/id_class/


Pour ta derniere question, le mieux est de déveloper sur un navigateur conforme aux standards comme Firefox, Mozilla, Opera, Konqueror, ... (perso je préfère firefox, mais c'est question de gouts) et ensuite regarder les dégat sous IE
Modifié le 12 Nov 2004 - 15:58
Administrateur
a écrit :
1) Comment par exemple définir des comportement spécifiques d'une balise <p> pour une classe définit ?

dans le genre le p de header ?

Supposons que tu veuilles définir les paragraphes contenus dans le bloc nommé "header" (ex : <div id="header"><p>toto</p></div>)
Il suffira d'indiquer l'arborescence séparée par un espace :
#header p {color:blue;}

ou :
div#header p {color:blue;}
(si tu veux être complet)

a écrit :
2 ) Quelle est la différence entre les classes et le id ? bon voila des bonnes question de débutant

Là je me permets de te renvoyer sur les tutoriels de base d'Alsa : http://www.alsacreations.com/articles/id_class/

a écrit :
3) les premiers tests de bases que j'ai fais me montrent des résultats relativement différent entre Firefox et IE 6... autre question de nain du CSS : Existe t'il un navigateur témoin absolue... et comment partir sur de bonnes bases pour ne pas se retouver avec une site à la norme et à la rue en même temps ??


Là aussi : http://www.alsacreations.com/articles/compatibilite/
ok... merci pour tes explications ... c'est limpide maintenant. enfin je crois Smiley nuts

Je regarde l'article...

Tu serais ou je peux trouver un tableau récapitulatif de la bonne santé de nos navigateur ?

en fait j'utilse aussi FireFox mais je souhaite générer du code dont le comportement serait presque identique sous mac et pc et donc compatible avec la masse des outils fournis de basse sur ces OS. Donc Safari et IE6..
pardon juste une autre petite question.

j'ai un style #header2

comme çà:

#header2 {
	margin: 0px;
	height: 88px;
	width: 100%;
	background-color:#99CC33;
	background-image:url(images/back_header.gif);
}




<div id="header2">
		<form action="/search.asp" method="post" class="search">
			<label for="recherche">RECHECHE</label>
			<input name="recherche" type="text" size="30" id="recherche" />
			<input type="image" src="images/ok_header.gif" align="absmiddle" alt="Lancer la recherche" />
		</form>
	</div>


Je souhaite donner un style au champs texte, mais je voudrai définir des paramètres propres à tous les champs textes qui serait dans #header2...

sans pour autant me basé sur l'id de cette objet..

c'est possible ?


Donc dois-je faire un truc propre à l'id "recherche"
Modifié le 12 Nov 2004 - 17:31
Tu as un truc génial qui fonctionne partout, sauf bien sûr ... (je te laisse deviner), c'est
#header2 input[ text] { ... } qui mettra en forme tous les input de type text contenu dans div id="header2" (input[ text] sans espace, c'est à cause de la syntaxe BBcode que je l'ai mis)

Mais bon comme je le disais ça deconnera sur le mauvais élève de la classe.

Donc ou tu laisses comme ça, c'est bien sous firefox, opera, ... mais moins sous IE, ou tu met des class="text" (par exemple) pour tes input de type text et tu fait
#header2 input.text { ... }

Voilà, @++
Modifié le 12 Nov 2004 - 17:35
Sujet clos
Aller à