Bonjour à tous,
J'ai un problème qui me semble tout bête à résoudre mais dont je ne trouve pas de solution.
Le problème est le suivant : je cherche à positionner une image à droite ou à gauche d'un bloc, le texte contenu dans ce bloc étant alors placé respectivement à gauche ou à droite de l'image. Pour information, le début du texte est aligné avec le bord supérieur de l'image.
Ce que j'ai fait pour l'instant est la chose suivante (le bloc en question correspond au bloc "bloc_cadre" dans mon code) :
HTML :
CSS :
Plusieurs tests, avec un texte relativement long, m'ont fait initialement pensé que tout allait bien. Mais lorsque j'ai voulu utilisé ce bloc avec un texte assez court, l'image finit par être centré dans mon bloc, le texte continuant lui à être placé à droite dans le cas d'un placement de l'image à droite. Dans le cas d'un placement à gauche, l'image est bien placée à gauche du cadre mais le texte stoppe au milieu de l'espace restant entre l'image et le bord droit du cadre au lieu d'aller complètement jusqu'au bord droit (moins les marges bien sûr).
L'effet est encore plus curieux avec un texte très court du style a<br />x, où a est placé en haut à droite de l'image (classe "right") et x est placé également à droite mais sous l'image au lieu d'être sous la lettre a.
J'ai l'impression d'oublier quelque chose dans l'histoire mais je ne vois pas quoi, et un peu d'aide ne serait pas de refus.
Merci d'avance!
Edit : Pour information, le positionnement semble correct en utilisant une balise <p> au lieu de <div class="bloc_cadre"> dans le cas où il n'y a rien d'autre à mettre sous l'image. En contrepartie bien sûr, l'image peut chevaucher la bordure basse du bloc "corps".
Modifié par SkyCorp (13 May 2009 - 00:35)
J'ai un problème qui me semble tout bête à résoudre mais dont je ne trouve pas de solution.
Le problème est le suivant : je cherche à positionner une image à droite ou à gauche d'un bloc, le texte contenu dans ce bloc étant alors placé respectivement à gauche ou à droite de l'image. Pour information, le début du texte est aligné avec le bord supérieur de l'image.
Ce que j'ai fait pour l'instant est la chose suivante (le bloc en question correspond au bloc "bloc_cadre" dans mon code) :
HTML :
<body>
<div id="corps">
Blablabla
<div class="bloc_cadre">
<img src="image.jpg" alt="imagee" class="right" />
Le texte ici.<br />
Suite du texte...
</div>
Blablabla bis
</div>
</body>
CSS :
html, body
{
height:100%;
width: 100%;
}
body
{
margin: 20px 0; /* Marges haute et basse à 20px pour éviter de coller avec le haut et le bas de la fenêtre du navigateur, marges droite et gauche à 0 */
padding: 0; /* Padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
font: 100% "Comic Sans MS", "Trebuchet MS", sans-serif, serif;
color: #fff;
background: #5E5E5E url("images/fond.png");
}
#corps
{
width: 95%; /* Largeur du bloc qui contient l'ensemble de la page (height est définie plus loin) */
max-width: 1200px; /* Taille maximale du bloc, adaptée aux résolutions 1280x960 (ne fonctionne pas sous IE6 et versions inférieures, à placer dans le <head> de la page HTML). La taille doit également être supérieure à la longueur de la bannière */
min-width: 760px; /* Taille minimale du bloc, adaptée aux résolutions 800x600 (cf. max-width). */
margin: 0 auto; /* Pour centrer la page */
margin-bottom: 20px;
padding: 5px;
padding-bottom: 20px;
border: 2px solid black; /* Bordure pour marquer les limites du corps de la page */
background: #626262 url("images/motif.png");
color: #B3B3B3;
}
/* On définit une hauteur minimale, fonctionnant également sous IE (qui ne sait pas traiter l'attribut min-height et interprète l'attribut heigth comme il devrait normalement interpréter l'attribut min-height) */
#corps
{
height: 70%; /* Fonctionne sur tous les navigateurs */
}
html>body #corps /* hack ne fonctionne pas sur IE */
{
height: auto; /* Surcharge l'instruction précédente */
min-height: 70%;
}
#corps p {
margin: 0;
margin-left: 20px;
margin-right: 20px;
text-align: justify; /* Alignement justifié */
line-height: 1.7em; /* Hauteur de ligne supérieure à l'état normal pour aérer le tout */
}
.bloc_cadre
{
float: left;
padding: 5px;
border: 0;
margin: 0 auto; /* Pour centrer la page */
margin-left: 20px;
margin-right: 20px;
text-align: justify; /* Alignement justifié */
line-height: 1.7em; /* Hauteur de ligne supérieure à l'état normal pour aérer le tout */
}
img.right
{
float: right;
border: none;
margin-left: 20px;
}
img.left
{
float: left;
border: none;
margin-right: 20px;
}
Plusieurs tests, avec un texte relativement long, m'ont fait initialement pensé que tout allait bien. Mais lorsque j'ai voulu utilisé ce bloc avec un texte assez court, l'image finit par être centré dans mon bloc, le texte continuant lui à être placé à droite dans le cas d'un placement de l'image à droite. Dans le cas d'un placement à gauche, l'image est bien placée à gauche du cadre mais le texte stoppe au milieu de l'espace restant entre l'image et le bord droit du cadre au lieu d'aller complètement jusqu'au bord droit (moins les marges bien sûr).
L'effet est encore plus curieux avec un texte très court du style a<br />x, où a est placé en haut à droite de l'image (classe "right") et x est placé également à droite mais sous l'image au lieu d'être sous la lettre a.
J'ai l'impression d'oublier quelque chose dans l'histoire mais je ne vois pas quoi, et un peu d'aide ne serait pas de refus.
Merci d'avance!
Edit : Pour information, le positionnement semble correct en utilisant une balise <p> au lieu de <div class="bloc_cadre"> dans le cas où il n'y a rien d'autre à mettre sous l'image. En contrepartie bien sûr, l'image peut chevaucher la bordure basse du bloc "corps".
Modifié par SkyCorp (13 May 2009 - 00:35)
