Quelques problèmes de positionnement... 2 colonnes, listes à image

Bonjour à tous !!

J'ai quelques problèmes pour positionner mes éléments correctement...

D'abord un problème de compatibilité IE / Mozilla : je crée un menu (ul/li) avec des images. Sur Mozilla, pas de problèmes, l'affichage est nickel. Sur IE par contre, j'ai ce fameux problème d'espacement entre chaque menu, ce qui fait que mon menu est vilain pas beau... J'ai tenté différentes solutions, mais sans succès...

En fait, chaque élément de menu à un petit espacement sur IE, ainsi que sur la droite. J'ai essayé d'initialiser les margin/padding à 0, le text-width à 1px, modifier le formatage de la liste html, mais rien a faire, je n'y arrive décidément pas...


Second problème, un problème de positionnement...

Je tente de faire 2 colonnes dans ma partie "contenu". La première colonne va contenir des "affiches" genre pub, info, et la seconde va contenir des listes d'images.

J'ai donc un div conteneur de base, qui va contenir 2 divs : j'affecte à chaque div interne un id : leftcontent et rightcontent.

#leftcontent
	{
	position:relative;
	width: 405px;
	display:inline;
	float:left;
	}

#rightcontent
	{
	position:absolute;
	left: 435px;
	max-width: 375;
	}

Mon problème, c'est que si le contenu de droite dépasse en hauteur le contenu de gauche, il va venir empiéter sur ma partie "footer", plutôt que redimensionner le conteneur pour repousser le footer plus bas.

Vous allez me dire : logique, la position est en absolu, donc le div n'est pas pris dans le flot courant et est dissocié du reste du design. Seulement, j'ai essayé plein de solutions différentes (souvent par tatonnement, je l'avoue) mais je n'arrive pas à placer ces 2 éléments côte à côte.


Donc si vous avez des pistes à me soumettre, je vous en serai reconnaissant. ça fait 3 jours que je cherche des solutions sans y arriver...


D'avance merci
Modifié par titouille (01 Apr 2006 - 15:58)

bonjour

peut etre des solutions sur cette page et une solution a ton probleme sur celle la

Salut ! A tout hasard à tu aussi essayé :

line height:0em;font-size:0em

la où tu as mis ça :

a écrit :
En fait, chaque élément de menu à un petit espacement sur IE, ainsi que sur la droite. J'ai essayé d'initialiser les margin/padding à 0, le text-width à 1px, modifier le formatage de la liste html, mais rien a faire, je n'y arrive décidément pas...

Superbe

Ok, dans l'ordre : Merci Philippe, le second lien semble tout à fait correspondre à mes besoins, je vais décortiquer le source de suite

Et Merci Ralfman68. Je m'étais emélé les pinceaux dans mon explication. Ce n'était pas text-width mais line-height que j'avais testé, en suivant les explications à ce sujet sur la faq alsacréations.
Mais font-size à réglé le problème. Subtil
Par contre, l'écart sur le côté reste... Mon menu est composé de 2 images verticales (bord gauche et bord droit) ainsi que de plusieurs images horizontales (sommet, fond, et les différentes images de menu entre ces 2 premières). A droite, l'écart est toujours là. Et il semblerai que ça provienne bien du menu, pas du div accolé (bord droit).


Merci à vous, je m'en vais tester la seconde URL de Philippe de ce pas

argh, c'est rageant

leftcontent
{
width: 405px;
float: left;
}
rightcontent
{
float: right;
}
footer
{
clear: both;
}

et ça marche

C'est le clear:both qui se la joue, en fait Trop facile, lol.

merci bcp pour cette url, je vais continuer à parcourir le site à la recherche de bonnes astuces.

A++

titouille a écrit :

merci bcp pour cette url, je vais continuer à parcourir le site à la recherche de bonnes astuces.

Hello,

Avant de partir trop vite, veux-tu bien marquer ce sujet comme [Résolu], ainsi que le demandent les Règles du forum que tu as approuvées en t'inscrivant ?

heu, nan, point encore, vu que j'ai toujours un espacement à droite de mon menu, ce n'est pas encore totalement résolu. Mais je n'hésiterai pas à venir agrémenter mon thread d'une nouvelle réponse si je trouve de moi-même la solution ô combien convoitée, et je confirmerai le thread en tant que résolu

titouille a écrit :

leftcontent
{
width: 405px;
float: left;
}
rightcontent
{
float: right;
}
footer
{
clear: both;
}

Attention n'oublie pas de rajouter le point "." ou le dièse "#" devant les noms des sélecteurs, parce que <leftcontent>, <rightcontent> et <footer> ne sont pas des balises existantes