Discussion :

[supcomingenieur]

Bonjour,
suite à cette discussion, http://www.developpez.net/forums/d13...enu-deroulant/, et à partir du même fichier html et du même fichier css, j'ai ajouté un simple pied de page dans lequel j'ai mis le fameux copyrigth.
Je n'arrive pas à le mettre en centre de la page avec text-allign.
mon code CSS est le suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
div#footer:after {
    color: #fff;
    content: "Copyright © 2013 Orange Tunisia. All rights reserved.";
    bottom: 30px;
    position: absolute;
    text-align: right;
}

[rodolphebrd]

Pour centrer un Div il faut lui fixer une largeur et margin right et left en auto.
C'est une des bases à connaitre....

[NoSmoking]

Bonjour,
Comment centrer horizontalement n'importe quel élément en CSS ?
La lecture de la FAQ n'est jamais une perte de temps.

Je rajouterais, pas vu au premier abord, que le mettre dans un :after ne présente pas grand intérêt.

[Bovino]

Je n'arrive pas à le mettre en centre de la page avec text-allign.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

text-align: right;

Que dire...

mettre dans un :after ne présente pas grand intérêt.

Ben si en fait. L'intérêt, c'est de le mettre dans un pseudoélément de type inline pour lequel la notion de centrage est plutôt hasardeuse !

[rodolphebrd]

Ben si en fait. L'intérêt, c'est de le mettre dans un pseudoélément de type inline pour lequel la notion de centrage est plutôt hasardeuse !

Je ne comprends pas ta remarque, désolé

Centrer un pseudo-élément sans avoir recours au positionnement absolute: codepen

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#footer{
  width:500px;
  height:60px;
  background:salmon;
  text-align:center;
  line-height:60px;
 
}
#footer:after {
    color: #fff;
    content: "Copyright © 2013 Orange Tunisia. All rights reserved.";
 }

Je trouve cela inutile, alors que ça peut-être fait simplement, à moins que ce soit l'arbre qui cache la forêt.

Edit: correction d'une faute dans le css (suppression de bottom:30px, inutile)

[Bovino]

Ma remarque consistait juste à approuver la remarque de NoSmoking de façon ironique en insistant sur le fait que les pseudoéléments :after sont de type inline et qu'un text-align sur un élément inline n'a aucun sens.

D'ailleurs, dans ton exemple, c'est bien l'élément block conteneur qui définit le text-align et le :after n'a aucune utilité et devrait logiquement se trouver dans un span.

[rodolphebrd]

Ah, ok! Je suis arrivé avec mes gros sabots, sans finesse...

En y repensant, placer du texte (j'imagine un pavé) dans des pseudo-éléments doit être intéressant du côté du référencement...

[supcomingenieur]

Rebonjour,
J'ai eu du mal vous suivre car vous avez eu un long débat durant mon abscence.
Je me suis inspiré du tutoriel de ce forum pour centrer les div en CSS.

mon code actuel est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.footer{
  margin-left : auto;
  margin-right : auto;
  width : 600px;
  height:10px;
  color:#FF9900;
 
}

le copyrigt est bien au centre mais il est trop haut, je veux qu'il soit au fond.
j'ai essayé avec buttom et height en CSS mais aucune des solution ne donne un résultat.

[rodolphebrd]

Avez-vous bien vu l'exemple en ligne qui est effectué avec votre code...

Sinon, pourquoi ne pas placer une balise P (pour le copyright) dans votre footer

[supcomingenieur]

en fait j'ai fait quelque arrangement et je suis parvenu à régler le problème:
voila le code final:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.footer{
  margin-left : auto;
  margin-right : auto;
  width : 750px;
  position:absolute;
  bottom:30px;
  text-align: right;
  color:#FF9900;
}

Sinon je voulais me renseigner si je pouvais créer un effet en 3D du menu ave CSS.

[rodolphebrd]

Je ne comprends pas l'intérêt de la position absolute. C'est une solution de facilité qui peut vous nuire à terme.

[supcomingenieur]

Je sais et je ne suis pas convaincue non plus. Mais je viens de commencer avec CSS, je n'ai pas eu le temps de lire des tutoriel (ce n'est pas le but de mon stage). Donc je suis un peu présée donc je préfère tester des codes. Je trouve que c'est plus rapide d'apprendre de cette manière que de lire une dizaine de page de tutos. C'est vrai que c'est pas le meilleur moyen mais ça reste une solution.

[rodolphebrd]

Pensez à cliquer sur résolu...