Comment centrer un bloc dans un autre avec CSS

[Mirovinben]

Bonjour,

Je suis en train de reprendre la page d'accueil de mon site perso qui utilise actuellement des calques gérés par javascript (y en a même qui tiennent compte du navigateur utilisé !! oups !) ainsi que des tableaux imbriqués pour la mise en page...

Mon but est donc d'utiliser à fond les CSS et de me débarraser des tableaux... La révolution est en marche...

Quand la migration de cette page en "tout CSS" sera faite, le reste du site, qui utilise les mêmes méthodes, sera facile à transposer. Pour l'instant j'ai presque tout migré... Certains javascripts qui sont là pour masquer/afficher certains calques au passage de la souris devront sûrement rester. J'ai même pu éviter la detection du navigateur mais...

Je n'arrive pas à
-1- centrer verticalement du texte dans un <div> de hauteur fixe
-2- centrer horizontalement ma page dans la fenêtre du navigateur quelque soit sa taille...

C'était facile à faire avant de passer en "tout CSS".
Je précise que tous les <div> sont en "position: absolute;" sauf un qui contient tous les autres.

Pour le -1-
Pour l'instant, j'inclus dans certains de mes <div> un tableau à une seule cellule (qui a donc, par défaut le centrage vertical !... Ce n'est pas élégant mais ça fonctionne ! Une autre idée ?

Pour le -2-
Pour l'instant j'ai empaqueté tous mes <div> dans un <div> principal (class="AllDoc") qui est le seul positionné en relatif et j'ai paramétré les marges en "auto"... Ca gaze dans FF mais pas dans IE ??!!??

Code : Tout sélectionner

.AllDoc {
	width: 720px;
	height: 420px;
	position: relative;
	background-color:#FFFFFF;
	margin-left: auto;
	margin-right: auto;
}

J'ai potassé des bouquins et certains didacticiels du oueb... je bute sur ces 2 questions. Qui peut m'aider ?

Merci d'avance !...

[calimo]

Tu as déjà un exemple en ligne ?

-1- centrer verticalement du texte dans un <div> de hauteur fixe

Normal, ce n'est pas possible
À moins de mettre un display:table-cell; ou un truc comme ça qui ne marchera pas avec IE, on ne peut pas centrer verticalement le contenu d'un bloc

-2- centrer horizontalement ma page dans la fenêtre du navigateur quelque soit sa taille...

http://alsacreations.com/articles/centrer/

C'était facile à faire avant de passer en "tout CSS".

Avec les CSS, d'autres choses sont faciles à faire
Il faut juste ne pas vouloir faire "comme avec les tableaux", parce que c'est une illusion.

Je précise que tous les <div> sont en "position: absolute;" sauf un qui contient tous les autres.

Assez dangereux ça. Ça passe bien en changeant la résolution (p.ex avec la WebDeveloper Toolbar c'est le plus simple) ? Et en redimentionnant le texte ?

[Mirovinben]

http://alsacreations.com/articles/centrer/

Les grands esprits se rencontrent !.... Je voulais modifier mon Post pour signaler que j'avais trouvé la réponse à ma 2ème question. En effet je viens de faire la modif après être allé sur le site que tu indiques ! Et ça marche !...

Merci quand même pour ta rapidité et pour la pertinence de ta réponse...

Tu as déjà un exemple en ligne ?

Je ne mettrai en ligne (par annule et remplace de tout le site) que quand tout sera OK

[calimo]

Tu peux quand-même mettre quelques pages dans un répertoire "test" par exemple qu'on puisse dire ce qu'on en pense

[Mirovinben]

Tu peux quand-même mettre quelques pages dans un répertoire "test" par exemple qu'on puisse dire ce qu'on en pense

J'ai 4 types de pages différentes et je ne souhaite qu'un seul et unique fichier CSS joint à toutes ces pages. Après avoir travaillé sur ma page d'accueil, je suis en train de traiter une page type d'album-photo... Ce qui m'amène à reprendre, remanier, f..tre le souk, changer les noms de classes...etc... Donc le fichier CSS en ligne n'est pasterminé... Et tout cela demandera au final une optimisation (grouper certaines classes, virer les éventuels doublons... et toutes ces sortes de choses...)

En attendant, et à la demande générale , pour tester la future page d'accueil, cliquer ici...


Edit du 25/12/04 : le site a totalement été modifié et est en ligne depuis 10 minutes... Le lien ci-dessus a été modifié en conséquence et pointe à présent sur la vraie page d'accueil

[Mirovinben]

Salut à tou(te)s

Suite aux différents échanges parfois un peu rudes mais constructifs dans ce forum, je viens de finir la "migration" d'un de mes sites perso !... Sans modif "apparente" de la mise en page.

-1- mise en page par CSS externe (mais lecture pas terrible si les CSS sont invalidées !).
-2- prise en compte de la possibilité d'interdiction des javascripts avec une certaine dégradation de la navigabilité (mais comment faire autrement ?).
-3- sauf oubli, paramètres "alt" et "title" des <img> pris en compte.

Remarques :
-1- je n'ai pu éviter totalement les tableaux mais j'ai minimisé la faute de goût en n'utilisant qu'une seule cellule... Cellule destinée à centrer verticalement des textes de tailles variables dans des zones au format fixe.
-2- compte-tenu du type de site (photos sous forme d'albums à l'ancienne), il m'est difficile de prendre en compte une modification de la taille des polices de caractères... Si j'en ai le courage je tenterai ultérieurement une adaptation automatique en évitant les "px" au profit des "em"...

Votre avis technique ? Un regard extérieur me rendrait service ! Merci d'avance.

le lien ? : ici...