Image qui sort du cadre

Répondre
jackbocar
le 01/09/2008 à 19:34
jackbocar
DIV.cadre {
border: 1px solid #f29e00;
}

SPAN.nom {
font-size: 11pt;
font-weight: bolder;
color: #00002d;
margin-left:0.3em;
line-height: 2em;
}

SPAN.dep {
font-size: 11pt;
font-weight: bolder;
color: #192b2b;
margin-left: 1.5em;
}

DIV.texte {
border-top: 1px solid #f29e00;
font-size: 11pt;
color: #000026;
text-align: justify;
padding: 5px;
height: auto;
}

IMG {
float: left;
}
BODY, P, IMG {
margin: 0.2em;
}

<div class="cadre">
<span class="nom">Ville</span>
<span class="dep">Département</span>
<div class="texte"><p>Mon Image</p>
Mon Texte
</div></div>

Comment faire pour que l'image et ce quelque soit sa taille en hauteur (height="") ne sorte pas du cadre même si il n'y a que quelques mots dans le texte ?

Je m'explique :
Si j'ai une image de 200 pixels de hauteur et dix lignes de texte, l'image ne sort pas du cadre.

Si j'ai la même image avec une ou deux lignes de texte, l'image sort du cadre et masque les informations qui suivent.

Merci de votre aide

Jack Bocar
LupusMic
le 02/09/2008 à 07:41
LupusMic
div.cadre:after { clear: both }
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
jackbocar
le 02/09/2008 à 15:09
jackbocar
Bonjour,

Super Ce :
DIV.cadre:after {
clear: both
}

Les images ce placent bien dans le cadre.

Mais maintenant, c'est le cadre du dessus qui chevauche celui du dessous.

Alors, j'ai ajouté : min-height: 200px;

Pour les styles :

DIV.texte {
border-top: 1px solid #f29e00;
font-size: 11pt;
color: #000026;
text-align: justify;
padding: 5px;
min-height: 200px;
}

Peut-être as tu une autre astuce plus judicieuse ?


Merci

Jack Bocar
Keika
le 02/09/2008 à 16:21
Keika
1: faut mettre le clear sur l'element que tu veux voir en dessous
2: j'aurais dit overflow:hidden sur l'element que tu veux cacher
Le PHP --> C'est dur !
jackbocar
le 02/09/2008 à 18:27
jackbocar
Bonjour,

En fait ça fonctionne très bien avec Internet Expoler 7 et pas avec Firefox 3.

Pour que les deux acceptent l'affichage correctement, il faut faire comme ceci.
En fin, c'est ce que j'ai réussi à faire :



DIV.cadre {
border: 1px solid #f29e00;
}

SPAN.nom {
font-size: 11pt;
font-weight: bolder;
color: #00002d;
margin-left:0.3em;
line-height: 2em;
}

SPAN.dep {
font-size: 11pt;
font-weight: bolder;
color: #192b2b;
margin-left: 1.5em;
}

DIV.texte:after {
border-top: 1px solid #f29e00;
font-size: 11pt;
color: #000026;
text-align: justify;
padding: 5px;
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
clear: both;
}

IMG {
float: left;
}
P, IMG {
margin: 0.5em;
text-align:justify;
}


<div class="cadre"><span class="nom">Nom</span> &nbsp; <span class="dep">(DEP)</span><div class="texte"><p>TEXTE</p></div></div><a href="#" class="menuNav">Top</a><br /><br />

Jack Bocar
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours