- J'ai une page qui contient du texte et d'autres éléments dans un div "conteneur".
- Je veux avoir dans ce bloc une image avec un cadre autour (padding), un texte de commentaire et une légende en bas.
- Il faut que le commentaire au-dessus de l'image prenne sa largeur.
- Il faut que la légende soit dans le cadre et alignée à droite de l'image.
- La largeur des images est variable, donc je ne définit pas la largeur du bloc.
En gros, peut-on définir la taille d'un div en fonction de son contenu? (La réponse est NON, je parie).
Alors, comment faire? Faut-il placer les div différemment? Utiliser un Float?
Vous trouverez deux images au bas du post:
- L'état actuel
- L'état souhaité (j'ai triché en fixant la largeur du bloc)
Merci pour votre aide.
Voici le code complet de ma page HTML:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>finistereproduction - présentation</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<meta name="Description" content="Philippe Dudouit, photographer presents a selection of pictures he made.>
<meta name="Keywords" content="Philippe, Dudouit, photographer, photography, photos, reportage, UCK, Macedonia">
<meta name="Author" content="Antonio Marmolejo">
<meta name="Reply-to" content="xxx@xxx.xx">
<meta name="Identifier-URL" content="http://www.stills.ch">
<meta name="Copyright" content="Philippe Dudouit / Antonio Marmolejo">
<meta name="Revisit-after" content="10 days">
<meta name="Robots" content="index,follow">
</head>
<body>
<div id="conteneur">
<div id="header">
</div>
<div id="menu">
<div id="logo">
MON LOGO
</div>
<ul id="menuTexte">
<li><a href="#" target="_blank">menu 1</a></li>
<li><a href="#" target="_blank">menu 2</a></li>
<li><a href="#" target="_blank">menu 3</a></li>
</ul>
</div>
<div id="contenu">
<p class="alerte">This site is being rebuilt. The new content will soon be availiable.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="blocImage">
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="photos/duodos.jpg" alt="UCK Fighters Macedonia 2001">
<p class="legende">UCK Fighters Macedonia 2001</p>
<p class="legende">UCK Fighters Macedonia 2001</p>
</div> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="pied">
<? include("footer.php"); ?>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>finistereproduction - présentation</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<meta name="Description" content="Philippe Dudouit, photographer presents a selection of pictures he made.>
<meta name="Keywords" content="Philippe, Dudouit, photographer, photography, photos, reportage, UCK, Macedonia">
<meta name="Author" content="Antonio Marmolejo">
<meta name="Reply-to" content="xxx@xxx.xx">
<meta name="Identifier-URL" content="http://www.stills.ch">
<meta name="Copyright" content="Philippe Dudouit / Antonio Marmolejo">
<meta name="Revisit-after" content="10 days">
<meta name="Robots" content="index,follow">
</head>
<body>
<div id="conteneur">
<div id="header">
</div>
<div id="menu">
<div id="logo">
MON LOGO
</div>
<ul id="menuTexte">
<li><a href="#" target="_blank">menu 1</a></li>
<li><a href="#" target="_blank">menu 2</a></li>
<li><a href="#" target="_blank">menu 3</a></li>
</ul>
</div>
<div id="contenu">
<p class="alerte">This site is being rebuilt. The new content will soon be availiable.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="blocImage">
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="photos/duodos.jpg" alt="UCK Fighters Macedonia 2001">
<p class="legende">UCK Fighters Macedonia 2001</p>
<p class="legende">UCK Fighters Macedonia 2001</p>
</div> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="pied">
<? include("footer.php"); ?>
</div>
</div>
</body>
</html>
et le CSS:
Code
html,body {
margin: 0px;
padding: 0px;
background-color: #000000;
}
#conteneur {
margin: 0px;
padding: 0px;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 17px;
}
#header {
margin: 0;
height: 10px;
padding: 0;
background-color: #330000;
}
#menu {
height: 30px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0;
background-color: #002000;
}
#logo {
float: left;
display: inline;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
width: 200px;
height: 30px;
padding: 0px;
border-style: dashed;
border-width: 1px;
border-color: #999999;
}
#menuTexte {
list-style-type: none;
margin: 0px;
height: 30px;
line-height: 30px;
border-style: dashed;
border-width: 1px;
border-color: #999999;
}
#menuTexte li {
display: inline;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding:0px;
line-height: 30px;
vertical-align:middle;
}
#menuTexte a {
color: #AAAA00;
text-decoration: none;
font-weight: 700;
}
#menuTexte a:hover {
color: #FFFFFF;
}
#contenu {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
border-style: dashed;
border-width: 0px;
border-color: #CCCCCC;
text-align: justify;
}
#contenu b {
font-weight: 700;
}
#contenu a {
color: #AA00AA;
text-decoration: none;
}
#contenu a:hover {
color: #FF0000;
}
#contenu .champFormulaire {
border: 1px solid #000000;
width: 300px;
background-image: url(icones/spacer.gif);
background-repeat: repeat;
background-color: #CCCCCC;
color: #000000;
}
#pied {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
font-size: 12px;
text-align: right;
color: #CCCCCC;
}
#pied a {
text-decoration: none;
font-weight: 600;
color: #FF6600;
}
#pied a:hover {
color: #CCCCCC;
}
.alerte {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 30px;
width: 300px;
height: 50px;
font-family: Courier, Arial, Verdana, Helvetica, sans-serif;
font-size: 18px;
font-weight: 1000;
color: #000000;
background-color: #FF9900;
text-align: center;
}
.blocImage {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
padding: 20px;
text-align: left;
background-color: #222222;
}
.blocImage p{
margin-top: 00px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
color: #BBBBBB;
border-style: dashed;
border-width: 1px;
border-color: #666666;
}
.blocImage .legende {
font-family: Courier, Arial, Verdana, Helvetica, sans-serif;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
font-size: 12px;
text-align: right;
border-style: dashed;
border-width: 1px;
border-color: #006600;
}
margin: 0px;
padding: 0px;
background-color: #000000;
}
#conteneur {
margin: 0px;
padding: 0px;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 17px;
}
#header {
margin: 0;
height: 10px;
padding: 0;
background-color: #330000;
}
#menu {
height: 30px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0;
background-color: #002000;
}
#logo {
float: left;
display: inline;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
width: 200px;
height: 30px;
padding: 0px;
border-style: dashed;
border-width: 1px;
border-color: #999999;
}
#menuTexte {
list-style-type: none;
margin: 0px;
height: 30px;
line-height: 30px;
border-style: dashed;
border-width: 1px;
border-color: #999999;
}
#menuTexte li {
display: inline;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding:0px;
line-height: 30px;
vertical-align:middle;
}
#menuTexte a {
color: #AAAA00;
text-decoration: none;
font-weight: 700;
}
#menuTexte a:hover {
color: #FFFFFF;
}
#contenu {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
border-style: dashed;
border-width: 0px;
border-color: #CCCCCC;
text-align: justify;
}
#contenu b {
font-weight: 700;
}
#contenu a {
color: #AA00AA;
text-decoration: none;
}
#contenu a:hover {
color: #FF0000;
}
#contenu .champFormulaire {
border: 1px solid #000000;
width: 300px;
background-image: url(icones/spacer.gif);
background-repeat: repeat;
background-color: #CCCCCC;
color: #000000;
}
#pied {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
font-size: 12px;
text-align: right;
color: #CCCCCC;
}
#pied a {
text-decoration: none;
font-weight: 600;
color: #FF6600;
}
#pied a:hover {
color: #CCCCCC;
}
.alerte {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 30px;
width: 300px;
height: 50px;
font-family: Courier, Arial, Verdana, Helvetica, sans-serif;
font-size: 18px;
font-weight: 1000;
color: #000000;
background-color: #FF9900;
text-align: center;
}
.blocImage {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
padding: 20px;
text-align: left;
background-color: #222222;
}
.blocImage p{
margin-top: 00px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
color: #BBBBBB;
border-style: dashed;
border-width: 1px;
border-color: #666666;
}
.blocImage .legende {
font-family: Courier, Arial, Verdana, Helvetica, sans-serif;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
font-size: 12px;
text-align: right;
border-style: dashed;
border-width: 1px;
border-color: #006600;
}
Antonio
