IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer un groupe de div en mode float


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre chevronné Avatar de electroremy
    Homme Profil pro
    Ingénieur sécurité
    Inscrit en
    Juin 2007
    Messages
    999
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ingénieur sécurité
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2007
    Messages : 999
    Par défaut Centrer un groupe de div en mode float
    Bonsoir,

    Suite à quelques recherches, j'ai trouvé une façon de faire qui correspond presque à ce que je veux; les DIV utilisent judicieusement l'espace en adoptant le bon nombre de colonnes.

    (Voir mon précédent sujet http://www.developpez.net/forums/d83...ent-efficaces/
    je cherchais à obtenir cette mise en page http://electroremy.free.fr/sonorama2009/part20.html sans utiliser de javascript)

    Mais je n'arrive pas à centrer l'ensemble des DIV.PIC, ce qui est très laid.

    Voici les codes :

    fichier html :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <HTML>
    <HEAD>
    <style type="text/css">
    @import url(style_p.css);
    </style>
    <TITLE>Vidéos</TITLE>
    </HEAD>
    <BODY>
    <div class="int">
    <div class="pic">boite 1</div>
    <div class="pic">boite 2</div>
    <div class="pic">boite 3</div>
    <div class="pic">boite 4</div>
    <div class="pic">boite 5</div>
    <div class="pic">boite 6</div>
    <div class="pic">boite 7</div>
    <div class="pic">boite 8</div>
    </div>
    </BODY>
    </HTML>
    fichier css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    div.pic {float: left;
    width: 250px;
    height: 180px;
    background: #ff9933;
    margin: 12px 12px 12px 12px;
    padding: 6px 6px 6px 6px;
    border-style: dashed;
    border-width: medium;
    border-color: green;
    text-align: center;
    vertical-align: middle;
    }
     
    div.int {margin-left: auto;
    margin-right: auto;
    margin-top: 4%;
    margin-bottom: 4%;
    text-align: center;
    }
    Comment faire ? Sachant que je ne peux connaitre le width à appliquer à div.int puisque cette valeur dépend de la taille de la fenêtre du navigateur du visiteur du site.

    Merci !

  2. #2
    Membre chevronné
    Profil pro
    Chef Gérant
    Inscrit en
    Octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2005
    Messages : 230
    Par défaut
    Bonjour,

    un display:float-inline; n'existe pas .
    Mais en regardant du coté de display:inline-block , il y a en théorie une solution.

    Cependant , IE6 et IE6 (en mode standard) ne peuvent pas l'appliquer , FF2 est dans ce cas aussi. Difficile de zapper IE6 et IE7 encore aujourd'hui.

    Si quelque acrobaties CSS ne te rebutes pas , au prix d'une modification de ta structure html (Pour FF2 en particulier) et un commentaire conditionnel , je te propose de regarder et tester ce gabarit : http://gcyrillus.free.fr/essai/float-center.html

    l'approche :
    1) display:inline-block; Pour les derniers navigateurs
    2) modification du haslayout pour IE7 et inf via les CC
    3) Usage d'une regle propriétaire instable pour ff2 et inf
    4) structure avec une imbrication supplementaire :
    - stabiliseen partie ff2
    - illusion du float right ou left .
    5) usage partiel du display façon table (alignement vertical).
    6) changement de la direction d'affichage (appliquer l'illusion d'un float)
    7) rétablissement du sens d'affichage du/des contenu(s)

    Ce type de code peut-etre difficile a maintenir ou a repassé a un collegue .
    Les block pourront se redimensionné en fonctions de leur contenu excepté dans IE7 par exemple ,
    dans le cas d'un site international : le sens d'affichage par défaut de la page peut aussi compliqué la tache .

    En final , si le display:inline-block est pertinent a la base ,
    les corrections et derniers réglages le sont beaucoup moins :
    Haslayout , display:table-cell (usage détourné) , direction:ltr / rtl ; (usage détourné) .

    Si cela semble une solution , ça l'est peut-être moins après réflexion .

    GC

Discussions similaires

  1. Div dans un float:right (IE 6 BUG)
    Par foobar42 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 26/04/2008, 18h45
  2. Centrer horizontalement un bloc div
    Par hellspawn_ludo dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 18/01/2008, 01h33
  3. centrer un site avec div +pos abosolute
    Par faamugol dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 03/12/2007, 07h23
  4. [CSS] centrer un cadre (avec <div></div>
    Par gailup dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 01/06/2006, 14h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo