Centrage automatique [Résolu/Fermé]

Signaler
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
-
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
-
Bonjour,

Je souhaite centrer de façon automatique ma galerie photo sur ma page web, quelque soit la taille de l'écran utilisé.
Ma galerie fonctionne en javascript.

S'il vous faut le détail de mes fichier (html et css), je peux vous les donner.

MERCI D'AVANCE POUR VOTRE AIDE !!!

8 réponses

Messages postés
5840
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 232
Bonjour
il suffit d'appliquer des marges automatiques en css à ta galerie et de déclarer sa largeur sinon cela ne fonctionne pas

# nom de la div contenant la galerie{
width: 500 px;
margin:0 auto;
}
attention de ne pas oublier de modifier la largeur de ta galerie (dans width)
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
16
Merci Elgazar,

Désolé, je me suis mal exprimé, le centrage horizontal est OK, mais c'est le centrage vertical automatique que je souhaite.
Voici mon CSS:
#center_content{
width:902px;
float:left;
height:500px;
color:#fff;
}

.text_centre_gras{
text-align:center;
font-size:20px;
font-weight:bold;
color:#D06021;
}


#gallery {position:relative; width:622px; height:550px; margin:auto; padding:auto; border:6px solid #fff; background:#AAA}

#images {border:2px solid #9ac1c9; height:610px; background:#eef5f6; margin-bottom:20px}

#image {position:relative; width:608px; height:456px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}

#image img {position:absolute; top:5px; left:5px}

#thumbwrapper {margin-top:10px; padding:5px 0; width:618px; height:60px; border:2px solid #666; background:#FFF}

#thumbarea {position:relative; overflow:hidden; height:70px; width:613px; }

#thumbs {position:relative; margin:0 0 0 5px; padding:0; list-style:none; height:70px; width:2000px; border-right:5px solid #FFF}

#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}

#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 336
Salut
voila une methode pour center_content par exemple !!

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}

     #center_content {
     display: table-cell;
    text-align: center;
    vertical-align: middle;
     width: 902px;
     height: 500px;
     color:#fff;
     }


ou une autre

#center_content {
     position:absolute;
     left: 50%;
     top: 50%;
     width: 902px;
     height: 500px;
     margin-top: -250px; /* moitié de la hauteur */
     margin-left: -451px; /* moitié de la largeur */
     color:#fff;
     }


a+


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
16
Je viens d'essayer les 2 méthode, mais aucunes d'elles ne fonctionne.
Lorsque je passe d'un PC (16/9) à un autre (4/3), l'affichage est centré verticalement sur le premier (16/9) mais pas sur le second.

Je suis un peu pommé à force de tout modifier.
Je crois que c'est le contenu de "center content" qui doit-être centré (gallery, images, images, etc...).
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 336
je viens d'essayer les 2 méthode, mais aucunes d'elles ne fonctionne.  
impossible , les 2 fonctionnent parfaitement !
la premiere methode pose juste un probleme sur IE<10 !

voila un exemple avec ce que tu donne et la seconde methode;
dis moi quand il ne ce trouve pas au centre ????

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
<!--
    html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    }

    #center_content {
     position:absolute;
     left: 50%;
     top: 50%;
     width: 902px;
     height: 500px;
     margin-top: -250px; /* moitié de la hauteur */
     margin-left: -451px; /* moitié de la largeur */
     color:#fff;
     }
    #gallery {
    position: relative;
    width: 622px;
    height: 550px; /* + grand que sont conteneur qui est a 500px !! */ 
    margin: auto;
    padding: auto;
    border: 6px solid #fff;
    background: #AAA;
    }
    -->
    </style>
  </head>
  <body>
    <div id="center_content">
      <div id="gallery"></div>
    </div>
  </body>
</html>




mais je pense que c est plutot un peu le foutoir dans tes codes !;-))
dans tes codes tu donne un height superieur a gallery qu a sont conteneur center_content !!!

center content ou gallery c est pareil ! sauf que si tu le fait sur gallery , elle sort de la div center content qui elle n est pas centre !!!


a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
16
OK, c'est fort possible que ce soit le B...LOL
Si je fais un Center content avec un gallery de la même taille cela ne change rien.
Pour que ce soit plus clair, je vais lister mon html et mon css, car si je remplace les info comme j'ai essayé de le faire, c'est la cata !!!! Plus rien n'est en place...

