Webdesign Fluid et div inline...

....
...


.....

...
Modifié par H.I.M (26 May 2013 - 09:41)

Salut,

C'est quelle div que tu souhaiterai mettre l'un à la suite de l'autre ? Car ici je vois que tu as mis la valeur inline-block seulement pour ton div .book hors il n'y en à que un donc je vois mal après quoi il pourrait se mettre (ton div .menu étant de type bloc). C'est donc normal que rien ne bouge sur ta page.

Par contre si c'est les éléments à l'intérieur du div .book que tu souhaiterai mettre en inline-block il faudrait mettre dans ce cas :

.book div {
display: inline-block;
width: unelargeur;
vertical-align: top;
}

Sinon tu peux apporter plus de précisions où isoler la portion de code dont tu parles ?

Merci pour ta réponse,
Comme ça ne fonctionne pas j'aide testé avec un width de 50px sur chaque div pour voir si c'est pas un problème lié à la largeur... Et BINGO le problème n'est pas que mes div ne s'alignent pas mais que les div passent a la ligne car trop larges...


Conclusion le problème ne viens pas du inline bloc mais plutôt du fait que les div passe à la ligne car trop large pour ma fenêtre.. Cependant je ne veux pas ça, je veux un scroll sur la largeur...
Modifié par H.I.M (19 Feb 2012 - 14:36)

white-space: nowrap

Sur le conteneur me semble indiqué pour éviter le retour à la ligne (à condition que les enfants soient bien en inline-block)

ça ne fonctionne pas.

J'ai aussi testé avec un overflow: auto mais même résultat


EDIT : J'ai mis le white-space: nowrap sur mon body et la ça fonctionne !!!!!!!! COOL
Modifié par H.I.M (19 Feb 2012 - 15:19)

Je précise à tout hasard que si on déclare un white-space:nowrap sur un conteneur, on a tout intérêt à déclarer un white-space:normal sur ses enfants ou descendants destinés à afficher du texte.

Un exemple fictif:

#conteneur {
  white-space: nowrap;
  }
#conteneur > * {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  max-width: 300px; /* La largeur est limitée à 300px, et peut
    être inférieure si le contenu (image, texte) est plus court. */
  }

Merci pour cette précision.