Discussion :

[calipanpan]

Hello à tous,

Je me trouve confronté à un petit problème, j'ai plusieurs div qui composent mes différents blocs. Mais le problème est que quand j'ajoute une image dans ce div, l'image dépasse.

Exemple :



Le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>
<img src="images/welcom_receptionpetit.jpg" height="173" width="130" class="left" alt="" / >Depuis bientôt 10 ans, l’hôtel a diversifié son activité et se consacre principalement à la formation hôtelière. Nous permettons ainsi à nos étudiants d’être chaque jour en contact direct avec la clientèle. 
Ceci encourage nos collaborateurs à maintenir une rigueur, un savoir-faire ainsi qu’une tenue toujours professionnelle.</p></div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#content div {
border: 1px solid #000000;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
border-bottom:solid;
}
 
 
#content img {
padding: 1px;
display:block;
background: #cccccc;
border: 4px solid #f0f0f0;
}

Si quelqu'un à une idée, ce serait volontiers.

Merci d'avance

Calipanpan

[MasterOfChakhaL]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div>
<img src="" alt="" / >Depuis...</p></div>

ca me parait bizarre cette balise...
peut etre que c'est ca qui te fout en l'air ton css...

[Bisûnûrs]

On peut avoir le CSS entier ainsi que le HTML entier ?
Parce que là, difficile de tester avec des morceaux qui n'ont rien à voir avec le CSS.

Au passage, comme dit MasterOfChakhaL, tu as </p> qui traine on ne sait pourquoi, et en plus, tu as border-bottom:solid; en trop dans ton CSS. Bien sûr ça ne résoudra pas ton problème.

[Candygirl]

Le class="left" sur l'image est, je suppose, un float:left ?
Il faudrait onc faire intervenir la propriété clear. Par exemple en rajoutant ceci dans ton css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#content div:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

et, au besoin, rjouter ceci juste à l'attention de IE:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#content div {height:1%;}

Autrement il y a aussi l'otpion d'ajouter un div, hr ou br avec le clear:both, juste avant la clôture de ton div.

[calipanpan]

MasterOfChakhaL => Excuse moi, pour le </p> c'était une erreur de report dans le forum, mais je ne l'avais pas dans mon code.

BisounoursJos => Je n'ai volontairement pas tout mis car j'ai vu dans d'autres postes que certain se sont fait incendier car il avait mis des kilomètre de code. Mais la prochaine fois je ferai un zip et je mettrai le tout.

Candygirl =>Merci ta solution à bien à résolu mon problème dans IE. En fait juste en rajoutant le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#content div {height:1%;}.

Mais dans firefox, en rajoutant tout ce que tu m'as dis, j'ai un énorme espace à la fin de mon premier bloc.



Et pour la class left, c'est bien un float: left :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.left {
margin: 10px 10px 5px 0;
float: left;
}

En tout cas merci déjà à tous pour votre aide.

Si vous avez encore une idée pour firefox, c'est volontiers. Mais je vais aussi essayer de chercher de mon coté.

Calipanpan

[Candygirl]

Euh, ton grand espace, il va jusqu'au bas d'un menu que tu aurais mis à gauche ou à droite en float, avec le contenu positionné avec la technique des marges ?

Si tu pouvais montrer la structure complète de ta page ou un lien pour voir plus en détail le problème...

Une habitante des environs du Mont-Pèlerin, déjà allée à l'hôtel du Parc plus d'une fois