la structure simplifiée de la page :
<html>
<body>
<header>...</header>
<div id="page_recherche" class="page"></div>
<div id="page_pages" class="page">
<ul id="pages_ul" class="pages"></ul>
</div>
<div id="page_page" class="page"></div>
</body>
<html>
basiquement j'ai "trois pages" dans une seule : page_recherche,
page_pages et page_page.
une seule est visible à un temps donné.
je souhaite centrer ces pages dans le body avec :
margin: 0 auto;
la partie css concernée :
.page {
position: absolute; /* relative ne change pas le pb */
top: 52px;
left: 32px; /* si je commente cette ligne ".page" se
retrouve à gauche du body */
margin: 0 auto;
}
le body :
body {
margin: 0;
padding: 0;
width: 100%;
font: 100% verdana, arial, sans-serif;
}
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne
pas le résultat esconté.
même pb avec <ul id="pages_ul" class="pages"></ul>...
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne pas le résultat esconté. même pb avec <ul id="pages_ul" class="pages"></ul>...
Bon, je lis sur <http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html> :
Cas des éléments positionnés
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
je vais d'abord continuer à lire cette page...
Le 22/01/15 07:07, Une Bévue a écrit :
<snip />
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne
pas le résultat esconté.
même pb avec <ul id="pages_ul" class="pages"></ul>...
Bon, je lis sur
<http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html>
:
Cas des éléments positionnés
Pour les sites dont les éléments internes sont positionnés en "position:
absolute" ou "position: relative", la technique des marges latérales
automatiques ne fonctionne pas par défaut.
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne pas le résultat esconté. même pb avec <ul id="pages_ul" class="pages"></ul>...
Bon, je lis sur <http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html> :
Cas des éléments positionnés
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
je vais d'abord continuer à lire cette page...
Otomatic
Une Bévue écrivait :
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
Et, en ajoutant une largeur : width:100%
Une Bévue <unbewusst.sein@fai.invalid> écrivait :
Pour les sites dont les éléments internes sont positionnés en "position:
absolute" ou "position: relative", la technique des marges latérales
automatiques ne fonctionne pas par défaut.
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne pas le résultat esconté. même pb avec <ul id="pages_ul" class="pages"></ul>...
Mais ! ... Quel résultat est-il "escompté" ???
Si absolute ... pas de centrage ! c'est incompatible ! (puisque position *absolue*, inamovible, fixée)
Si relative ... pas de centrage par manque de précisions : là le bloc occupe toute la place horizontale libre, il n'y a donc rien à centrer Remède : ajouter/préciser une largeur pour ce bloc Astuce : lui mettre moins large que son conteneur ! ;-)
.page { width: 80%; margin: auto; padding: 52px 0 0 32px; /* sous toutes réserves */ }
hop!
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 22/01/15 07:07, Une Bévue a écrit :
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne
pas le résultat esconté.
même pb avec <ul id="pages_ul" class="pages"></ul>...
Mais ! ... Quel résultat est-il "escompté" ???
Si absolute ... pas de centrage ! c'est incompatible !
(puisque position *absolue*, inamovible, fixée)
Si relative ... pas de centrage par manque de précisions :
là le bloc occupe toute la place horizontale libre,
il n'y a donc rien à centrer
Remède : ajouter/préciser une largeur pour ce bloc
Astuce : lui mettre moins large que son conteneur ! ;-)
.page {
width: 80%;
margin: auto;
padding: 52px 0 0 32px; /* sous toutes réserves */
}
hop!
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
donc la question à 100 cents est : pourquoi "margin: 0 auto;" ne donne pas le résultat esconté. même pb avec <ul id="pages_ul" class="pages"></ul>...
Mais ! ... Quel résultat est-il "escompté" ???
Si absolute ... pas de centrage ! c'est incompatible ! (puisque position *absolue*, inamovible, fixée)
Si relative ... pas de centrage par manque de précisions : là le bloc occupe toute la place horizontale libre, il n'y a donc rien à centrer Remède : ajouter/préciser une largeur pour ce bloc Astuce : lui mettre moins large que son conteneur ! ;-)
.page { width: 80%; margin: auto; padding: 52px 0 0 32px; /* sous toutes réserves */ }
hop!
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le 22/01/15 08:47, Une Bévue a écrit :
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
je vais d'abord continuer à lire cette page...
Le mieux est de toujours commencer à faire des règles de styles minimalistes où on ne précise pas le positionnement des éléments
Après ... si ça ne fait pas exactement ce qu'on veut ... peut-être commencer à positionner.
Mais se dire et garder à l'esprit que si on rustine avec du positionnement c'est qu'on a cafouillé qque part en amont (architecture du html, règles css inappropriées)
Bien entendu, il y a des rendus où le positionnement est "obligé" (cf le post sur le rollover déporté pour un diaporama)
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 22/01/15 08:47, Une Bévue a écrit :
Pour les sites dont les éléments internes sont positionnés en "position:
absolute" ou "position: relative", la technique des marges latérales
automatiques ne fonctionne pas par défaut.
je vais d'abord continuer à lire cette page...
Le mieux est de toujours commencer à faire des règles de styles
minimalistes où on ne précise pas le positionnement des éléments
Après ... si ça ne fait pas exactement ce qu'on veut ... peut-être
commencer à positionner.
Mais se dire et garder à l'esprit que si on rustine avec du
positionnement c'est qu'on a cafouillé qque part en amont (architecture
du html, règles css inappropriées)
Bien entendu, il y a des rendus où le positionnement est "obligé" (cf le
post sur le rollover déporté pour un diaporama)
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.
je vais d'abord continuer à lire cette page...
Le mieux est de toujours commencer à faire des règles de styles minimalistes où on ne précise pas le positionnement des éléments
Après ... si ça ne fait pas exactement ce qu'on veut ... peut-être commencer à positionner.
Mais se dire et garder à l'esprit que si on rustine avec du positionnement c'est qu'on a cafouillé qque part en amont (architecture du html, règles css inappropriées)
Bien entendu, il y a des rendus où le positionnement est "obligé" (cf le post sur le rollover déporté pour un diaporama)
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le 22/01/15 15:29, SAM a écrit :
Le mieux est de toujours commencer à faire des règles de styles minimalistes où on ne précise pas le positionnement des éléments
Après ... si ça ne fait pas exactement ce qu'on veut ... peut-être commencer à positionner.
Mais se dire et garder à l'esprit que si on rustine avec du positionnement c'est qu'on a cafouillé qque part en amont (architecture du html, règles css inappropriées)
OUI, OUI, merci très bonne remarque, cordialement.
Le 22/01/15 15:29, SAM a écrit :
Le mieux est de toujours commencer à faire des règles de styles
minimalistes où on ne précise pas le positionnement des éléments
Après ... si ça ne fait pas exactement ce qu'on veut ... peut-être
commencer à positionner.
Mais se dire et garder à l'esprit que si on rustine avec du
positionnement c'est qu'on a cafouillé qque part en amont (architecture
du html, règles css inappropriées)
OUI, OUI, merci très bonne remarque, cordialement.
Le mieux est de toujours commencer à faire des règles de styles minimalistes où on ne précise pas le positionnement des éléments
Après ... si ça ne fait pas exactement ce qu'on veut ... peut-être commencer à positionner.
Mais se dire et garder à l'esprit que si on rustine avec du positionnement c'est qu'on a cafouillé qque part en amont (architecture du html, règles css inappropriées)
OUI, OUI, merci très bonne remarque, cordialement.
Une Bévue
Le 22/01/15 15:21, SAM a écrit :
Si absolute ... pas de centrage ! c'est incompatible ! (puisque position *absolue*, inamovible, fixée)
Oui, ça, j'ai pigé ;-)
Si relative ... pas de centrage par manque de précisions : là le bloc occupe toute la place horizontale libre, il n'y a donc rien à centrer
œuf corse !
Remède : ajouter/préciser une largeur pour ce bloc Astuce : lui mettre moins large que son conteneur ! ;-)
.page { width: 80%; margin: auto; padding: 52px 0 0 32px; /* sous toutes réserves */ }
hop!
euh je verrais plutôt :
.page { width: 80%; margin: 52px auto 0 auto; /* c'est licite pour centrer ? je veux dire à la place de : margin-top: 52px; margin-right: auto; margin-bottom: 0; margin-left: auto;
??? */ padding: <???>; }
avec ce "margin-top: 52px;" je suis juste en dessous du header qui fait 52px de haut ?
Le 22/01/15 15:21, SAM a écrit :
Si absolute ... pas de centrage ! c'est incompatible !
(puisque position *absolue*, inamovible, fixée)
Oui, ça, j'ai pigé ;-)
Si relative ... pas de centrage par manque de précisions :
là le bloc occupe toute la place horizontale libre,
il n'y a donc rien à centrer
œuf corse !
Remède : ajouter/préciser une largeur pour ce bloc
Astuce : lui mettre moins large que son conteneur ! ;-)
.page {
width: 80%;
margin: auto;
padding: 52px 0 0 32px; /* sous toutes réserves */
}
hop!
euh je verrais plutôt :
.page {
width: 80%;
margin: 52px auto 0 auto; /* c'est licite pour centrer ?
je veux dire à la place de :
margin-top: 52px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
???
*/
padding: <???>;
}
avec ce "margin-top: 52px;" je suis juste en dessous du header qui fait
52px de haut ?
Si absolute ... pas de centrage ! c'est incompatible ! (puisque position *absolue*, inamovible, fixée)
Oui, ça, j'ai pigé ;-)
Si relative ... pas de centrage par manque de précisions : là le bloc occupe toute la place horizontale libre, il n'y a donc rien à centrer
œuf corse !
Remède : ajouter/préciser une largeur pour ce bloc Astuce : lui mettre moins large que son conteneur ! ;-)
.page { width: 80%; margin: auto; padding: 52px 0 0 32px; /* sous toutes réserves */ }
hop!
euh je verrais plutôt :
.page { width: 80%; margin: 52px auto 0 auto; /* c'est licite pour centrer ? je veux dire à la place de : margin-top: 52px; margin-right: auto; margin-bottom: 0; margin-left: auto;
??? */ padding: <???>; }
avec ce "margin-top: 52px;" je suis juste en dessous du header qui fait 52px de haut ?
SAM
Le 22/01/15 17:28, Une Bévue a écrit :
Le 22/01/15 15:21, SAM a écrit :
Si absolute ... pas de centrage ! c'est incompatible ! (puisque position *absolue*, inamovible, fixée)
Oui, ça, j'ai pigé ;-)
Ha ? Ouf !
hop!
euh je verrais plutôt :
margin: 52px auto 0 auto; /* c'est licite pour centrer ? je veux dire à la place de :
oui, c'est juste parce que tu avais employé du padding
avec ce "margin-top: 52px;" je suis juste en dessous du header qui fait 52px de haut ?
Ben ... - si le div n'est pas positionné, - si son html est juste après celui du header normalement ... il devrait se mettre *tout seul* sous ce header peu importe si par la suite tu passes le header à 30px ou 300 px de haut
essayer toujours et au maximum de laisser faire les choses au plus simplement, suivant leurs penchants naturels
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 22/01/15 17:28, Une Bévue a écrit :
Le 22/01/15 15:21, SAM a écrit :
Si absolute ... pas de centrage ! c'est incompatible !
(puisque position *absolue*, inamovible, fixée)
Oui, ça, j'ai pigé ;-)
Ha ? Ouf !
hop!
euh je verrais plutôt :
margin: 52px auto 0 auto; /* c'est licite pour centrer ?
je veux dire à la place de :
oui, c'est juste parce que tu avais employé du padding
avec ce "margin-top: 52px;" je suis juste en dessous du header qui fait
52px de haut ?
Ben ...
- si le div n'est pas positionné,
- si son html est juste après celui du header
normalement ...
il devrait se mettre *tout seul* sous ce header
peu importe si par la suite tu passes le header à 30px ou 300 px de haut
essayer toujours et au maximum de laisser faire les choses au plus
simplement, suivant leurs penchants naturels
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Si absolute ... pas de centrage ! c'est incompatible ! (puisque position *absolue*, inamovible, fixée)
Oui, ça, j'ai pigé ;-)
Ha ? Ouf !
hop!
euh je verrais plutôt :
margin: 52px auto 0 auto; /* c'est licite pour centrer ? je veux dire à la place de :
oui, c'est juste parce que tu avais employé du padding
avec ce "margin-top: 52px;" je suis juste en dessous du header qui fait 52px de haut ?
Ben ... - si le div n'est pas positionné, - si son html est juste après celui du header normalement ... il devrait se mettre *tout seul* sous ce header peu importe si par la suite tu passes le header à 30px ou 300 px de haut
essayer toujours et au maximum de laisser faire les choses au plus simplement, suivant leurs penchants naturels
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le 22/01/15 17:28, Une Bévue a écrit :
margin: 52px auto 0 auto; /* c'est licite pour centrer ?
Je crois qu'on peut mettre :
margin: 52px auto 0;
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 22/01/15 17:28, Une Bévue a écrit :
margin: 52px auto 0 auto; /* c'est licite pour centrer ?
Je crois qu'on peut mettre :
margin: 52px auto 0;
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
margin: 52px auto 0 auto; /* c'est licite pour centrer ?
Je crois qu'on peut mettre :
margin: 52px auto 0;
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le 22/01/15 17:58, SAM a écrit :
Ben ... - si le div n'est pas positionné, - si son html est juste après celui du header normalement ... il devrait se mettre *tout seul* sous ce header peu importe si par la suite tu passes le header à 30px ou 300 px de haut
essayer toujours et au maximum de laisser faire les choses au plus simplement, suivant leurs penchants naturels
oui, oui, bien sûr, en fait, j'utilise un vieux css... à refaire ))
Le 22/01/15 17:58, SAM a écrit :
Ben ...
- si le div n'est pas positionné,
- si son html est juste après celui du header
normalement ...
il devrait se mettre *tout seul* sous ce header
peu importe si par la suite tu passes le header à 30px ou 300 px de haut
essayer toujours et au maximum de laisser faire les choses au plus
simplement, suivant leurs penchants naturels
oui, oui, bien sûr, en fait, j'utilise un vieux css...
à refaire ))
Ben ... - si le div n'est pas positionné, - si son html est juste après celui du header normalement ... il devrait se mettre *tout seul* sous ce header peu importe si par la suite tu passes le header à 30px ou 300 px de haut
essayer toujours et au maximum de laisser faire les choses au plus simplement, suivant leurs penchants naturels
oui, oui, bien sûr, en fait, j'utilise un vieux css... à refaire ))
