28173 sujets

CSS et mise en forme, CSS3

Espace horizontal pour un cadre

Bonjour,

j'ai un espace horizontal incompréhensible lorsque je mets en place un cadre de cette manière :

<!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">
<head>
<title>test cadre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style>
div.info {
	width: 522px;
	margin: 0 auto;
}
p.texte {
	background:url(images/cadre-milieu.gif) repeat-y;
	margin: 0px;
	padding: 0 50px;
	text-align: center;
}
</style>
</head>
<body bgcolor="#cccccc">

<div class="info">

<img src="images/cadre-haut.gif" alt="" />
<p class="texte">On ne présente plus OpenOffice.org, la suite bureautique libre et  gratuite issue de StarOffice (anciennement gratuit puis racheté par  Sun). En quelques années, OOo a su s'imposer comme l'alternative la  plus crédible à Microsoft Office.</p>
<img src="images/cadre-bas.gif" alt="" />

</div>

</body>
</html>


VISUEL

Quelqu'un pourrait-il m'expliquer d'où provient ce souci ?
Merci d'avance...

@+ Smiley murf
Modifié par Tchupacabra (02 Apr 2007 - 14:44)
Salut, tu peux régler ce soucis en appliquant la règle 
vertical-align: bottom;
à l'image.

En passant, je n'aurais pas opté pour une image en dur dans le code HTML pour réaliser un cadre comme celui-là. J'aurais plutôt placé une image en arrière-plan du premier paragraphe dans div.info ...
Merci Thomas D. ! Smiley biggrin 

<!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">
<head>
<title>test cadre</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style>
* {
	margin: 0;
	padding: 0;
}
div.info {
	width: 522px;
	margin: 0 auto;
}
p.cadre-haut {
	background:url(images/cadre-haut.gif) no-repeat;
	height: 34px;
}
p.cadre-milieu {
	background:url(images/cadre-milieu.gif) repeat-y;
	margin: 0px;
	padding: 0 50px;
	text-align: center;
}
p.cadre-bas {
	background:url(images/cadre-bas.gif) no-repeat;
	height: 45px;
}
</style>
</head>
<body bgcolor="#cccccc">

<div class="info">

<p class="cadre-haut">&nbsp;</p>
<p class="cadre-milieu">On ne présente plus OpenOffice.org, la suite bureautique libre et  gratuite issue de StarOffice (anciennement gratuit puis racheté par  Sun). En quelques années, OOo a su s'imposer comme l'alternative la  plus crédible à Microsoft Office.</p>
<p class="cadre-bas">&nbsp;</p>

</div>

</body>
</html>

Comme ça ? Perso, j'aime pas trop les balises "vides"... Smiley ohwell
Non, plutôt comme ça : 
<div class="info">
  <p class="first">On ne présente plus OpenOffice ... </p>
  <p>Bla bla bla</p>
</div>

[b]CSS[/b]
div.info {
   /* Une image pour l'arrondi en bas et les ombres sur le côté */
   background: #fff url(image-bas.png) center bottom; 
}
div.info .first {
   /* L'image pour l'arrondi en haut */
   background: url(image-haut.png) center top;
}
Sujet clos
Aller à