Pb pour centrer mon site web

zalex06 -  
 zalex06 -
Bonjour,
Salut a tous
Voila j'ai deux petits problemes avec mon site.
1- la barre de defilement horizontal apparait (site étudiée pour un 1024* 768)
2- mon image ne ce centre pas malgré les margins auto, et si je ne baisse pas son width elle prends l espace de la colonne de droite ke faire ?

page dispo ici : http://alexandre.aillot.free.fr/site_cannes/site/index.php

merci d avance
Configuration: Windows XP
Firefox 2.0.0.14

10 réponses

  1. warlix Messages postés 1204 Statut Contributeur 288
     
    salut

    sans le css on peux rien dire
    0
  2. zalex06
     
    Tu n'a pas la barre d option webdevelopper qui permet d afficher le css lool
    Voici le css

    /*Strucure générale de la page
    /*Site en 3 colonnes les colonnes de gauche et de droite sont flottantes, celle du milieu est placé dans le flux */

    body
    {
    background: #000000 url("../photos/gazon.png") fixed 50% 0px;
    margin: auto;
    }

    div#conteneur
    {
    width:1000px;
    height:auto;
    min-height: 100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    color:red;
    background:white;
    }

    div#image
    {
    width:1000px;
    height:175px;
    margin-left:auto;
    margin-right:auto;
    border:0px solid;
    background:url("../photos/cannes2.png");
    margin-top:0px;
    margin-bottom:0px;
    }

    div#pied_de_page
    {
    clear:both;
    width:1000px;
    height:125px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid;
    background:url("../photos/sponsors/banniere_bas_depage.png");
    margin-top:0px;
    margin-bottom:0px;
    border-bottom:0px;
    border-left:0px;
    border-right:0px;
    }

    div#menu
    {
    float: left;
    width: 160px;
    margin-right: 10px;
    background:white;
    border-bottom:1px solid red;
    color:red;
    text-align:center;
    font-size:small;
    height:auto;
    }

    div#info_principal
    {
    margin-left: 160px;
    margin-right: 281px;
    background: white;
    border-top:1px solid red;
    border-left:1px solid red;
    border-right:1px solid red;
    border-bottom:1px solid red;
    height:auto;
    margin-top:-1px;
    margin-bottom:-1px;
    }

    div#fil_infos
    {
    float: right;
    width: 282px;
    background: white;
    height:auto;
    }

    div#flash
    {
    position:relative;
    background: white;
    border-left:1px solid red;
    height:250px;
    width:auto;
    }

    /* Structure de la page detaillee*/

    #prochain_match
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:150px;
    border-left:1px solid red;
    }

    #prochain_match_haut
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    #contenu_prochain_match
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    #dernier_match
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:150px;
    border-left:1px solid red;
    }

    #dernier_match_haut
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    #contenu_dernier_match
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    #classement
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    border-left:1px solid red;
    }

    #classement_haut
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    #contenu_classement
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    div#info_principal2
    {
    float:left;
    border:1px solid red;
    height:auto;
    width:838px;
    /*background:url("../photos/Arles-Une.jpg") no-repeat;*/
    }

    div#menu2
    {
    float: left;
    width: 160px;
    background: white;
    height:500px;
    margin-right: 10px;
    }

    #menu_admin
    {
    float:left;
    height:auto;
    width:175px;
    }

    #info_principal_admin
    {
    float:left;
    width:740px;
    height:auto;
    border-left:1px solid red;
    }

    div#image_admin
    {
    width:1000px;
    height:175px;
    margin-left:auto;
    margin-right:auto;
    border:0px solid;
    background:url("../photos/cannes_admin.png");
    margin-top:0px;
    margin-bottom:0px;
    }

    #fonctions_admin
    {
    clear:both;
    width:100%;
    border-top:1px solid red;
    }

    /*Zone_membre (identification) */

    #zoneMembre
    {
    position:relative;
    top:0;
    left:0px;
    margin-left:auto;
    margin-right:auto;
    width:119px;
    font-family: Arial, Verdana, Helvetica;
    }

    #zoneMembre #titre
    {
    top:0px;
    left:0px;
    background-image:url("../photos/membre_top.jpg");
    width:119px;
    height:16px;
    font-family: Arial, Verdana, Helvetica;
    }

    #zoneMembre .main
    {
    position:relative;
    background-image:url("../photos/membre_background.jpg");
    width:119px;
    height:89px;
    margin-top : 2px;
    text-align : center;
    font-size : 10px;
    font-family: Arial, Verdana, Helvetica;
    }

    #zoneMembre a, #zoneMembre a:hover,#zoneMembre a:focus
    {
    text-decoration: none;
    color : black;
    }

    #zoneMembre .main input
    {
    font-size : 11px;
    font-family: Arial, Verdana, Helvetica;
    letter-spacing:1px;
    background-color:transparent;
    color:#777;
    text-align : center;
    /* border:2px; */
    }

    #zoneMembre .main #membreBienvenue
    {

    float:left;
    width:100%;
    font-size : 11px;
    font-family: Arial, Verdana, Helvetica;
    letter-spacing:0.5px;
    color:#000;
    text-align : center;
    }

    #zoneMembre .main #membreProfil
    {
    position:relative;
    float:left;
    width:100%;
    text-align : center;
    padding-top:5px;
    }

    #zoneMembre .main #membreDeconnexion{
    position:relative;
    float:left;
    width:100%;
    text-align : center;
    padding-top:0px;
    }

    #zoneMembre .main input[type=submit]
    {
    font-size : 10px;
    font-family: Arial, Verdana, Helvetica;
    }

    #zoneMembre #connexion{
    position:relative;
    /*top:55px;*/
    left:19px;
    background-image:url("../photos/connexion.jpg");
    width:82px;
    height:20px;
    font-size : 10px;
    font-family: Arial, Verdana, Helvetica;
    }

    #zoneMembre #fin{
    position:relative;
    background-image:url("../photos/membre_bottom.jpg");
    width:113px;
    height:13px;
    text-align : right;
    padding-right: 6px;
    padding-top: 1px;
    color : white;
    font-size : 10px;
    font-family: Arial, Verdana, Helvetica;
    }

    #zoneMembre #fin a.lienInscription{
    color : white;
    font-size : 10px;
    font-family: Arial, Verdana, Helvetica;

    }

    #image_du_haut
    {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    /* Menu*/
    #menu_final
    {
    width:auto;
    margin:10px 0px;
    padding:0px;
    position:relative;
    left:22px;
    text-align:left;
    }

    #menu_final ul a
    {
    width:150px;
    list-style:none;
    padding:0px;
    margin:0px;
    border:0px;
    }

    #menu_final ul li
    {
    display:block;
    height:22px;
    }

    #menu_final ul li ul {
    display:none;
    }

    #menu_final ul li+li:hover ul {
    display:block;
    position:absolute;
    top:22px;
    left:90px;
    }

    #menu_final ul li+li+li:hover ul {
    display:block;
    position:absolute;
    top:44px;
    left:90px;
    }

    #menu_final ul li+li+li+li:hover ul {
    display:block;
    position:absolute;
    top:68px;
    left:90px;
    }

    #menu_final ul li+li+li+li+li:hover ul {
    display:block;
    position:absolute;
    top:87px;
    left:90px;
    }
    .navigation
    {
    list-style:none;
    margin:0;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    }

    .navigation li:hover
    {
    display:block;
    }

    .navigation li
    {
    display:block;
    height:auto;
    padding:0px;
    margin:0px;
    }

    /*Strucuture detaillee des balises*/

    p,h1,h2
    {
    text-align:center;
    }

    th
    {
    border-bottom:1px solid black;
    }

    label {
    display:block;
    width:225px;
    float:left;
    }

    /* Les classes */

    .club1
    {
    float:left;
    margin:40px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }

    .club2
    {
    float:right;
    }

    .gras2
    {
    font-weight:bold;
    color:red;
    }

    .gras2
    {
    font-weight:bold;
    color:black;
    }

    .decal
    {
    margin-right:-10%;
    }

    .table
    {
    width:75%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }

    .table2
    {
    width:75%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }

    .table td
    {
    color:black;
    }

    .table2 tr+tr>td
    {
    background-color:#ADEAEA;
    }

    .table2 tr+tr+tr+tr>td
    {
    border-bottom:2px solid black;
    }

    .table2 tr+tr+tr+tr+tr>td
    {
    border-bottom:2px solid black;
    background-image:url("../photos/deg.png");
    font-weight:bold;
    }

    .table2 tr+tr+tr+tr+tr>td
    {
    border-bottom:2px solid black;
    }

    .table2 tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:0px;
    background:#FFE5E3;
    font-weight:normal;
    }

    .table th
    {
    border-bottom:2px solid black;
    }

    .table3
    {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:25px;
    color:black;
    }

    .table3 th
    {
    border-bottom:2px solid red;
    color:red;
    }

    .table3 tr+tr+tr>td
    {
    border-bottom:2px solid red;
    }

    .table3 tr+tr+tr+tr>td
    {
    border-bottom:0px solid red;
    }

    .table3 tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:2px solid red;
    }

    .table3 tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:0px solid red;
    }

    .table3 tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:2px solid red;
    }

    .table3 tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:0px solid black;
    }

    .degrade
    {
    position:relative;
    left:100px;
    margin-top:15px;
    margin-bottom:30px;
    }

    .align
    {
    text-align:center;
    }

    .table tr+tr+tr>td
    {
    border-bottom:2px solid red;
    }

    .table tr+tr+tr+tr>td
    {
    border-bottom:0px;
    }

    .table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:2px solid red;
    }

    .table tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    border-bottom:0px;
    }

    .table th
    {
    border-bottom:2px solid red;
    }

    .im
    {
    width:60px;
    height:60px;
    }

    .equipe1
    {
    position:relative;
    top:-65px;
    left:8px;
    }

    .equipe2
    {
    position:relative;
    top:-133px;
    left:215px;
    }

    .equipe3
    {
    position:relative;
    top:-65px;
    left:2px;
    }

    .equipe4
    {
    position:relative;
    top:-126px;
    left:216px;
    }

    .info
    {
    position:relative;
    text-align:center;
    height:auto;
    margin-left:66px;
    margin-right:20px;
    margin-top:20px;
    margin-bottom:auto;
    }

    .info2
    {
    position:relative;
    text-align:center;
    height:auto;
    margin-left:95px;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:auto;
    }

    .px
    {
    width:110px;
    }

    .haut
    {
    border-top:2px solid black;
    border-bottom:2px solid black;
    }

    .table5
    {
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    color:black;
    }

    .centr
    {
    margin-left:auto;
    margin-right:auto;
    list-style-type:none;
    text-align:center;
    }

    .haut
    {
    border-top:2px solid black;
    border-bottom:2px solid black;
    }

    .black
    {
    color:black;
    }

    .center
    {
    position:relative;
    left:100px;
    margin-left:auto;
    margin-right:auto;
    width:80%;
    }
    .ballon
    {
    list-style-image:url("../photos/ballon_rouge_40.png");
    }

    .red
    {
    color:red;
    }

    .equipe
    {
    width:80%;
    margin-left:60px;
    margin-right:auto;
    text-align:center;
    border:0px;

    }
    .droite
    {
    position:relative;
    left:151px;
    color:red;
    text-decoration:none;
    }

    .ballon2
    {
    list-style-image:url("../photos/ballon_rouge_50.png");
    list-style-position: outside;
    }
    .black
    {
    color:black;
    }

    .infos
    {
    position:relative;
    left:-18px;
    font-size:2ex;
    height:500px;
    }

    .sans_retrait
    {
    line-height:20px;
    }

    .centrer
    {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    }

    .float
    {
    float:left;
    margin-top:50px;
    }

    .inline
    {
    display:inline;
    margin:25px;
    padding:25px;
    }

    .float2
    {
    float:left;
    margin-left:25px;
    margin-right:25px;
    }

    .stop
    {
    clear:left;
    list-style-type:none;
    color:black;
    }

    .infos_pratiques
    {
    position:relative;
    left:110px;
    top:-130px;
    }

    .title
    {
    color:red;
    font-size:large;
    text-align:left;
    margin-top:75px;
    }

    .bb
    {
    width:90%;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }

    .none
    {
    list-style-type:none;
    color:black;
    }

    .coupe
    {
    float:left;
    }

    .dates
    {
    display:block;
    }

    .centre
    {
    position:relative;
    margin-left:28%;
    margin-right:28%;
    width:100%;
    color:black;
    }

    .ja,.b
    {
    color:black;
    border:1px solid black;
    border-collapse: collapse;
    margin-bottom:25px;
    }

    .b
    {
    border-left:0px solid;
    border-top:1px solid;
    border-bottom:1px;
    border-right:1px;
    }

    .ja tr>td
    {
    background-color:red;
    color:white;
    }

    .ri tr>td
    {
    border-top:1px solid black;
    }

    .ja tr+tr>td
    {
    background-color:white;
    color:black;
    }

    .ja tr+tr+tr>td
    {
    background-color:red;
    color:white;
    }

    .ja tr+tr+tr+tr>td
    {
    background-color:white;
    color:black;
    }

    .ja tr+tr+tr+tr+tr>td
    {
    background-color:red;
    color:white;
    }

    .ja tr+tr+tr+tr+tr+tr>td
    {
    background-color:white;
    color:black;
    }

    .ja tr+tr+tr+tr+tr+tr+tr>td
    {
    background-color:red;
    color:white;
    }

    .ja tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    background-color:white;
    color:black;
    }

    .ja tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    background-color:red;
    color:white;
    }

    .ja tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    background-color:white;
    color:black;
    }

    .ja tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    background-color:red;
    color:white;
    }

    .ja tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr+tr>td
    {
    background-color:white;
    color:black;
    }

    .milieu
    {
    text-align:center;
    margin-right:auto;
    }

    .gauche
    {
    text-align:left;
    border:0px;
    margin-top:10px;
    margin-bottom:10px;
    font-size:medium;
    text-indent: 5px;
    }

    .fillon
    {
    position:relative;
    top:-20px;
    left:39px;
    }

    .cent
    {
    width:100%;
    }

    .droi
    {
    position:relative;
    left:320px;
    }

    .droit
    {
    position:relative;
    left:300px;
    }

    .droita
    {
    position:relative;
    left:132px;
    }

    .min
    {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    display:block;
    margin-top:10px;
    }

    .table10
    {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }

    .zero
    {
    border:0px;
    }

    .menus
    {
    margin-left:-20px;
    }

    .menu_final
    {
    margin-top:50px;
    }

    .top
    {
    margin-top:25px;
    }

    .niet
    {
    text-decoration:none;
    color:black;
    }

    .niet:hover
    {
    color:red;
    text-decoration:underline;
    }

    .midle
    {
    text-align:center;
    }

    .bi
    {
    text-align:left;
    }

    .flotant_gauche
    {
    float:left;
    }

    .flotant_droit
    {
    float:right;
    }

    .a_la_une
    {
    background:#FFE5E3;
    color:black;
    padding:6px 10px 15px 10px;
    border:1Px solid #cdcdd4;
    }

    .rien
    {
    list-style-type:none;
    }

    .a_la_une .photo_principale
    {
    display:block;
    }

    .a_la_une h2
    {
    text-indent:-5000px;
    background:#445eb2 url("../photos/h2-a_la_une.gif") bottom repeat-x;
    width:68px;
    height:15px;
    margin:0 0 5px 0;
    }

    .a_la_une .photo_principale
    {
    display:block;
    }

    .a_la_une h2
    {
    text-indent:-5000px;
    background:#445eb2 url("../photos/titre_une.png") bottom repeat-x;
    width:150px;
    height:22px;
    margin:0 0 5px 0;
    color:white;
    }

    .titreAlaune
    {
    text-indent:-5000px;
    display:block;
    background:#445eb2 url("../photos/titre_une.png") bottom repeat-x;
    width:68px;
    height:15px;
    margin:0 0 5px 0;
    }

    .ac
    {
    margin-top:2px;
    }

    .lefty
    {
    margin-left:445px;
    }

    .lefto
    {
    margin-left:315px;
    }

    .a_la_une h3
    {
    font-family:"Trebuchet Ms", verdana, arial;
    font-size:18px;
    font-weight:bold;
    margin:10px 0 5px 0;
    }

    .droite
    {
    text-align:right;
    }

    .a_la_une p
    {
    line-height:16px;color:black;
    }

    .a_la_une a:link, .a_la_une a:visited
    {
    color:#fff;
    text-decoration:underline;
    }

    .a_la_une a:hover, .a_la_une a:active
    {
    color:#fff;
    text-decoration:none;
    }

    .mm
    {
    width:450px;
    height:300px;
    }

    .puce
    {
    list-style-image : url("../photos/ballon_rouge_40.png");
    font-size:large;
    }

    .puce:hover /* lorsque la puce est survolee, elle devient un ballon vert */
    {
    list-style-image : url("../photos/Copie de ballon_rouge_40.png");
    font-size:large;
    }

    .puce .red:hover /* lorsque le lien est survole il devient vert */
    {
    color:#5bbe5b;
    }

    /* Pour les images effet lightbox*/

    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:../photos/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../photos/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../photos/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
    0
  3. warlix Messages postés 1204 Statut Contributeur 288
     
    Oui mais ce n est pas à moi de faire les recherches non plus :)

    Quelle image , où , comment ?

    Précise s il te plait , une demande floue apporte que des réponses floues

    ____________________

    je note ça:

    div#conteneur
    {
    width:1000px;
    height:auto;
    min-height: 100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    color:red;
    background:white;
    }

    div#image
    {
    width:1000px;
    height:175px;
    margin-left:auto;
    margin-right:auto;
    border:0px solid;
    background:url("../photos/cannes2.png");
    margin-top:0px;
    margin-bottom:0px;
    }

    celle ci ?

    et ton texte qui défile , il est où ,
    0
  4. zalex06
     
    ba en fait j ai jsute le pb en ce moment de la barre horizontal en bas de l ecran
    pourtant ca a l air bon tt ca avec lé margin auto je ne comprends pa
    :s

    et tu aller voir le lien ?
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. warlix Messages postés 1204 Statut Contributeur 288
     
    re

    oui j ai été voir , mais je ne comprend pas ce que tu veux surtout :p

    ton pied de page ,
    tu veux qu il fasse la taille de ton content et laisser le div de droite tout le long ,

    Si c est ça , met le dans le content :)

    ou met une taille fixe au jpg et fait un position left sans margin
    0
  7. zalex06
     
    j'ai pas bien compris.
    je veux juste en fait que mon site soit centré et qu'il n y est pas la bare de defilement en bas
    en mettant 1000px celui ci devrait en 1024*768 ne pas afficher le scrolling d en bas
    0
  8. warlix Messages postés 1204 Statut Contributeur 288
     
    Alors c est pour cette raison que je ne comprend pas :)

    Je n ai pas ce que tu dis sur mon pc il est centré , rien ne me choque à part qu il soit vide
    0
  9. zalex06
     
    lol
    tu es en quel résolution chez toi ?
    la barre de defilement en bas n apparait pas ?
    0
  10. warlix Messages postés 1204 Statut Contributeur 288
     
    1440 900 je suis

    en 1024 768 oui , mais il faut revoir la taille du site , soit tu choisi d en faire un fixe et donc tu le mets en 1000x maxi
    je conseil même les 900 , soit tu en fais un extensible qui va s adapter aux résolutions
    0
  11. zalex06
     
    j en voudrais faire un non extensible toujours de 1000 px je peux mettre tout en px ? ou fo mettre des % ?
    est ce un probleme de float: left right a ton avis ?
    0