Voici mon html complet:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Autour de la Guitare</title>
<link rel="stylesheet" type="text/css" href="Photo.css" />
</HEAD>

<body>

<div id="main_container">
<div id="menu_tab">
<div id="header">
<ul class="menu">
<li class="divider"></li>
<li><a href="Accueil.html" class="nav"> Accueil </a></li> <li><a href="Photo.html" class="nav_selected"> Photos </a></li>
<li><a href="Agenda.html" class="nav"> Agenda </a></li>
<li><a href="Forum.html" class="nav"> Forum </a></li>
<li><a href="espace.html" class="nav"> Espace Partitions </a></li>
<li><a href="Contact.html" class="nav"> Contact </a></li>
</ul>
</div>
</div>

<div id="center_content">

<div id="gallery">
<div id="imagearea">
<div id="image"><a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a><a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" width="80" height="60" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" width="80" height="60" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" width="80" height="60" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" width="80" height="60" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" width="80" height="60" alt="" /></li>
<li value="6"><img src="thumbs/6.jpg" width="80" height="60" alt="" /></li>
<li value="7"><img src="thumbs/7.jpg" width="80" height="60" alt="" /></li>
<li value="8"><img src="thumbs/8.jpg" width="80" height="60" alt="" /></li>
<li value="9"><img src="thumbs/9.jpg" width="80" height="60" alt="" /></li>
<li value="10"><img src="thumbs/10.jpg" width="80" height="60" alt="" /></li>
<li value="11"><img src="thumbs/11.jpg" width="80" height="60" alt="" /></li>

</ul>
</div>
</div>
</div>

<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 120;
</script>
<script type="text/javascript" src="slide.js"></script>

</div>
</body>
</html>

Vola mon css complet:
html {
margin:0;
padding:0;
background: url(Images/bg2.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
}

#main_container{
width:902px;
height:auto;
margin:auto;
padding:0px;
}


/*---------------- menu tab----------------------*/
#menu_tab{
width:902px;
float:left;
padding:15px;
}

#header{
width:902px;
height:109px;
margin:auto;
padding:0 0 0 0;
background:url(images/top_menu_bg.png) no-repeat;behavior: url(iepngfix.htc);
background-position:center;
}

ul.menu {
list-style-type:none; display:block; width:630px;
margin: auto;
padding:90px 0 0 25px;
background:none;}

ul.menu li {
display:inline;
font-size:15px;
font-weight:bold;
line-height:28px;}

ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
}

a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}

a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #E08040;}

a.nav:hover {
color: #E08040; text-decoration:none;}

/*----------------center_content----------------*/


#center_content{
width:902px;
float:left;
height:550px;
color:#fff;
}

.text_centre_gras{
text-align:center;
font-size:20px;
font-weight:bold;
color:#D06021;
}


#gallery {position:relative; width:622px; height:550px; margin:auto; padding:auto; border:6px solid #fff; background:#AAA}

#images {border:2px solid #9ac1c9; height:610px; background:#eef5f6; margin-bottom:20px}

#image {position:relative; width:608px; height:456px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}

#image img {position:absolute; top:5px; left:5px}

#thumbwrapper {margin-top:10px; padding:5px 0; width:618px; height:60px; border:2px solid #666; background:#FFF}

#thumbarea {position:relative; overflow:hidden; height:70px; width:613px; }

#thumbs {position:relative; margin:0 0 0 5px; padding:0; list-style:none; height:70px; width:2000px; border-right:5px solid #FFF}

#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}

#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
16
Voici l'adresse de mon site pour voir ce que cela donne...
Je précise qu'il est encore en construction...
http://loire-et-guitare.asso.st/Index.html
Messages postés
240
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
13 avril 2021
16
Toutes mes excuses !!!
J'avais pas bien lu Grrrrrrrrrrrrrrrr.........
J'ai modifier mon css et j'ai mis:

#center_content {
position:absolute;
left: 50%;
top: 50%;
width: 902px;
height: 550px; (et non pas 500)
margin-top: -225px; (et non pas 250)
margin-left: -451px;
color:#fff;
}

Maintenant tout est centré aussi bien sur l'écran 16/9 que sur l'écran 4/3.

Sincères remerciement pour votre aide.