[Résolu] Décalage avec IE

Bonjour,
Dans le pied de ma page (#pied), j'ai une liste menu à gauche et j'ai une image à droite qui me permet de remonter en haut de la page.
Mon problème est que sous IE je n'arrive pas à avoir ma liste et mon image sur 1 seule ligne. Avec les autres navigateurs je ne rencontre pas ce problème.
Comme les listes et les images sont des balises blocs avec un retour à la ligne, je pense que mon problème vient de là!
Maintenant comment faire ?

CSS :

#navig_bas { 
	margin: 0;
	padding: 0.1em 0.5em;
	list-style-type: none;
	color: black;
	width: 100%; 
}
#navig_bas li {
	display: inline;
}

et le code de ma class pour l'image :

.remonter {
	margin-left: 600px;
	width: 20px;
	height: 18px;
	padding: 0.1em 0.5em;
}

HTML:

<div id="pied">
	<a href="#" title="Remonter en haut de la page"><img class="remonter" src="../design/haut.gif" alt="Remonter" /></a>
	<ul id="navig_bas">
		<li>Vous êtes ici :</li>
	  	<li><a href="" title="">Accueil</a> --></li>
		<li><a href="" title="">Albums</a> --></li>
                <li><b>texte</b></li>
	</ul>
</div>

J'ai bien essayé divers choses et j'ai fait rechercher mais là j'y perds mon latin. Merci à vous
Modifié par Niklaus (07 Jul 2005 - 16:57)

Oups

voici ma class .remonter avant que j'essaie autre chose:

.remonter {
	[b]float: right;[/b]
	width: 20px;
	height: 18px;
	padding: 0.1em 0.5em;
}

Simplifie ta structure : ton image n'a rien à faire à l'extérieur de ta liste, puisque celle-ci n'est déjà plus strictement la liste des liens permettant de situer la page (premier item = ">Vous êtes ici :")

<div id="pied">
   <ul id="navig_bas">
      <li>Vous êtes ici :</li>
      <li><a href="" title="">Accueil</a> --;&gt;</li>
      <li><a href="" title="">Albums</a> --;&gt;</li>
      <li><b>texte</b></li>
      <li id="up"><a href="#" title="Remonter en haut de la page"><img class="remonter" src="../
design/haut.gif" alt="Remonter" /></a></li>
   </ul>
</div>

Il te suffit d'adapter le rendu du dernier item de liste si nécessaire, avec un #up {...}

Au passage, si tu veux bien supprimer les "-->" du contenu et les passer en CSS (:after ou background-image), ce sera nettement plus agréable pour ceux qui "écoutent" ta page dans un lecteur d'écran ou un navigateur vocal : pour l'instant, en effet, ça donne Lien vers Accueil tiret tiret plus grand que liens vers albums tiret tiret plus grand que tiret tiret texte
(Autre possibilité si tu butte sur CSS: les laisser dans le contenu, mais les remplacer par une image avec un alt="")

<edit>
Tiens, d'ailleurs : amateurs de séparateurs | et autres >, avez-vous noté que vous faisiez de l'ASCI-ART sans le savoir, et que selon les normes d'accessibilité, nous devons fournir une alternative textuelle à ces sguiguis ?
</edit>
Modifié par Laurent Denis (05 Jul 2005 - 07:58)

Salut Laurent Denis,
Merci pour ton aide. Je suis pas sûr d'avoir tout compris, les css me sont encore difficiles à comprendre
Pour les traits, plus grand, c'est ok, je vais changer. Pour mon image, elle se trouve dans le div pied avec dans ce même div pied mon menu horizontal à gauche.
J'aimerais simplement que dans mon id="pied" se trouve mon menu horizontal à gauche (albums --> albums --> texte) et à droite mon image avec la flèche qui remonte tout simplement.
J'avais pas l'impression que ça soit difficile et à voir qu'il y a seulement IE qui me pose problème me fait peut être penser à un bugg ?

Maintenant pourrais-je poser la question suivante (peut être que ça m'aiderait à comprendre) :
Lorsque j'ai 2 balises bloc que j'aimerais mettre sur une même ligne (sans retour à la ligne) puis-je utiliser float: left et float: right ?
Et je complète le tout avec une correction ou astuce pour IE ?
ça serait sémantiquement correct ?
Aie, pas facile de s'exprimer

Voici le lien de ma page où j'ai mon problème
http://www.rondoveneziano.net/albums/rondo-veneziano-album-rondo-veneziano.php
Encore merci à toi pour ton aide précieuse

Niklaus a écrit :
Pour mon image, elle se trouve dans le div pied avec dans ce même div pied mon menu horizontal à gauche.
J'aimerais simplement que dans mon id="pied" se trouve mon menu horizontal à gauche (albums --> albums --> texte) et à droite mon image avec la flèche qui remonte tout simplement.

C'est ce que fait le code que je t'ai indiqué. Mais j'avais oublié de supprimer ta classe remonter, devenue inutile (désolé).

Donc:

<div id="pied">
   <ul id="navig_bas">
      <li>Vous êtes ici :</li>
      <li><a href="" title="">Accueil</a> --;&gt;</li>
      <li><a href="" title="">Albums</a> --;&gt;</li>
      <li><b>texte</b></li>
      <li id="up"><a href="#" title="Remonter en haut de 
la page"><img src="../
design/haut.gif" alt="Remonter" /></a></li>
   </ul>
</div>

Le id="up" est optionnel. Garde-le si tu veux par exemple espacer un peu plus ton image vers la droite, pour mieux la distinguer des autres liens, avec un :

#up {
margin-left: 25px;
}

Niklaus a écrit :

Maintenant pourrais-je poser la question suivante (peut être que ça m'aiderait à comprendre) :
Lorsque j'ai 2 balises bloc que j'aimerais mettre sur une même ligne (sans retour à la ligne) puis-je utiliser float: left et float: right ?

Plutôt que deux float qui peuvent te compliquer la vie, un seul float sur le premier élément suffit : float sert à dire à un élément range toi le plus à gauche (ou à droite) possible, et laisse l'élément qui te suit venir se mettre à côté de toi.

Autre solution, souvent plus simple, comme dans le code ci-dessus : modifier le display des éléments pour en faire des éléments en ligne, c'est à dire des éléments qui se placent naturellement les uns à côté des autres. Dans ta list de pied de page, c'est ce qui se passe avec les éléments <li>

Niklaus a écrit :

ça serait sémantiquement correct ?

Oublie les histoires de "sémantiquement correct" quand il s'agit de CSS uniquement. La "sémantique", enfin, un tout petit bout de la sémantique, ça ne concerne vraiment que le code (X)HTML...

C'est tellement facile que je me pose la question pourquoi n'y ai-je pas penser plutôt
Juste un petit prob me chiffone . Comme mon image qu'on clique pour remonter n'a rien à voir avec mon menu horizontal (selon moi), j'aimerais quel soit totalement à droite car pour moi elle n'a rien à voir dans le menu horizontal.
Je pensais éventuellement redéfinir mon pied en 2 div du style width: 75% et width 25% avec un float left. Serais-ce une bonne idée ?
Merci encore pour ton aide Laurent, c'est sympa.