Cacher ce qui déplace sans retour a la ligne

Bonjour, dans le cadre d'un portfolio perso, je voudrai que les images restent comme dans l'exemple ici : Donc sans retour a la ligne, en fait les images sont sur la même ligne et sont cachées.

Cependant pour arriver à ça j'ai mis une énorme largeur à la div pour pas qu'il y est de retour a la ligne..

ça marche me direz vous mais je dois calculer combien mettre de largeur et c'est énérvant, de plus j'ai plusieurs catégories donc je devrai faire une feuille css pour chacune et ce n'ai pas super..

Voici la question:
Comment puis-je faire pour que la div s'adapte au nombre d'images sans avoir de retour a la ligne ?


merci
Modifié par popomme (05 Jun 2010 - 16:35)

Salut !

Personnellement, ce que je ferais c'est remplacer ton style css de #photos et #photos li par ceci :

#photos {
     margin-top:30px;
     white-space:nowrap;
}
#photos li {
     display:inline;
     list-style-type:none;
     margin-right:2px;
}

En gros, tu change ta liste pour que les éléments se trouvent les uns à coté des autres en supprimant le float left et remplaçant display bloc par display inline. Là dessus tu empêches les espaces de créer des retour à la ligne via white-space:nowrap, enfin tu places ta marge supérieure dans l'ensemble du bloc et pas pour chaque élément de ta liste.

Et voilà


Très belles photos au passage.
Modifié par pixelb (03 Jun 2010 - 17:07)

merci beaucoup !
Je vais tester ça



edit: voilà j'ai mis ce que tu m'a donné et ça fonctionne impéc !
mille merci !!

Cependant j'ai un plus gros écart entre les photos malgré le fait que j'ai supprimer le margin-right.. comment cela ce fait-il ?

Et sinon comment enlever le texte en "gras" quand on passe le curseur sur les sections du menu ?
Modifié par popomme (03 Jun 2010 - 17:23)