[Résolu] Disposition d'image

Bonjour tout le monde,

Je me tourne à nouveau vers vous car j'ai un légér probleme. En effet je voudrai faire un truc mais je ne sais pas déjà si c'est possible sans faire trop de bidouille.

Explication: Je suis entrain de faire la refont du site d'une boite de nutrition animal et dans leur parti administration ils peuvent ajouter des articles qui ont une certain forme, Texte à gauche et image à droite.

Le nombre d'image qu'il peuvent mettre sera de 5 maximum je pense, mais le probleme et pour des personne qui veulent mettre que 2 image sur un texte assez long. Car je voudrai pouvoir faire l'effet de mettre une image en haut et l'autre en bas.

Donc j'aimerai vaut lumiere pour savoir si on peut faire cela assez facilement sans crée plein d'id dans la feuille de style. Pour le moment j'ai juste cela.

html:

<div id="corpsarticle">
	<!--Endroit du sous menu pour que l'internaute se repere -->
	<div id="menuarticle"><a href="./index.php">Accueil</a> / <a href="./index.php?page=bouh">Sécurité alimentaire</a> <span id="selection">/ Une question qui ne date pas d'aujoud'hui</span></div>
	<hr/>

	<!-- Permet d'imprimer la page -->
	<div id="imprimer"><a href="#"><img src="./images/savoirplus.gif" title="fleche" alt="fleche" /> Imprimez la page <img src="./images/imprimante.gif" title="imprimer" alt="imprimer" /></a></div>
	 
	<h1>SECURITE ALIMENTAIRE ET QUALITE</h1>
	<h1 id="titrearticle">Une question qui ne date pas d'aujoud'hui</h1>
	<div id="textarticle">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ultrices sollicitudin dui. Fusce suscipit velit ut ante. Morbi nec arcu id est lacinia lobortis. Pellentesque rhoncus, mauris quis porta venenatis, urna nulla venenatis dui, sit amet posuere justo ligula id est. Duis eget magna at augue viverra laoreet. Nam eu leo a mauris tincidunt sodales. Vivamus lectus erat, pharetra at, gravida auctor, cursus ac, diam. Aenean eget risus id odio viverra fermentum. Quisque odio dui, molestie quis, malesuada sit amet, lacinia in, tellus. Morbi elementum, mauris in volutpat suscipit, nunc justo tristique dui, eget nonummy enim nibh eget est. Vivamus orci ante, convallis eu, varius sed, varius eu, justo. Sed eros tellus, venenatis vitae, ornare vehicula, pharetra accumsan, mauris.</p>

	<p>Voilà qui donne à réfléchir ! </p>
	</div>
	<div id="imagearticle">
		<img class="imgarticle" src="./images/img1.jpg"/>
		<img class="imgarticle" src="./images/img2.jpg"/>
	</div>

	<div id="piedpage">
		<hr/>
		<div id="publication"><img src="./images/publication.gif" alt="publication" title="publication"/> Publié le 23-06-2007</a></div>
		<div id="hautdepage"><a href="#haut"><img src="./images/hautpage.gif" title="fleche" alt="fleche" /> Haut de la page</a></div>
	</div>
</div>

et le css actuelle :

div#corpsarticle{
	width: 550px;
	margin-left: 25px;
	float: left;
	margin-top: 35px;
	color: #6A6A6A;
}
div#textarticle{
	float: left;
	text-align: justify;
}
div#imagearticle{
	width: 200px;
	margin-left: 580px;
}
img.imgarticle {
	margin-bottom: 100px;
	height: 108px;
	width: 159px;
}

Modifié par Halindel (19 Jul 2007 - 13:18)

personne a une petit idée. Vais peut etre essayer de faire avec des images transparente oO ou j'ai pas été assez clair ??
Modifié par Halindel (19 Jul 2007 - 09:15)

Bon personne n'as d'idée
Modifié par Halindel (19 Jul 2007 - 09:15)

Salut,

Je ne vois pas comment tu pourrais mettre simplement une image en haut et une en bas. Tu seras obligé d'utiliser un positionnement flottant, et donc de donner des id à toutes les images.

Si ce sont des pages statiques & que tu contrôles le contenu, ce n'est pas un problème, mais pour un site géré par un CMS, c'est problématique ...

<casquette modo> Evite de poser 2 questions différentes dans le même sujet, ça ne fait qu'embrouiller les autres. Et merci de surveiller ton orthographe </casquette modo>

