Sujet Précédent Sujet Suivant

Pb pour centrer mon site web

Fermé
zalex06 - 3 mai 2008 à 09:56
 zalex06 - 4 mai 2008 à 10:46
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
A voir également:

10 réponses

Réponse 1 / 10
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
3 mai 2008 à 10:17
salut

sans le css on peux rien dire
0
Réponse 2 / 10
zalex06
3 mai 2008 à 11:31
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
Réponse 3 / 10
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
3 mai 2008 à 11:44
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
Réponse 4 / 10
zalex06
3 mai 2008 à 11:59
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
3 mai 2008 à 13:04
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
Réponse 6 / 10
zalex06
3 mai 2008 à 16:57
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
Réponse 7 / 10
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
3 mai 2008 à 22:52
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
Réponse 8 / 10
zalex06
3 mai 2008 à 23:22
lol
tu es en quel résolution chez toi ?
la barre de defilement en bas n apparait pas ?
0
Réponse 9 / 10
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
4 mai 2008 à 01:51
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
Réponse 10 / 10
zalex06
4 mai 2008 à 10:46
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

Discussions similaires

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
senda -

8 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses