centrage auto

Le
Une Bévue
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>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Une Bévue
Le #26335171
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
:

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
Le #26335180
Une Bévue
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
Le #26335188
Le 22/01/15 09:45, Otomatic a écrit :
Et, en ajoutant une largeur : width:100%


Oui, merci, c'est ce que j'ai fait.
SAM
Le #26335237
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
SAM
Le #26335236
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
Une Bévue
Le #26335250
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.
Une Bévue
Le #26335252
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 ?
SAM
Le #26335256
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
SAM
Le #26335255
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
Une Bévue
Le #26335265
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 ))
Publicité
Poster une réponse
Anonyme