28216 sujets

CSS et mise en forme, CSS3

Bonjour!

J'ai fait le tour du forum dans la recherche pour trouver cette information mais je ne l'ai trouvé nul part. J'imagine que c'est peut-être même trop ridicule pour le poser en question mais je le demande tout de même Smiley smile

J'aimerais utiliser la balise <p> afin d'écrire du texte. Cependant, mon texte est découpé ainsi:

-Ligne en format 14pt bleu
-Ligne en format 12pt noir gras
-Ligne en format 12pt régulière

Donc je me suis créer 3 classes pour ceci et j'aimerais bien faire quelque chose dans le genre:

<p class="bleu14">blablabla</p>
<p class="noirgras">blablabla</p>
<p class="noir">blablabla</p>


Cependant, ceci fait un espace entre chacun de mes P... Avez vous une technique pour enlever cet espace gênant? Ou peut-être même que j'utilise une mauvaise technique pour réaliser ce que je veux.

Si vous avez un bon tutoriel aussi qui répond à mes questions, n'hésitez pas à me donner le lien
Merci beaucoup!
Modifié par Jaff (08 Sep 2005 - 18:02)
J'ai l'impression que tu souhaite afficher une liste ?


Si non pour supprimer les espace ben



p {
margin:0;padding:0;
}
Non c'est pas une liste et j'ai essayé ton affaire et ca ne fonctionne pas! Smiley smile
Voici la page en question
http://www.reseauaga.com/nouveau/equipe.html

Les lignes en question concernent chacun des employés...

Une suggestion? Comme tu peux le voir le nom de l'employé saut une ligne... Et j'ai été oubligé d'utilisé un <b> pour faire en gras au lieu d'une classe.
J'attend vos idées Smiley smile
Merci beaucoup
Administrateur
Bonjour,

le nom de chaque intervenant est une div avec un id equipe.
Un id est par définition unique, il ne doit apparaitre qu'une (ou zéro Smiley smile ) fois par page.
EDIT: le nom de chaque intervenant étant un sous-titre, pourquoi ne pas utiliser les balises heading? h1 à h6 sont là pour ça, il n'y a actuellement qu'une balise <h3>. D'ailleurs pourquoi commencer par h3 et pas h1? Le titre le plus important doit être h1 puis h2, etc. Pour lui donner la même (petite) taille qu'un <h3> (par défaut sans mise en page), il y a les CSS Smiley cligne Mais sémantiquement, c'est bien la suite h1, h2, ... Voir par exemple le billet de Raphaël à ce sujet: Le point sur la sémantique

La structure de la page me parait extrêmement découpée et la déclaration CSS tout autant (elle en découle), même une fois enlevé ce qui ne concerne que les graphismes de présentation (url();).

Rapide solution:
Si
#equipe p { }

devient
#equipe p {
margin: 0; padding: 0;
}
p {
margin: 0; padding: 0;
}

tout est bien tassé.

Mais ça n'explique pas pourquoi il faut re-fixer margin et padding à 0 pour l'élément p ...
Je te conseille d'aborde de corriger et valider le code XHTML Smiley cligne
Modifié par Felipe (08 Sep 2005 - 04:47)
Administrateur
Felipe a écrit :
Voir par exemple le billet de Raphaël à ce sujet:

C'est un billet d'Olivier Smiley smile
Bonjour.

J'ai relevé des problèmes de structure auquels je tente de répondre de la mannière suivante :

<!-- Ce div va encapsuler les fiches -->
<div id= "equipe">

<!-- une fiche -->
<div>
<h3>Alfred WALLACE</h3>
<h4>B.Ed. Art Dramatique / DEC Cinéma - " Gougoune "</h4>
<p>Consultant Junior, Spécialiste en Théâtre, Animation de groupes et Créativité</p>
<span> Courriel : </span>
<a>href="alfredWalace@reseau.com">alfredWalace@reseau.com</a>
</div>

<!-- une autre fiche -->
<div>
<h3>Alfred WALLACE</h3>
<h4>B.Ed. Art Dramatique / DEC Cinéma - " Gougoune "</h4>
<p>Consultant Junior, Spécialiste en Théâtre, Animation de groupes et Créativité</p>
<span> Courriel : </span>
<a>href="alfredWalace@reseau.com">alfredWalace@reseau.com</a>
</div>

</div> <!-- fermeture du div "equipe"  -->


NOTE : je ne suis pas sémanticien.
Donc, il y a nécessairement mieux. Néanmoins, le principe est correct.

De cette manière, on identifie une seule fois "equipe" et on différencie les informations avec une sémantique (appropriée, si possible). Mais les balises n'ont ni CLASS ni ID.

De sorte, le fragment de CSS peut se présenter comme suit:

#equipe div {
text-align: left;
border:2pt solid black
}

#equipe  h3,#equipe div h4,#equipe div p{margin:0}
#equipe  h3{color:#1D7777;text-align:left;font-size: 13pt;}
#equipe  h4{text-align:left;font-size: 10pt;}
#equipe  a{font-size: 10pt} 

Modifié par GeorgesM (08 Sep 2005 - 10:27)
Merci beaucoup!
Vos réponses m'ont beaucoup aidé!
Je vais mettre un résolu sur ce billet!
(si je trouve comment!)

Bonne journée!
Jaff