28221 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaiterais savoir pourquoi lorsque j'utilise une liste de type ul li de type inline sous Mac (IE 5.1), il me les affiche bien les unes à cotés des autres mais avec un décalage vers le bas.

Ou si c'est en verticale, la liste est bien l'une en dessous de l'autre mais toujours avec un décalage vers la droite ?

Enfin cela donne ceci :

1er lien
   2éme lien
      3éme lien
        4 éme lien


Sous les autres navigateurs, pas de problémes.

Merci
Modifié par doomer (27 Apr 2005 - 08:23)
J'ai déjà essayé mais en vain Smiley cligne

Voici le source XHTML :


	<ul id="galerie_mini">
      <li><a href="Bernavillois/beaumetz.jpg" title="Commune de Beaumetz"><img src="Bernavillois/beaumetz_thumb.jpg" alt="Le titre de la photo 1" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/bonneville.jpg" title="Commune de Bonneville"><img src="Bernavillois/bonneville_thumb.jpg" alt="Le titre de la photo 2" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/candas.jpg" title="Commune de Candas"><img src="Bernavillois/candas_thumb.jpg" alt="Le titre de la photo 3" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/fieffes.jpg" title="Commune de Fieffes-Montrelet"><img src="Bernavillois/fieffes_thumb.jpg" alt="Le titre de la photo 4" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/fienvillers2.jpg" title="Commune de Fienvillers"><img src="Bernavillois/fienvillers2_thumb.jpg" alt="Le titre de la photo 5" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/maizicourt.jpg" title="Commune de Maizicourt"><img src="Bernavillois/maizicourt_thumb.jpg" alt="Le titre de la photo 6" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/prouville1.jpg" title="Commune de Prouville : La Mairie"><img src="Bernavillois/prouville1_thumb.jpg" alt="Le titre de la photo 7" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/prouville2.jpg" title="Commune de Prouville : La Mairie"><img src="Bernavillois/prouville2_thumb.jpg" alt="Le titre de la photo 8" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/prouville2.jpg" title="Commune de Prouville : La Mairie"><img src="Bernavillois/prouville2_thumb.jpg" alt="Le titre de la photo 9" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/beaumetz.jpg" title="Commune de Beaumetz"><img src="Bernavillois/beaumetz_thumb.jpg" alt="Le titre de la photo 10" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/bonneville.jpg" title="Commune de Bonneville"><img src="Bernavillois/bonneville_thumb.jpg" alt="Le titre de la photo 11" width="50" height="37" /></a></li>
      <li><a href="Bernavillois/candas.jpg" title="Commune de Candas"><img src="Bernavillois/candas_thumb.jpg" alt="Le titre de la photo 12" width="50" height="37" /></a></li>
    </ul>
	
    <dl id="photo">
      <dt>Commune de Beaumetz</dt>
      <dd><img id="big_pict" src="Bernavillois/beaumetz.jpg" alt="Commune de Beaumetz" width="400" height="264" /></dd>
    </dl>


Le code CSS :

ul#galerie_mini
{
  margin:0;
  padding:0;
  list-style:none;
}

ul#galerie_mini li
{
  float:left;
}

/* \*/
ul#galerie_mini li{
display:block;margin:0;padding:0;
}
/* */

ul#galerie_mini li a img
{
	margin: 2px 1px;
	border: 1px solid #dcb;
	padding:3px;
}

dl#photo
{
   float:right;
   margin-left:20%;
}

dl#photo dt
{
        font: italic 2em Georgia, "Times New Roman", Times, serif;
	color: #006600;
	text-indent: 22px;
 	  
        background: url(images/carrejaune.jpg) no-repeat 0 0;
}
dl#photo dd
{
	margin-right:20%;
	margin-left:5%;
	width: 65%;
}

dl#photo img
{
	border: 2px outset #dcb;
	padding:5px;
}


Si quelqu'un à une idée ?
Modifié le 24 Jan 2005 - 17:05
Administrateur
Comme d'habitude, je vais te rappeler ce que dit l'Aide :
http://forum.alsacreations.com/help.php
Aide a écrit :
13- Mise en forme générale des messages
Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Des boutons de mise en forme sont prévus pour cela (gras, italique, etc.). Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués). Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème.


Plus tu donnes d'explications à ton problème, plus facilement les membres pourront t'aider...
Donne une largeur a ton ul.
dans ton cas, si j'ai bien compté: 600px
Modifié le 24 Jan 2005 - 18:02