Sorry,

Je sais que mon ortho est moyen, et j'essai au mieux de pas faire trop de faute

Ainsi que pour la double question (ou je me suis repondu à moi même vais editer)


Sinon pour l'image il faudrai que j'utilise une id pour chaque image, ce qui est possible car je crée moi meme l'article. Je l'ai déjà fait.

Mais le probleme se situe surtout à comment mettre une image en bas alors que l'autre se trouve en haut. J'ai essyer le float: bottom; mais il aime pas :'(

Il faut utiliser le positionnement absolu, qui permet de placer les images par rapport à leur parent (à condition que celui-ci soit lui-même positionné).

Par exemple :

<div id="parent">
    <img id="img1" alt="..." src="..." />
    <img id="img2" alt="..." src="..." />
    <p>Le texte ici ...</p>
</div>

Première chose, positionner #parent. Il suffit de modifier la propriété CSS "position". Comme on ne veut pas le déplacer, on utilise :

#parent {
   position: relative;
}

Ensuite, on peut placer les images facilement par rapport à #parent. Pour mettre les images à droite, avec #img1 en haut et #img2 en bas :

#img1 {
   position: absolute;
   right: 0;
}
#img2 {
   position: absolute;
   right: 0;
   bottom: 0;
}

Il faut faire attention à ce que tu fais, et notamment aux dimensions des différents éléments (taille des images, longueur du texte, etc) pour éviter des problèmes de superposition.

Merci bien de ta reponse mais cela ne marche pas

Car en faite j'ai le text dans ma div de gauche et des images dans celle de droite.

Et je voudrai que se soit les images de droite que j'arrive à faire bouger.

Avec ton code j'ai l'image 2 qui arrive au dessus de l'image 1

Je pense que mettre en position fixe serai le meilleur moyen mais seulement je ne connais pas à l'avance la taille du texte dans la parti gauche donc je suis obligé d'utiliser des positions relative.

a écrit :
Car en faite j'ai le text dans ma div de gauche et des images dans celle de droite.

Ce qui veut simplement dire que tu as un div inutile, a priori.

a écrit :
Avec ton code j'ai l'image 2 qui arrive au dessus de l'image 1

C'est de ça que je parlais quand je disais de faire attention aux dimensions.

a écrit :
Je pense que mettre en position fixe serai le meilleur moyen mais seulement je ne connais pas à l'avance la taille du texte dans la parti gauche donc je suis obligé d'utiliser des positions relative.

Non. Les positionnements fixes et relatifs ne peuvent pas t'aider ici, c'est bien du positionnement absolu que tu as besoin.

bon voici la page en ligne apres des difficultés a uploader celle ci , l'entreprise me laisse seulement le port 80 :'(

Visuelle de la page

Pour les normes il est encore en construction donc je le teste seulement de temps en temps.

Donc j'aimerai que ma 2eme image soit tout en bas
Modifié par Halindel (19 Jul 2007 - 12:48)

Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

Halindel a écrit :
Merci bien de ta reponse mais cela ne marche pas

Si si, ça marche parfaitement. Je te conseille fortement de travailler cette solution.

Halindel a écrit :
Car en faite j'ai le text dans ma div de gauche et des images dans celle de droite.

Faire une div contenant les deux div en question. C'est ce conteneur que l'on positionnera en relatif pour servir de référent aux images positionnées en absolu.

Si ça ne te semble pas clair, un petit tour par l'article d'Openweb sur le positionnement absolu ne serait pas du luxe.

Halindel a écrit :
Je pense que mettre en position fixe serai le meilleur moyen

À priori, non.

Halindel a écrit :
donc je suis obligé d'utiliser des positions relative.

Attention à ne pas utiliser les termes «position fixe» et «position relative» sans savoir exactement de quoi il s'agit. Une fois encore, un petit tour par les articles d'Openweb sur le positionnement CSS, ça ne peut pas faire de mal.

Merci à tous, ça marche, j'ai bien utiliser les positions absolut mais j'aime pas et comme il va y avoir plus de deux images ça va être la galere enfin vais demander à mon chef si c'est si imporant.

j'ai du utilise le padding-right pour avoir le bonne effet en plus de la position relative.

Sinon pour le lien desoler je code tout avec mes mimines donc dès que je vois des balises = avec un lien je ne peux pas m'empecher de mettre des ""