Mise en forme avec h1 et h2 et p

Question

fabrice88

2 Mar 2009 à 23:37

bonjour
j'ai u systeme de news que je veu présenter sur mon site et je cherche a faire une petite mise en page tout se qu'il y a de plus classique mais je bug sous firefox.

en gros je voudrais mon titre de news en bleu gras et a coté en noir gras le date du poste de la news.
juste n dessous la news.

j'ai essayé divers méthodes et actuellement j'en suis a un h3 pour le titre, un h4 pour le date et un balise P pour le texte. Probleme tout est décalé.

mon code php :

echo '<h3>' .$data['nom']. '</h3> | <h4>Postée le '.$data['date'].'</h4><br/>

<p>' .substr($data['news'], 0, 200). '...</p>';

et mon css :


h3{
	color:#0066CC;
	font-size:12px; 
	font:bold;
	float:left;
}
h4{
	color:#000000;
	font-size:12px; 
	font:bold;
	float:left;
}
p {
color:#006600;
}

sa parait simple mais je n'ai pas la mise en forme que j'ai cité au dessus.
pouvez vous me dire pour quelle raison j'ai des décalages ?

de plus en intégran ces balises h3 h4 et p ma page n'est plus valide w3c
j'ai ce message pour chaque rencontre de balise

a écrit :
document type does not allow element "h3" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

Modifié par fabrice88 (02 Mar 2009 - 23:40)

Heyoan

3 Mar 2009 à 08:25

Salut,

la première chose est que pour une question de CSS le code PHP ne nous aide pas. Smiley cligne

Pour ce qui est de ta question tu as un pipe | au beau milieu de 2 éléments flottants donc ça ne peut pas fonctionner (en plus des margin par défaut de h3 et h4 : voir ce tuto).

D'ailleurs je ne suis pas convaincu du bien fondé d'un titre sur la date...

Pour le warning cela signifie que tu as placé le tout dans un conteneur qui n'est pas de type bloc (comme un DIV par exemple) mais 'en-ligne' (comme un SPAN par exemple).

Tu pourrais faire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Test Echap</title>
<style type="text/css">
#news {
	width: 400px;
	font-size: 1em;
	font-weight: bold;
}

h3 {
	color:#0066CC;
	float:left;
	margin: 0 .3em;
}

em {
	color:#000;
	padding: 0 .2em;
}

p {
	color:#006600;
}
</style>
</head>
<body>
<div id="news">
<h3>Titre de la news</h3>
| <em>Postée le 03/03/2009</em>
<p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari...</p>
</div>
</body>
</html>

Modifié par Heyoan (03 Mar 2009 - 08:29)

Sujet clos

CSS et mise en forme, CSS3

Mise en forme avec h1 et h2 et p