28172 sujets

CSS et mise en forme, CSS3

Aligner, center éléments en float

Bonjour,

J'ai une question, je sais pas si c'est possible de le faire en css.

J'ai ce code html:


<div id="container">
    <div class="control">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
</div>


Et ce code css:


#container {
    width: 600px;
    height: 400px;
    position: relative;
}

.control {
    position: absolute;
    bottom: 0;
    left: 0;
}

.control a {
    display: block;
    width: 30px;
    height: 30px;
}


J'aimerais center ma div .control au milieu de ma div #container, mais en sachant que la div .control peut être plus grande ou plus petite (si à plus de "control")

En gros pour aligner, j'ai le choix entre text-align et margin, mais je ne vois comment els appliqué pour center cette div.

Quelqu'un à une idée de comment faire? ou déjà est-ce possible?

Merci
Bonjour,

Oui, c'est tout à fait possible! Smiley smile

Si tu n'as pas besoin ailleurs de la class control, je te conseillerais de remplacer class par id.
Puis :
#control {
width: (à définir en px ou %);
margin: 0 auto;
}


De cette manière, ton div control viendra se centrer par rapport au div container Smiley cligne
Bonjour,

Merci pour la réponse, mais je ne peux pas mettre de taille fixe à ma div control, parce la taille varie suivant les pages...c'est bien à cause de ça que j'ai ce problème...
bonjour,

via display c'est possible.
#container { 
text-align:center;
} 
 
.control { 
display:inline-block;/* ou table + margin:auto;*/
/* ajouter en cc pour IE lte 7 display:inline;zoom:1;*/
} 
 
.control a { 
    display: inline-block; /* ou float */
    width: 30px; 
    height: 30px; 
}


en fait plusieurs soluces existent, la difficulté serait plutôt de choisir celle qui te convient le mieux:
quelques exemple: http://yidille.free.fr/plux/valign/?52-menu-centre-technique-de-base-et-avancees
cordialement Smiley smile
Il me faut une solution qui soit compatible IE7, pas besoin pour IE6

display: inline-block n'est pas compatible IE7? c'est que depuis IE8?
Ca existe des commentaires conditionnelles à mettre dans les feuilles css?
Blogger a écrit :
Il me faut une solution qui soit compatible IE7, pas besoin pour IE6

display: inline-block n'est pas compatible IE7? c'est que depuis IE8?
Ca existe des commentaires conditionnelles à mettre dans les feuilles css?


inline-block modifie le layout dans IE7 et moins sans toutefois conferer aux element de type block par defaut un comportement de type inline.

Oui les commentaires conditionnel sont obligatoires pour ie7 (et moins car ie7 herite de ce comportement des versions antérieurs).

Les commentaires conditionnels servent a cibler les differentes version de IE, don aucun soucis pour IE7 et moins.

teste et regarde le source de : http://gcyrillus.free.fr/essai/menu-centrer-differentes-technique.html dans ie 7 (et 6 ) ou en mode quirk. Les commentaires conditionnelles sont efficaces.
<!--[ if lte ie 7 ]>
<style>
/* alternative pour  inline-block des elements de type block par defaut */
.control {zoom:1;display:inline!important;}
</style>
<![ endif ]-->
Ce que je voulais dire, c'est que: est-ce qu'on peut mettre des commentaires conditionnelles dans les fichiers css directement? exemple:

.madiv {
    font-size: 1em;
}

<!--[ if lte ie 7 ]> 
.madiv {
    font-size: 1.2em
}
<![ endif ]-->


Ou alors c'est que dans le html, comme le montre l'exemple du site?

Merci
les commentaires 
<!-- -->
sont une syntaxe html, on peut y inserer une condition que seul IE saura comprendre, pour les autres c'est du commentaire:
[ if ie]> <![ endif ]
.
dans cette condition , tu peut y inserer des balise html ( <div>, <script>, <style>, <link>, ... )

GC
Bonjour,

Ou tu peux utiliser une div qui englobe tout ton html


<body>
<!--[ if lte ie 7 ]><div class="IE67"><![ endif ]-->

<div id="monsite">blah blah....</div>

<!--[ if lte ie 7 ]></div><![ endif ]-->
</body>


Et en css : 


.control { display:inline-block; }
.IE67 .control {zoom:1;display:inline!important;}
Sujet clos
Aller à