Comment centrer un bloc dans un autre avec CSS
Publié : 19 déc. 2004, 12:00
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 ??!!??
J'ai potassé des bouquins et certains didacticiels du oueb... je bute sur ces 2 questions. Qui peut m'aider ?
Merci d'avance !...
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;
}
Merci d'avance !...