28172 sujets

CSS et mise en forme, CSS3

Alignement d'une image dans un bloc

Pages :
Bonjour,

J'ai un bloc qui contient du texte puis une image.
J'aimerai l'aligner sur le bas droit du bloc.

J'ai réussi sur la droite avec text-align:right;
mais pour le bas vertical-align:bottom; ça ne fonctionne pas.

Comment puis-je faire.
D'avance merci
mon code html

<div id="montexte">
	<p>mon texte avant</p>				
	<div class="img"> <img src="../images/chariot_pains_speciaux.jpg" alt="Grande variété de pains spéciaux" width="307" height="110" />			 
	</div> 
</div>


mon code css

div#montexte {
	width: 485px;
	height:402px;
	float: right;
	padding:0 0 0 5px;
	overflow:auto;
	margin:0;
}

.img{
	text-align:right;
	bottom:0;
}

Modifié par selinav (19 Feb 2008 - 17:05)
En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne
Bonjour,

Si l'image est essentiellement décorative, la passer en image de fond du bloc div#montexte.
Si l'image est un contenu qui doit être présent dans le code HTML (pour un lien par exemple), on pourra positioner div.img en absolu (avec right: 0; bottom: 0; et div#montexte en relatif.
Modérateur
bonjour,

peut tu faire un croquis de ce que tu souhaite obtenir ?

Je n'arrive pas a bien comprendre ta problématique , tu semble vouloir caler tout le monde a droite ?

image en bas devant le texte a l'affichages ou aprés ou derriere ?

... ?

GC
Bonjour,

merci de votre aide, je souhaite mettre mon image dans le bloc texte pour mettre un lien dessus par exemple et je voudrais l'aligner en bas de mon bloc texte, quelque soit la longueur du texte.

upload/13183-css.gif

D'avance merci.
Bonjour,

j'ai essayer avec right:0 et bottom:0 avec div#montexte en relative, mais ça ne fonctionne pas.
Ni l'alignement à droite, ni en bas.

SVP aidez-moi, je comprends pas.
Est-ce possible?

d'avance merci
Bonsoir,

Si j'ai bien compris ton problème, il te suffit simplement de donner à ton bloc de texte une image d'arrière-plan comme ceci :
background : white url("image.jpg") no-repeat bottom right

Où white est la couleur de ton bloc de texte et image.jpg le chemin vers ton image.
En se basant sur ton exemple ça donnerait quelque chose comme ça :
<div id="montexte">
  <p>mon texte avant</p>					
</div>

#montexte {
  float: right;
  padding-left : 5px;
  width: 485px;
  height:402px;
  background : white url("../images/chariot_pains_speciaux.jpg") no-repeat bottom right;
}

Modifié par Cygnus (25 Feb 2008 - 18:38)
Bonjour,

merci de votre réponse mais il ne s'agit pas d'une image d'arrière plan.
Je veux que mon image,( qui pourrait avoir un lien) contenue dans le bloc texte s'aligne en bas à droite.

Voici mon code pour un de mes essais :

<html>
<head>

<style type="text/css">
div#monbloc{
width:550px;
height:400px;
background-color:#999999;
}

div#montexte{
width: 485px;
height:350px;
float: right;
padding:0 0 0 5px;
overflow:auto;
margin:0;
background-color:#CCCCCC;

}

div#img{
position:absolute;
text-align:right;
bottom:0px;
}


</style>

</head>

<body>
	<div id="monbloc">
		<div id="montexte">
		mon texte
		<div id="img"><img src="images/chariot_pains_speciaux.jpg" /></div>
		</div>
	
	</div>


</body>
</html>


j'ai essayé de mettre l'image avec une class et non pas dans un div le résultat est le même.
Snif!

Merci d'avance
Bonjour,

1. Tu n'as pas de Doctype, donc ta page sera rendue en mode Quirks par les navigateurs et pas en mode Standard. Mauvais plan. À lire:
http://blog.alsacreations.com/2006/10/23/296

2. Je croyais que le bloc de l'image devait être placé en bas à droite? Et je vois bien un positionnement absolu, un bottom: 0;, mais pas de right: 0;. Ça manque. Smiley cligne

3. Tu n'as pas de conteneur positionné en relatif pour servir de référent au positionnement de l'image. Je t'invite à lire ou relire cet article:
http://openweb.eu.org/articles/initiation_absolue/
Modifié par Florent V. (26 Feb 2008 - 14:01)
j'ai volontairement enlevé le doctype dans mon exemple pour simplifier le code.
(je ne savais pas que ça avais de l'importance, mais mon code de base l'a bien).

Avec right:0 et bottom:0, il ne se passe rien.

