IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer ma page dans la fenetre en CSS


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Décembre 2002
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2002
    Messages : 51
    Par défaut Centrer ma page dans la fenetre en CSS
    Bonjour à tous

    J'essaie depuis un bon moment d'arriver sans succès à centrer le contenu de ma page HTML dans la fenêtre de mon navigateur et ce malgré les indications retrouvées dans mes diverses recherches sur le Net.
    C'est pour cela que j'ai décidé de copier en intégralité le contenu de ma page sur un forum dans l'espoir que quelqu'un puisse m'aider à y arriver .

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    <html>
    <head>
    <title>01_home_Contenu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; >
    <!-- ImageReady Slices (01_home_Contenu.psd) -->
    <div margin:0 auto; width:766px; text-align:left;">
    	<div style="position:absolute; left:0px; top:0px; width:896px; height:115px;">
    		<img src="images/01_home_Contenu_01.gif" width="896" height="115" alt="">
    	</div>
    	<div style="position:absolute; left:896px; top:0px; width:4px; height:120px;">
    		<img src="images/top_bg.jpg" width="4" height="120" alt="">
    	</div>
    	<div style="position:absolute; left:0px; top:115px; width:67px; height:562px;">
    		<img src="images/01_home_Contenu_03.gif" width="67" height="562" alt="">
    	</div>
    	<div style="position:absolute; left:67px; top:115px; width:2px; height:264px;">
    		<img src="images/01_home_Contenu_04.gif" width="2" height="264" alt="">
    	</div>
    	<div style="position:absolute; left:69px; top:115px; width:768px; height:264px;">
    		<img src="images/01_home_Contenu_05.gif" width="768" height="264" alt="">
    	</div>
    	<div style="position:absolute; left:837px; top:115px; width:59px; height:562px;">
    		<img src="images/01_home_Contenu_06.gif" width="59" height="562" alt="">
    	</div>
    	<div style="position:absolute; left:896px; top:120px; width:4px; height:557px;">
    		<img src="images/01_home_Contenu_07.jpg" width="4" height="557" alt="">
    	</div>
    	<div style="position:absolute; left:67px; top:379px; width:2px; height:242px;">
    		<img src="images/01_home_Contenu_08.gif" width="2" height="242" alt="">
    	</div>
    	<div style="position:absolute; left:69px; top:379px; width:768px; height:242px;">
    		<img src="images/01_home_Contenu_09.gif" width="768" height="242" alt="">
    	</div>
    	<div style="position:absolute; left:67px; top:621px; width:770px; height:1px;">
    		<img src="images/01_home_Contenu_10.gif" width="770" height="1" alt="">
    	</div>
    	<div style="position:absolute; left:67px; top:622px; width:763px; height:55px;">
    		<img src="images/01_home_Contenu_11.gif" width="763" height="55" alt="">
    	</div>
    	<div style="position:absolute; left:830px; top:622px; width:7px; height:55px;">
    		<img src="images/01_home_Contenu_12.gif" width="7" height="55" alt="">
    	</div>
    </div>
    <!-- End ImageReady Slices -->
    </body>
    </html>

    Je vous remercie d'avance

    Cordialement

  2. #2
    Membre du Club
    Étudiant
    Inscrit en
    Août 2008
    Messages
    11
    Détails du profil
    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2008
    Messages : 11
    Par défaut
    Bonjour,

    Je te conseillerai tout d'abord de disocier ton code HTML de ton code CSS (fais deux fichiers).

    Ensuite, dans ton fichier CSS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    body
    {
    width:950px; // la taille que tu veux
    margin:auto;
    }

  3. #3
    Membre expérimenté Avatar de romain_ci
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    262
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 262
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    #TonConteneur {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: XXXpx;
        height:XXXpx;
    }


    PS : Pourquoi tu ne met pas ton css dans un fichier a part. car la tu n'est pas valide w3c

  4. #4
    Membre confirmé
    Inscrit en
    Décembre 2002
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2002
    Messages : 51
    Par défaut
    J'ai essayé ta suggestion mais cela n'a rien changé malheureusement;
    la page reste toujours bloqué a gauche de l'ecran

  5. #5
    Membre expérimenté Avatar de romain_ci
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    262
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 262
    Par défaut
    Citation Envoyé par mfofana Voir le message
    J'ai essayé ta suggestion mais cela n'a rien changé malheureusement;
    la page reste toujours bloqué a gauche de l'ecran
    La mienne ou celle de seby2027 ??

  6. #6
    Membre expérimenté Avatar de Damouille
    Inscrit en
    Avril 2006
    Messages
    268
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 268
    Par défaut
    Bonjour,
    En fait, Romain et seby utilsent la meme technique qui constitue à fixer une "width" et un margin: auto

    C'est la meilleure technique mais elle ne marche pas avec tous les doctype (surtout avec ie je crois).

    mfofana, ton document ne contient pas de doctype. Utilise un doctype recent et les solutions proposées devrait fonctionner.

  7. #7
    Membre confirmé
    Inscrit en
    Décembre 2002
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2002
    Messages : 51
    Par défaut
    C'est celle de seby2027 qui ne marche pas
    Je vais essayer le tien et te tenir au courant

  8. #8
    Membre confirmé
    Inscrit en
    Décembre 2002
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2002
    Messages : 51
    Par défaut
    STP pourrais-tu m'aider à trouver le Doctype adéquat à mon code HTML ; j'ai essayé le HTML4 et XHTML1 pour le moment et cela m'a généré des erreurs à la validation.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Centrer un gridLayout dans une fenetre plein ecran
    Par jm49 dans le forum SWT/JFace
    Réponses: 2
    Dernier message: 19/03/2009, 14h29
  2. centrer mes pages dans mon design
    Par speedylol dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 25/10/2007, 19h09
  3. Centrer une page dans la fenêtre
    Par Gillumine dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/04/2007, 15h57
  4. Centrer la page dans le design
    Par speedylol dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 07/11/2006, 13h53
  5. Comment ouvrir une nouvelle page dans la fenetre courante ?
    Par Stbaurl dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 15/12/2005, 11h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo