Padding sous l'image avec Iexplorer

Bonjour,

Je sais que c'est un sujet qui a déjà été traité, mais je n'ai pas trouvé la solution en parcourant la FAQ

Je vous sollicite donc, SVP, pour comprendre et rectifier le tir.

Sous mozilla, pas de problème d'affichage; Avec explorer, évidemment:

ul#gauche {
width:250px;
padding:5px;
background-color:red;
border: 1px solid #E2E2E2;
margin: 0px;
text-align:center;
list-style:none;
}

ul#gauche li {
list-style:none;
text-align:justify;
padding:5px 0px 15px 0px;
background-color:#FFFFFF;
}

ul#gauche h3{
color: #709CA9;
text-align:center;
}

ul#gauche img{
margin:0px;
padding:0px;
display:block;
}

et le html:

<ul id="gauche">
	<h3>Le Mali</h3>
		<img src="images/img_mali_map.gif" width="150" height="100" />			
<li>Le Mali est un pays d'Afrique qui touche la Mauritanie, la Côte d'Yvoire, le Niger, le Sénégal, la Guinée, le Burkina Fasso et l'Algérie. Sa capitale est Bamako.</li>
		<img src="images/img_mali_flag.jpg" width="150" height="100" />
</ul>

Ma question est la suivante:
Pourquoi diantre mon image(drapeau) parait-elle dans la balise <li> et pas en dehors?
Devrais-je utiliser un float:left pour sortir mes images des balises?

J'aimerais comprendre! Je m'arrache les cheveux, merci d'avance!!!
Modifié par Battista (03 Jun 2007 - 02:02)

Ce que j'ai du mal a comprendre, meme si je suis pas un expert, c'est, pourquoi tu utilise les balise <ul>/<li> alors que ca n'a pas l'air d'etre un menu mais peut etre je dis des betises dites moi si je me trompe .

personellement je ferais un bloc conteneur avec un background rouge
un bloc en position relative avec margin-left/right:auto pour l'image
un bloc pareil avec une autre ID pour le texte
et le meme que pour l'image avec une autre ID pour le drapeau

pour le titre une class .titre avec juste font-size et font-family et color pour ton gris et align en center

pour le texte une class .texte avec juste font-size et font-family et color pour ton noir cette fois et align (center/left/right/justify)

voila l'idéé un gros bloc qui en contient plusieurs qui se place par rapport a son parent.

En esperant t'avoir aidé. Je ne te machouille pas le travail a te taper le code car les gens d'ici (ce forum) mon laissé me debrouillé par moi meme en me donnant juste des directive et m'ont beaucoup appris et un conseil (pas pour faire de la pub hein) mais le livre de Raphael m'a beaucoup aidé aussi ( CSS2 chez Eyrolle edition) une veritable bible a mes yeux

Salut,

Les <ul> ne tolèrent que les <li> (d'ailleurs c'est fait pour cela ) pas de <img>, <p> ... C'est que c'est très restrictif ces petites bêtes là.

Voilou

Salut,

Je suis assez d'accord avec Ankart sur la (non) pertinence de la balise <ul>. Sémantiquement parlant, tu ne déclares pas vraiment une liste.
Cela dit, si tu tiens à cette balise, sache qu'elle n'accepte comme descendant direct que des <li>. Tu ne peux donc pas lui mettre directement de <h3> et autres <img>.
En gros, change ton code par un truc dans ce style :

<ul>
	<li><h3>Le Mali</h3></li>
	<li><img src="blabla" /></li>
	<li>Le Mali est un pays blabla</li>
	<li><img src="blabla" /></li>
</ul>

Modifie quelque peu tes styles en conséquence et tout marchera comme tu veux.

A+

Merci beaucoup pour vos éclaircissements!
J'ai reconsidéré mon code et repris depuis le début en abandonnant les <ul> et les <li>.

Dans l'ordre:

un conteneur #gauche avec un fond bleu ciel pour voir son étendue
une classe #gauche_titre s'appliquant à une balise <h3>.Est-ce la meilleure balise à utiliser? Devrais-je utiliser plutot un <p> ou un autre marqueur avec font-size...?
un div #gauche_img_map pour l'image de l'afrique
un div #gauche_texte pour le texte
un div #gauche_img_flag pour le drapeau



Voici le css:

#gauche {
background-color:#6699FF;
width:150px;
padding:0px;
margin:0px;
}

.gauche_titre{
color: #709CA9;
background-color:#FFFF66;
text-align:center;
}

#gauche_img_map {
position:relative;
height:100px;
margin-left:auto;
margin-right:auto;
background-image:url(images/img_mali_map.gif);
background-repeat:none;
display:block;
}

#gauche_texte {
text-align:justify;
padding:5px 0px;
background-color:#FFFFFF;
}

#gauche_img_flag {
height:100px;
margin-left:auto;
margin-right:auto;
background-image:url(images/img_mali_flag.jpg);
background-repeat:none;
}

et le HTML:

<div id="gauche">
<h3 class="gauche_titre">Le Mali</h3>
<div id="gauche_img_map"></div>
<div id="gauche_texte">Le Mali est un pays d'Afrique qui 
touche la Mauritanie, la Côte d'Yvoire, le Niger, le Sénégal, 
la Guinée, le Burkina Fasso et l'Algérie. Sa capitale est Bamako.</div>
<div id="gauche_img_flag"></div>
</div>

Tout est *presque* en ordre! Il reste un espacement bleu en dessous du titre " Le Mali", que je n'ai pas spécifié, et qui apparaît avec mozilla et firefox. J'ai pourtant setté toutes les propriétés il me semble!

Sinon la propriété position:relative pour l'image de l'afrique est-elle indispensable? c'est alors elle qui devient la référence pour la suite des éléments non?

Dans tous les cas, j'y suis presque, merci à tous pour vos réponses!

Pour ton problème de marge sous le h3, c'est tout simplement... de la marge sous le h3 (oui, je sais, ça surprend ). Un petit {margin-bottom:0} et on en parle plus.

Pour {position:relative} sur l'image, je ne pense pas que ce soit nécessaire (en tout cas pas avec le code que tu proposes).

Pour la refonte de ton code HTML :
- perso je ne mettrais pas la carte et le drapeau dans les styles. Ce ne sont pas des styles (des images décoratives). des balises <img> me semblent appropriées ici.
- Si ta div gauche_texte ne doit jamais contenir qu'un paragraphe de texte, tu peux en faire un <p>, tout simplement.

Ca donnerait quelque chose comme ça :

<div id="gauche">
	<h3>Le Mali</h3>
	<img src="blabla" alt="situation géographique du mali" />
	<p>Le Mali est un pays d'Afrique qui touche la Mauritanie, la Côte d'Yvoire, le Niger, le Sénégal, la Guinée, le Burkina Fasso et l'Algérie. Sa capitale est Bamako.</p>
	<img src="blabla" alt="drapeau du mali" />
</div>

A+

Waaaaa! Trop cool ça marche impec! Un grand merci à toi! Je me complique la vie avec trop de code, et toi tu le réduis de plus de la moitié! Très instructif!