J'ai beau lire cet article, j'ai du mal à comprendre.
J'ai positionné mes autres blocs avec des marges, si je comprends bien en relatif c'est avec les propriétés left et top. Mais le bloc parent ou enfant doit être en relatif?


div#montexte{
width: 485px;
height:350px;
float: right;
padding:0 0 0 5px;
overflow:auto;
margin:0;
background-color:#CCCCCC;
position:relative;
}

div#img{
right:0;
bottom:0;
postion:absolute;
}


je reprends le 1er exemple de ton lien, mais je comprends pas... Smiley bawling
Modifié par selinav (26 Feb 2008 - 17:00)
Il y a une subtilité à connaître : un bloc positionné l'est toujours par rapport à son plus proche parent positionné. Si aucun de ses parents n'est positionné, il le sera alors par rapport au body.

Du coup, si tu veux positionner ton image par rapport à ton bloc de texte, il faut d'abord que tu positionnes ton bloc de texte (en relatif, sans rien préciser) puis l'image par rapport à ce dernier (en absolu donc).

Smiley cligne
je viens d'y arriver en reprenant le code de openweb.
Je ne comprends pas pourtant quelle est la différence entre ce code

<style type="text/css">

.verte {
  position: relative;
  background-color: #00ff00;
  width: 100%;
  height:75%;
}
.jaune {
  position: absolute;
 
  bottom: 0;
  right: 0;
  background-color: #ffff00;
  vertical-align:top;
}



</style>

</head>

<body>
	
	<div class="verte">
  <p>
    …lorem</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;
  </p>
 <img src="images/chariot_pains_speciaux.jpg" width="150" height="50" class="jaune"/>


apparement quand je mets le jaune en div au lieu de class ça me génère un espace sous mon image, d'où cela vient-il?
merci
Modifié par selinav (26 Feb 2008 - 17:22)
Smiley rolleyes Smiley rolleyes Smiley rolleyes
Euhm..., y a une question là ?

selinav a écrit :
Je ne comprends pas pourtant quelle est la différence entre ce code

Quelle différence ? Entre quoi et quoi ?

Je pense que si tu t'exprimais un peu plus clairement...
Tu aurais des chances d'avoir des réponses un peu plus adaptées... Smiley cligne
Modifié par Cygnus (26 Feb 2008 - 17:40)
selinav a écrit :
apparement quand je mets le jaune en div au lieu de class

Ne vaudrait-il pas mieux monter le blanc en neige avec style que mettre le jaune en div avec classe? Smiley ravi
Florent V. a écrit :

Ne vaudrait-il pas mieux monter le blanc en neige avec style que mettre le jaune en div avec classe? Smiley ravi


Grande forme... Smiley eek

Smiley lol Smiley lol Smiley lol

Oui, très hs, pardon Smiley confused
Bonjour,

oui vous avez raison c'est pas très clair tout ça, si on commence à faire de la cuisine avec les CSS on va obtenir une sacrée salade.

En fait qu'en je mets ce code là :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">

div#verte {
  position: relative;
  background-color: #00ff00;
  width: 485px;
  height:350px;
  float:right;
  padding: 0 0 0 5px;
  overflow:auto;
  margin:0;
}
.jaune {
  position: absolute;
 
  bottom: 0;
  right: 0;
  background-color: #ffff00;
 
}



</style>

</head>

<body>
	
	<div id="verte">
  <p>
    …lorem</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;
  </p>
 <img src="images/chariot_pains_speciaux.jpg" width="150" height="50" class="jaune"/>
 


	
	</div>


</body>
</html>


ça fonctionne, tandis que si je mets mon image dans un div, comme ceci, j'obtiens un espace en dessous de mon image :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">

div#verte {
  position: relative;
  background-color: #00ff00;
  width: 485px;
  height:350px;
  float:right;
  padding: 0 0 0 5px;
  overflow:auto;
  margin:0;
}
div#jaune {
  position: absolute;
 
  bottom: 0;
  right: 0;
  background-color: #ffff00;
 
}



</style>

</head>

<body>
	
	<div id="verte">
  <p>
    …lorem</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;
  </p>
<div id="jaune"><img src="images/chariot_pains_speciaux.jpg" width="150" height="50" /></div>
 


	
	</div>


</body>
</html>


Est-ce normal?

Cordialement
Bonjour,

Je viens de copier-coller ton code en le remettant en forme (et en supprimant notamment l'espace entre la fin de ton div #jaune et celle de ton div #verte) et..., ça fonctionne très bien ! Smiley cligne

Ceci dit, je me pose quelques questions :
- Pourquoi inscris-tu ton image dans un div ? Tu pourrais tout à fait t'en passer.
- A quoi sert ta déclaration overflow:auto; ?
- Tu peux également te passer de margin:0; : par défaut un div n'a pas de marge.

Voilà... Smiley ravi
Pages :
Sujet clos
Aller à