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

HTML Discussion :

[HTML] Faire comme la plupart des sites !


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de nimois3O
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut [HTML] Faire comme la plupart des sites !
    Bonjour,

    J'aimerais savoir comment on fait pour que mon site soit center avec une marge a droite et gauche ? comme ce site

    Merci

  2. #2
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    2 solutions

    1. Code html : 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
       
      <html>
      <head>
      <title></title>
      <style type="text/css">
      <!--
      .divCentre{
       margin: auto;
       height: 200px;
       width: 200px;
       border: 1px solid #AAAAAA;
      }
       
      //-->
      </style>
       
      </head>
       
      <body>
      <div class="divCentre">
      ceci est un test
      </div>
       
       
      </body>
       
      </html>
      seul problème, IE ne reconnait pas le style
    2. Autre solution
      Code html : 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
       
      <html>
      <head>
      <title></title>
      <style type="text/css">
      <!--
      .divCentre{
       margin-left: 20%;
       margin-right: 20%;
       margin-top: 0px;
       margin-bottom: 0px;
       border: 1px solid #AAAAAA;
       height: 200px;
      }
       
      //-->
      </style>
       
      </head>
       
      <body>
      <div class="divCentre">
      ceci est un test
      </div>
       
      </body>
      Tu peux définir les marges en pixel également

  3. #3
    Membre confirmé Avatar de nimois3O
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    Bonjour,

    Dans la seconde solution IE et Firefox reconaissent ?

    Merci

  4. #4
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par nimois3O
    Bonjour,

    Dans la seconde solution IE et Firefox reconaissent ?

    Merci
    teste le code et tu verras bien...

  5. #5
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par Auteur
    seul problème, IE ne reconnait pas le style margin: auto
    En mode standard, soit sur IE6 et IE7 avec un doctype complet et correctement renseigné tout en haut de la page, IE interprète correctement le margin:auto.

    Après, si le centrage est vraiment voulu pour les versions inférieures d'IE, on peut toujours ajouter un text-align:center sur le body puis rétablir le centrage à left sur le div centré.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  6. #6
    Membre confirmé Avatar de nimois3O
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    J'ai pris la "seconde solution" ça marche bien sur IE...

    J'ai juste un autre "probléme" c'est qhe quand je change de couleur pour qye ma couleur des coté soit différente de la couleur du centre... au centre seul un rectangle change de couleur...

    Merci de vos réactions

  7. #7
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    tu peux nous montrer ton code (HTML + CSS)

  8. #8
    Membre confirmé Avatar de nimois3O
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    Je suppose que le probléme se situe du fait que je mets les balise au movais endroit...

    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
    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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     
    <html>
    <head>
    <title>Acceuil</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="HAPedit 3.1">
    </head>
     
    <body bgcolor ="#000000" text="#fffff">
    <center><img src="titre.png"></center>
     <style type="text/css">
       @import "page.css";
    </style>
    <div class="divCentre">
     
    <br>
     <!--.............DEBUT MENU................-->
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Language" content="fr" />
        <meta name="Robots" content="follow" />
        <meta name="MSSmartTagsPreventParsing" content="TRUE" />
     
    <!-- script du menu -->
    <script type="text/javascript" src="dynMenu.js"></script>
     <!-- détéction du navigateur -->
    <script type="text/javascript" src="browserdetect.js"></script>
     
    <!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
    <style type="text/css">
        @import "menu.css";
    </style>
     
    </head><body>
     
     
    <!-- liste imbriquée de liens qui fera office de menu -->
    <ul id="menu">
        <li><a href="page.htm">Accueil</a>
        </li>
     
        <li><a href="filmalaffiche.htm" >A l'affiche</a>
        </li>
     
        <li><a href="touslesfilms.htm" >Tous les films</a>
               <ul>
     
                   <li><a href="cochonou.htm">Cochonou</a></li>
                          <ul>
     
     
                         </ul>
     
                  <li><a href="pq.htm">PQ</a>
                                </li>
                      </li>
                 </ul>
     
        <li><a href="quisommesnous.htm">Qui sommes nous ?</a>
        </li>
     
        <li><a href="contact.htm">Contatct</a>
        </li>
    </ul>
     
    <script type="text/javascript">
        initMenu();
    </script>
     
    <!--.............FIN MENU................-->
    <br><br><br><br>
     
     <!-- Modifier le style -->
    <center><span ID="texte" style="font-size:24pt;font-family:arial;"></span>
    </center>
    <br>
     
    <br>
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="page.css" />
    <FONT FACE="monospace " SIZE="3" /FONT>
    <div class="titre">
    Presentation
    </div>
    <br>
     
    <center>Cet espace a été crée pour présenter les films du duo de Poubelle Production.
    <br><br><br>
     
    <div style="text-align:justify;">
    La méthode utilisé pour chaque film consiste à utiliser le même principe que les dessins animés : filmer une scène image par image en déplaçant légèrement des objets entre deux images pour qu’à la projection le spectateur ait l’illusion que ces objets bougent par eux-même. Les décors, les musiques et les voix ont été réalisées artisanalement, les noms des personnes ayant participé aux differents films sont cités dans les génériques.
    </div>
    </div>
    </center>
    </body>
    </html>
    CSS page
    Code CSS : 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
    /* ------------------------------------ *
     CSS
     mardi 3 avril 2007 17:42:09
     HAPedit 3.1.11.111
     * ------------------------------------ */
     
    p
    {
    color : red;
    }
     
    .divCentre{
     margin-left: 10%;
     margin-right: 10%;
     margin-top: 0px;
     margin-bottom: 0px;
     border: 0px solid #AAAAAA;
     height: 200px;
     background-color:green;
     }
     
     .titre
     {
        color: #ffffff;
        font-family: ReSiple;
        font-size: 50px;
       background-color: #00ffcc;
        text-align: center;
     
     }
    CSS menu
    Code CSS : 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
    /* CSS du menu horizontal, bieler batiste */
     
    .menu{
        position:absolute;
        display:block;
        margin:0;
        padding:0;
        width:1000px;
        height:120px;
        margin-left: -2px;
        margin-top: 20px;
        }
     
    .menu ul{
        position:absolute;
        display:block;
        width:124px;
        margin:0;
        padding:0;
        }
     
    .menu li ul{
        visibility:hidden;
        }
     
    .menu li li ul{
        position:absolute;
        margin-left:183px;
        margin-top:-23px;
        }
     
    .menu li{
        list-style:none;
        width:157px;/*espacement entre les intitulés*/
        height:auto;
        display:inline;
        display/**/:block;
        float:none;
        float/**/:left;
        margin:0;
        padding:0;
        }
     
    .menu li li{
        display:block;
        float:none;
        color: #FF0000;
        height:25px;
        }
     
    /* correct a little IE bug */
    * html .menu li li{
        display:inline;
        }
     
    /* possition initaile*/
     
    .menu a{
        text-align:center; /*alignement du text*/
        background-color: #FFFFFF; /*couleur du fond*/
        border:5px #404040 solid; /* bordure (taille, couleur, etat */
        color:#000000; /*couleur du text*/
        display:block;  /*type d'element*/
        width:150px;  /*longeur (190)*/
        text-decoration:none; /* decoration du text*/
        padding:2px 0; /*marge interieure*/
        margin:1px;  /*marge exterieur*/
        }
     
    /*passage de la sourie*/
     
    .menu a:hover{
        background-color: #969696;/*couleur du fond*/
        border:5px #404040 solid;/* bordure (taille, couleur, etat */
        color: #FFFFFF; /*couleur du text*/
        cursor : crosshair; /*type de curseur*/
        }
     
    /* for a mozilla better display with key nav */
    .menu a:focus{
        background-color: #aaf;
    }
     
    a.linkOver{
        background-color: #eee;
        }
    Un petit screen pour imager ma demande

    Une partie de la page web est en orange alors que je voudrais la totaliter de la page de cette couleur sauf les bord droit et gauche...

    Merci


    PS: Sur le message précédent il y a mon code...

  9. #9
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    Centrage :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    #conteneur {
      text-align: center;
    }
    #centre {
      margin-left: auto;
      margin-right: auto;
      width: 700px;
      text-align: left;
    }

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="conteneur">
    <div id="centre">
    CONTENU
    ...
    ...
    </div>
    </div>

  10. #10
    Membre confirmé Avatar de nimois3O
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    Ok, merci j'éssaye sa ce soir je te tien au courant...

    Non, ça n'arrange rien...j'ai toujours ce probléme de centrage et de couleur parciel de la page...

    Si quelqu'un pouvais m'aider SVP !!!

  11. #11
    Membre confirmé Avatar de b Oo
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    179
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 179
    Par défaut
    Salut,
    c'est le noir en dessous du centre orange qui ne te va pas ?

    Si c'est ça, essaye de mettre height à 100% dans centre, si ça ne marche toujours pas regarde du coté des marges de body.

  12. #12
    Membre Expert
    Avatar de Clorish
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    2 474
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 2 474
    Par défaut
    les puristes vont hurler ... mais moi je fait un tableau en align=center
    Et toc ... ca passe tout seul et c'est W3C :p

  13. #13
    Membre confirmé Avatar de nimois3O
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    Citation Envoyé par b Oo
    Salut,
    c'est le noir en dessous du centre orange qui ne te va pas ?

    Si c'est ça, essaye de mettre height à 100% dans centre, si ça ne marche toujours pas regarde du coté des marges de body.
    Non j'aimerais avoir du noir sur les 2 bande de chaque cote de l'ecrant et le centre de la page en orange...

  14. #14
    Membre confirmé Avatar de b Oo
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    179
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 179
    Par défaut
    Salut,
    le site que tu évoques ne correspond pas à ce que tu veux : page contact. Nous sommes d'accord, non ?

    Tu voudrais que cela prenne toute la page, la chose la plus simple est de mettre :
    min-height: 800 px;
    voir plus.

    J'ai trouvé un site qui à un tutoriel qui correspond presque à ce que tu veux, sauf qu'il y a un problème car le pied de page est bien en bas, mais il reste du blanc entre le milieu et le pied de page. Cela est dû au fait que le pied de page est placé en absolute.

    Je pourrais te donner le lien, je ne l'ai pas sous la main.

Discussions similaires

  1. Faire un top 10 des sites les plus visité [fichier csv]
    Par nioko dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 10/12/2013, 14h32
  2. Réponses: 11
    Dernier message: 28/07/2009, 12h47
  3. mon programme refuse de faire comme il devrais quand mes objets sont dans des tableau
    Par alain57 dans le forum Interfaces Graphiques en Java
    Réponses: 6
    Dernier message: 08/02/2007, 08h29
  4. [HTML] faire des tabulation dans une liste <select>
    Par renofx1 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 20/01/2006, 23h36

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