Sujet Précédent Sujet Suivant

Centrage automatique

Résolu/Fermé
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 - 28 nov. 2013 à 11:42
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 - 28 nov. 2013 à 20:52
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

Réponse 1 / 8
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 325
28 nov. 2013 à 12:00
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)
0
Réponse 2 / 8
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
28 nov. 2013 à 12:48
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)}
0
Réponse 3 / 8
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 28/11/2013 à 13:32
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. ♣
0
Réponse 4 / 8
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
Modifié par valttt le 28/11/2013 à 14:10
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...).
0

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

Posez votre question
Réponse 5 / 8
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 28/11/2013 à 16:28 
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. ♣
0
Réponse 6 / 8
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
Modifié par valttt le 28/11/2013 à 17:29
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)}
0
Réponse 7 / 8
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
28 nov. 2013 à 17:45
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
0
Réponse 8 / 8
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 16
28 nov. 2013 à 20:52
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.
0