Mise en forme de texte

**Knacki** · 06/11/2011, 11h18

Bonjour à tous.
Je développe actuellement un petit site internet pour un amis. Rien de bien méchant mais je rencontre un petit soucis que je n'arrive pas a résoudre.
J'ai bien cherché quelques info sur le net, mais je trouve pas mon bonheur.

Alors mon soucis est le suivant:

j'ai un bloc de type <p></p> dans lequel se trouve une balise <h3></h3> le tout dans un bloc div

Ce qui nous donne :

Code html :

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

1
2
3
4
5
6
<div id="corp">
  <p>
      <h3>Un titre</h3>
      Le reste de mon paragraphe.
  </p>
</div>

J'ai ensuite une feuille de style dans laquelle j'applique la mise en forme suivante :

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
23
 
#corp
{
	top : 120px;
	height : auto;
	min-height : 780px;
	padding-right : 8px;
	padding-left : 215px;
	background-image: url("img/corp.jpg");
	border-top : 1px solid black;
	border-bottom : 1px solid black;
}
 
p
{
	font-family: Helvetica, Verdana;
 
}
 
h3
{
	font-family : "Bodoni MT";
}

Et alors le soucis c'est que la font que je souhaite appliquer sur le contenu de la balise <p> ne s'applique pas, alors que la mise en forme pour le corp et pour la balise <h3> s'applique sans soucis.

J'ai remarqué que si j'enlève mon titre h3 de mon paragraphe alors la font s'applique.

Y aurait-il une règle de priorité ou autre que je n'aurais pas respecté ?

Je suis plutôt novice en dev web, donc désolé si m'a question parait bête!

Merci d'avance pour toutes vos réponses.

**franck31** · 06/11/2011, 11h42

Remplace déjà ça:

Code :

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

<div i="corp">

par

Code :

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

<div id="corp">

ensuite en faisant:

Code :

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

1
2
3
4
5
6
7
8
 
#corp p{
	font-family: Helvetica, Verdana;
}
#corp h3
{
font-family : "Bodoni MT";
}

ça devrait être bon

**Knacki** · 06/11/2011, 12h17

Remplace déjà ça:

par

Ah oui, dsl j'ai fait une faute de frappe en écrivant mon post tout a l'heure. Je corrige ça.

J'ai fait la modif que tu propose franck31, mais malheureusement ça n'a rien changé à mon problème.

J'ai essayé une autre chose, j'ai ajouté du texte dans mon paragraphe avant mon titre <h3>. Et la Ô surprise, le texte est bien mit en forme avant le titre <h3>, le titre <h3> est bien mis en forme, mais pour le texte après mon titre rien...
Je trouve ça très curieux.

J'ai fais le test une nouvelle page pour être sur que le problème ne venait pas du reste du code écrit dans mon .html

Voici le code de ma page index.html de test :

Code html :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" >
    <head>
      <title>Bienvenue sur mon site !</title>
		<META http-equiv="Content-Type" CONTENT="text/html;charset=iso-8859-1">
		<LINK rel="stylesheet" media="screen" type="text/css" title="mise en page" href="pres.css">
	</head>
	<body>
	<p>
		texte avant mon paragraphe
		<h3>Titre3</h3>
		reste de mon paragraphe
	</p>
	</body>
</html>

et voici le code de ma page pres.css de test :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
p
{
	color : red;
}
 
h3 
{
	color : blue;
}

Chez moi le texte situé après le titre est en noir et pas en rouge comme il le devrait.

Je fait mes tests sous wamp server 2.1 pour info.

**franck31** · 06/11/2011, 13h04

En effet, c'est normal car une balise p ne peut contenir de balise bloc donc tu dois mettre tes balises h3 en dehors d'une balise p.

**Knacki** · 06/11/2011, 13h15

D'accord, tout s'explique!!

Je vais remplacer l'utilisation balise type <h3> par des <span> avec le CSS qui va bien.

Merci pour ton aide franck31. Je te souhaite une bonne fin de weekend !

Mise en forme de texte

CSS

Vue hybride

Discussions similaires

Partager

Partager