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 :

DIV en css - Positionnement incorrect


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Par défaut DIV en css - Positionnement incorrect
    Bonjour à tous,

    J'ai pris un modèle sur la manière de concevoir un site.

    Voilà mon prb :
    Le css m'a grandement servi mais, eh oui ! y a un mais, j'ai rajouté 2 div (pour la pageinfos (vous êtes ici >...) et pour un autre menu) et ce dernier qui me pose prb.

    Je mets les codes et la capture, ce sera mieux pour que vous y voyiez plus clair.
    Dans cette capture, la suite de lettre sera le menu pour les liens internes.
    Vous constaterez que je n'arrive pas à prendre la largeur de l'écran sous le header (dans le css : width: 95%; ou même width: auto; c'est pareil, no good !)
    Code Html :
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Mon super site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="" href="css/main.css" /> 
    <!--
    <style type="text/css">
    </style>
    -->
    </head>
     
    <body>
     
    <!-- debut pageinfos -->
    <div id="pageinfos">
    <?php include("css/pageinfos/pageinfos.html"); ?>
    <!-- fin pageinfos -->
    </div>
     
    <!-- debut header -->
    <div id="header">
    <?php include("header.html"); ?>
    <!-- debut header -->
    </div>
     
    <!-- debut menu -->
    <div id="menu">
    <?php include("menu.html"); ?>
    <!-- debut menu -->
    </div>
     
     
    <!-- debut menu -->
    <div id="menug">
    <?php include("menug.html"); ?>
    <!-- fin menu -->
     </div>
     
    <!-- debut contenu principal -->
    <div id="conteneur">
    			<?php
    			    if (isset($_GET["page"])) $page = $_GET["page"];
    			    else $page = 0; // par défaut intro.php
     
    			    switch ($page) {
    			        case 0  : include("./accueil.html"); break;
    			        case 1  : include("./page1.html"); break; 
    			        case 2  : include("./page2.html"); break;
    			        case 3  : include("./page3.html"); break; 
    			        case 4  : include("./page4.html"); break;
    			        case 5  : include("./page5.html"); break; 
    			    }
    			?>    
    <!-- fin contenu principal -->
     </div>
     
    <!-- debut footer -->
    <div id="footer">
    <?php include("footer.html"); ?>
    <!-- fin footer -->
    </div>
     
     
    </body>
    </html>
    Code Css :
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    @charset "iso-8859-1";
    /************************************/
    * { 
      font-family: Verdana, Garamont, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #000000;
    }  
    /************************************/
    body{
       width: 95%;
       margin: auto;
       margin-top: 0px;
       margin-bottom: 0px;   
       background-image: url("../images/fond5.png");
    }
    /************************************/
    #pageinfos{
       background-color: #ffffff;
       color: #000000;
       margin-bottom: 0px;   
       padding-left: 10px;
       height: 15px;
    }   
    /************************************/
    #header{
       width: auto;
       height: 100px;
       background-image: url("../images/banniere.jpg");
       background-repeat: no-repeat;
       margin-top: 0px;
       margin-bottom: 0px;
    }
    /********* C'est ici que ça va pas ***************************/
    #menu{
       float: left;
       width: 95%;
       height: auto;
       position: relative;
       margin-top: 0px;
       background-color: cyan;
    }
    /************************************/
    #menug{
       float: left;
       width: 140px;
       background-color: transparent;
       margin-top: 5em;
       margin-left: 0em;
    }
    .element_menu{
       background-color: #FFFFFF;
       background-image: url("../images/motif.png");
       background-repeat: repeat-x;
       border: 1px solid black;
       margin-bottom: 20px;
    }
    /* Quelques effets sur les menus */
    .element_menu h3{   
       color: #B3B3B3;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }
    .element_menu ul{
       list-style-image: url("../images/puce.png");
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    }
    .element_menu a{
       color: #B3B3B3;
    }
    .element_menu a:hover{
       background-color: #B3B3B3;
       color: black;
    }
    /************************************/
    #conteneur{
       margin-left: 120px;
       margin-bottom: 0px;
       margin-top: 5em;
       padding: 5px;
       color: #000000;
       background-color: #ffffff;
       border: 1px solid black;
    }
    #conteneur h1{
       color: #000000;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       font-size: 160%;
    }
    #conteneur h2{
       height: 30px;
       padding-left: 30px;
       color: #000000;
       font-size: 120%;
       text-align: left;
    }
    /************************************/
    #footer{
       padding: 5px;
       margin-top: 15em;
       text-align: center;
       color: #ffffff;
       background-color: #FFFFFF;
       background-repeat: repeat-x;
       border: 2px solid black;
    }
    /************************************/
    Si vous pouviez me dire le pourquoi du comment, ce serait bien, parce que là, j'ai du mal à voir ce problème.

    Comme c'est là, voilà ce que ça donne:


    Si vous voulez voir le site complet c'est ici.

    Ne me laissez pas en rade SVP !

    Merci d'avance.

    Cordialement, QI9859

  2. #2
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    Pour commencer il faut revoir les marges :
    #conteneur{
    margin-left: 120px;/*laisse 120px gauche*/

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Par défaut
    Citation Envoyé par Dan_A
    Pour commencer il faut revoir les marges :
    #conteneur{
    margin-left: 120px;/*laisse 120px gauche*/
    Merci pour ta réponse mais c'est toujours pareil.

  4. #4
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    Je ne sais pas si nous parlons de la même chose. Il fallait mettre margin-left:0; .
    Ceci dit, avant toute tentative de débogage, il ne faut qu'un doctype par page, changer de Doctype (XHTML 1.0 ou HTML 4.01) et valider l'HTML.
    Il faut ensuite contrôler les "margin" et "padding" soit à l'aide d'un reset global ( http://www.search-this.com/2007/03/1...rgin-for-error / http://kurafire.net/log/archive/2005...-css-revisited) soit pour chaque élément.
    En cas de problème il sera plus facile de donner une réponse.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Par défaut
    Citation Envoyé par Dan_A
    Je ne sais pas si nous parlons de la même chose. Il fallait mettre margin-left:0; .
    Ceci dit, avant toute tentative de débogage, il ne faut qu'un doctype par page, changer de Doctype (XHTML 1.0 ou HTML 4.01) et valider l'HTML.
    Il faut ensuite contrôler les "margin" et "padding" soit à l'aide d'un reset global ( http://www.search-this.com/2007/03/1...rgin-for-error / http://kurafire.net/log/archive/2005...-css-revisited) soit pour chaque élément.
    En cas de problème il sera plus facile de donner une réponse.
    J'ai fait un teste sur la page d'accueil (accueil.html), qui ne contient aucun code php, je n'ai pas eu d'erreurs.
    Par contre, avec le fichier "index.php", là j'en ai eu plein. Tu l'as vu par toi-même en faisant la validation.
    Validateur avec "accueil.html" http://www.test.jlb59.fr/images/valid_html.jpg
    Validateur avec "index.php" http://www.test.jlb59.fr/images/valid_php.jpg

    Alors comment veux-tu que je m'y retrouve surtout que les en-têtes sont identiques.

    Maintenant, avec le php, qui ne contient que des "include", il est possible que le validateur prenne en compte les fichiers appelés, va savoir !...
    Grrrr !

    Je n'ai pas trouvé de sites qui référençait les bonnes syntaxtes ou bien c'est en anglais.
    J'ai vu des Doctypes et encore, y en avait tellement que je ne savais pas quel choisir.

    Pour plus d'infos, cela servira peut-être, c'est l'adresse du valideur en FR http://yansanmo.no-ip.org/ysm-validator/check.php
    ceux que tu as eu la gentillesse de me donner sont en anglais, et moi ce n'est pas mon fort.

    Avec ce lien, il sera plus juste de le mettre parmi ceux que tu m'as donnés, au cas où il y aurait des gens qui ne sont pas à l'aide avec l'anglais, comme moi...

    Quoiqu'il en soit, j'ai refait le css en mettant le menu imbriqué avec le header.

    C'est un peu mieux mais pas exactement ça. J'en viendrais à bout à force, hein !

    Merci.

    QI9859

  6. #6
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    l'adresse du valideur en FR
    C'est une adresse que je note. Je n'ai que des références en anglais et je ne lis jamais d'article dans une autre langue.
    Je n'ai pas trouvé de sites qui référençait les bonnes syntaxes ou bien c'est en anglais.
    Les Doctype qui marchent avec tous les navigateurs modernes :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Il faut que le doctype soit la première ligne et il faut donc retirer le prologue xml de la page.
    Maintenant, avec le php, qui ne contient que des "include", il est possible que le validateur prenne en compte les fichiers appelés,
    Le validateur prend en compte ce qui est envoyé par le serveur et ce que reçoit le navigateur.
    J'en viendrais à bout à force, hein !
    C'est sûr !

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

Discussions similaires

  1. [CSS]positionnement dans une div
    Par graphicsxp dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 10/07/2006, 11h01
  2. [CSS]positionnement a l'ecran d'un "div"
    Par Draganthyr dans le forum Mise en page CSS
    Réponses: 13
    Dernier message: 01/06/2006, 16h15
  3. [CSS] Positionner 2 tableaux dans une div
    Par Rei Itchido dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 12/05/2006, 18h27
  4. [HTML & CSS] Positionnement DIV
    Par Yoshidu62 dans le forum Mise en page CSS
    Réponses: 38
    Dernier message: 26/04/2006, 17h14
  5. [CSS]Positionnement des blocs <div> + pb selon navigat
    Par Trunks dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 07/12/2005, 10h56

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