Bonjour à tous,
Un petit soucis que je n'arrive pas à résoudre.
Voici la page avec le soucis, le .content ne suit pas le bas de l'ombre et crée donc un décalage.
Page: index.html
Le résultat est positif bien entendu, mais le seul problème est que je suis obligé de mettre dans mon css un height: 100px;
Si je retire ce height, le content remonte et laisse aparaitre l'image qui permet d'effectuer l'ombrage du bloc (méthode de wrap).
Donc j'ai essayé différentes choses qui n'ont rien changé.
Quelqu'un connait la solution?
Voici le code de index.html:
Et le css avec le height entre guillemet:
Un petit soucis que je n'arrive pas à résoudre.
Voici la page avec le soucis, le .content ne suit pas le bas de l'ombre et crée donc un décalage.
Page: index.html
Le résultat est positif bien entendu, mais le seul problème est que je suis obligé de mettre dans mon css un height: 100px;
Si je retire ce height, le content remonte et laisse aparaitre l'image qui permet d'effectuer l'ombrage du bloc (méthode de wrap).
Donc j'ai essayé différentes choses qui n'ont rien changé.
Quelqu'un connait la solution?
Voici le code de index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content='text/html; charset="iso-8859-1"' />
<meta name="author" content="Xavier Dubus" />
<title>Libre Annonce</title>
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
</head>
<body>
<div id="page">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="content">
<img src="images/ball.jpg">
<p>Bonjour tout le monde, ceci est une page de test comprenant le code css et xhtml pour mettre en page un cadre ombré!
<br/>
sdfgsdfgsdfgsdfgsdfgsaergaervlkajheraheifvbahelirvfhoiejhaviufva</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Et le css avec le height entre guillemet:
#page {
display: block;
}
#page .wrap1, .wrap2, .wrap3 {
display:inline-table;
}
#page .wrap1 {
float:left;
background:url(images/shadow.gif) right bottom no-repeat;
}
#page .wrap2 {
background:url(images/corner_bl.gif) -3px 100% no-repeat;
}
#page .wrap3 {
padding:0 5px 5px 0;
background:url(images/corner_tr.gif) 100% -3px no-repeat;
}
#page .content {
"height: 100px;"
display: block;
background-color: white;
text-color: black;
border:1px solid #ccc;
border-color:#efefef #ccc #ccc #efefef;
font-size: 10px;
font-family: Verdana, Arial, Times, Serif;
}
#page .content img {
margin-right: 4px;
float: left;
clear: left;
border:1px solid #ccc;
border-color:#efefef #ccc #ccc #efefef;}