Forums Développement Multimédia

Aller au contenu

Float et largeur de conteneur

CODE HTML CSS

11 réponses à ce sujet

#1 viv54

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 84 messages

Posté 02 January 2012 - 15:18 PM

hello! J'ai un petit souci avec float. Quand on met une serie de div en float dans un conteneur et que celui-ci n'est pas assez large pour tous les mettre sur une ligne, le conteneur a la facheuse tendance à prendre toute la largeur disponible. Ce qui est problematique lorsque l'on veut encadrer d'un border les div positionnées en float.

Sur cet exemple, la largeur du conteneur (avec la bordure rouge) permet de contenir tous les div sur 1 ligne :
Image IPB


Là par contre la largeur ne permet pas de tous les mettre sur une ligne, le dernier div passe à la ligne mais le conteneur reste à sa largeur max donc pas tres beau (c'est float right dans ce cas) :
Image IPB

Est-ce que quelqu'un aurait une piste pour que le conteneur s'adapte toujours au nombre de div par ligne peu importe le nombre de lignes ? merci

#2 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 02 January 2012 - 15:23 PM

Je dirai que ça dépend du contexte.

Est-ce que ton conteneur peut avoir une largeur fixe ?
Est-ce que tes carrés ont tous la même largeur ?
Est-ce que c'est cette bande rouge que tu veux vraiment faire ?

Car on peut aussi faire un bluff visuel, ça dépend du rendu final que tu veux et si c'est fluide ou non.

#3 viv54

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 84 messages

Posté 02 January 2012 - 15:44 PM

alors:
- non le conteneur a une largeur variable (dépend de la fenêtre du navigateur)
- les carrés font tous la même largeur (et hauteur)
- et oui je veux faire une bordure (peut-etre pas rouge mais un trait en tout cas)

apres pour la fuidité tout le reste du site est tres fluide, donc je peux peut-etre me permettre une petite fantaisie là-dessus :)

tu as quelques idées? de mon côté je suis en train de regarder pour utiliser du js.

#4 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 02 January 2012 - 15:54 PM

La première idée, peut-être la plus simple, c'est d'utiliser le CSS conditionnel à la largeur de ta page (donc du navigateur). Genre :


@media (max-width: 800px) {
    .container {
        width: 740px;
    }
}
 

Et tu en fais pour toutes les largeurs possibles. C'est répétitif, mais je pense que ça marche bien et c'est facile à comprendre.


Une autre idée : si ton conteneur est en inline-block, il va prendre la largeur du contenant. Voilà un exemple : http://jsfiddle.net/ALZf8/
Maintenant, une autre question : quelles navigateurs tu veux supporter ?


Evidemment, on va essayer d'éviter un maximum le JS

#5 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 02 January 2012 - 16:04 PM

je me suis trompé pour le inline-block, j'aurai dû mieux tester.
Je réfléchis à autre chose

#6 viv54

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 84 messages

Posté 02 January 2012 - 16:05 PM

j'aime bien l'idée du css conditionnel, un poil fastidieux, mais ça me plait bien :)

pour ce qui est du inline-block, je ne suis pas sûr.... le conteneur s'adapte bien aux div qu'il contient jusqu'au moment où ça passe sur 2 lignes, là il prend toute la place qu'il peut. Mon probleme c'est vraiment quand les box passent sur plusieurs lignes... je n'avais pas vu ta réponse.

Quand aux navigateurs, mon site va surtout s'adresser à des macs donc plutot safari chrome et firefox, tant pis pour ie, et si c'est en css3 ça ne pose pas de probleme :)

Modifié par viv54, 02 January 2012 - 16:05 PM.


#7 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 02 January 2012 - 16:22 PM

bon, je ne vois pas d'autres solutions pour l'instant.

mais apparement, la première te satisfait :)

#8 viv54

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 84 messages

Posté 02 January 2012 - 16:35 PM

oui merci! apres si quelqu'un a une solution un peu plus optimisée, je suis aussi preneur :)

#9 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 02 January 2012 - 17:00 PM

Voilà une autre idée, mais c'est tordu et limité : http://jsfiddle.net/fSz5r/

#10 viv54

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 84 messages

Posté 02 January 2012 - 17:11 PM

c'est vraiment cool, pourquoi c'est tordu et limité?

Par contre j'avais dans l'idée de mettre une bordure aussi en dessous des box et à priori last-line ne semble pas exister :)

#11 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 02 January 2012 - 17:15 PM

Parce que quand on utilise :first-line, c'est pour du texte. Et l'astuce pour que ça passe au dessus des carrés, c'est un margin-top qui s'applique tous les carrés.
Ensuite, tout dépend de l'effet souhaité, c'est peut-être suffisant.

Bref, je préfère quand même la première idée.

#12 viv54

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 84 messages

Posté 02 January 2012 - 17:23 PM

effectivement après l'avoir un peu trituré je commence à percevoir les limites... pour mon projet ça ne va pas le faire, ta première solution me semble mieux adaptée, je vais pouvoir gérer plus finement la largeur du conteneur. En tout cas j'aurai appris un truc aujourd'hui :) je le met dans un coin de ma tête ça pourra peut-etre m'être utile un jour.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP