Hello
j'ai un petit souci, je voudrais placer une image, précisément dans le coin inférieur droit de mes fieldset
il y a déjà un div (float:left) et une liste (ul) en float: right dans chaque fieldset
Etant donné que mes fieldset évoluent (verticalement) en fonction du contenu, je voudrais faire une espèce de position:absolute bottom: 10px et right: 10px
Mais comme mes fieldset ne sont pas des div avec une position: absolute, ça positionne mon image par rapport à la page web (ce qui ne m'arrange pas du tout...)
Voici un petit schéma histoire de comprendre un peu mieux :
pour la position c'est l'ideal pour les attributs c'est different si tu juges qu'ils sont importants.si tu tiens vraiment a la positionner en html fais une classe avec un margin-top de maniere a ce qu'elle soit toujours en bas a 30px du texte
bonjour,
le positionnement d'un objet se fait par rapportr a un autre, et le bottom:0; en absolue, ne veut pas toujours dire, le bas de l'ecran.
si le conteneur de l'element est lui même place par exemple en position relative, alors tu peut user du absolute a l'interieur de celui-ci.
demo avec ton fielset, image et liste.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"> <head> <title>fieldset et image en position basse</title> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <styletype="text/css">
/*<![CDATA[*/
<!--
* {margin:0;padding:0;}
body,html {
font-family:verdana;
font-size:10px;
background-color:#CCCCCC;
}
.conteneur {
position:relative;/* pour que ça marche par la suite avec le bottom 0 en absolute sinon c'est bas de l'ecran ! */
left:150px;/* a toi de revoir ou tu veux afficher ta news par rapport a l'element precedent */
top:10px;
width:400px;/* idem, a toi de les dimensionner a ta convenance */
height:auto;
background-color:#FFFFFF;
}
div.image {
position:absolute;
bottom: 10px;
right:10px;
}
div.image img{
vertical-align:top;/* pour emplir le conteneur sans marge interne inferieur */
}
.float {
float:left;
width:110px;
border:1px solid #666;
margin:5px;
margin-bottom:5px;
}
.float img{
margin:5px auto;
display:block;
}
.float p {
margin:5px;
}
.ul {
float:right;
margin:5px;
width:240px;
border:1px solid #666;
margin-bottom:5px;
}
.ul ul {
margin:0 0 0 1.5em;/*valeur par defaut eliminée et remplacées */
padding:0 0 0 1.5em;/*valeur par defaut eliminée et remplacées */
}
.vide {height:31px;}
-->
/*]]>*/ </style> </head>
<body> <h2>1</h2> <divclass="conteneur"> <fieldset><legend>allez, une image au bottom du conteneur...</legend> <divclass="float"> <imgsrc="http://gcyrillus.free.fr/partenariat/logo.gif"alt="une image"/> <p>le div en float</p> <p>le div en float</p> <p>le div en float</p> <p>le div en float</p> <p>Attention, l'image est en position absolute, c'est a dire que si tu as un contenu sous le float right qui va j'usquen bas, il sera en dessous de
</fieldset> </div> <h2>2</h2> <divclass="conteneur"> <fieldset><legend>align-image-bottom</legend> <divclass="float"> <imgsrc="http://gcyrillus.free.fr/partenariat/logo.gif"alt="une image"/> <p>le div en float</p> <p>le div en float</p> <p>le div en float</p> <p>le div en float</p> <p>donc prevoir un div vide egale a la hauteur de l'image, pour allonger d'autant le le fieldset</p> </div> <divclass="ul">
<ul> <li><ahref="#">lien</a></li> <li><ahref="#">lien</a></li> <li><ahref="#">lien</a></li> <li><ahref="#">lien</a></li> </ul> </div> <p>prevoir de placer en marge les element en dehors des flottants.</p> <p>prevoir de placer en marge les element en dehors des flottants.</p> <p>prevoir de placer en marge les element en dehors des flottants.</p> <p>prevoir de placer en marge les element en dehors des flottants.</p> <p>donc prevoir un div vide egale a la hauteur de l'image, pour allonger d'autant le le fieldset, comme ici !</p> <divclass="vide"></div> <divclass="image"> <imgsrc="http://gcyrillus.free.fr/partenariat/logo.gif"alt="une image"/> </div>
</fieldset> </div> </body> </html>
copie/colle ce code dans une page avec l'extension html et vois si c'est ce que tu recherche. (tester avec firefoxe et internet explorer).
a plus
<edit>erreur sur le doctype et une apostrophe en trop, corrigé</edit>
merci, ça m'a l'air pas mal, je vais tester ça
je te dis quoi dès que j'aurai eu le temps
[EDIT] ok, c'est parfait, j'ai du un peu bidouiller par rapport à mon code à moi, mais finalement ça donne bien ce que je voulais
merci beaucoup
placement d'une image dans un fieldset
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui