Centrage automatique

Résolu

valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention -
valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention - 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 !!!

Afficher la suite

A voir également:

Centrage automatique
Réponse automatique thunderbird - Guide
Recherche automatique des chaînes ne fonctionne pas - Guide
Logiciel de sauvegarde automatique gratuit - Guide
Réponse automatique gmail - Guide
Sommaire automatique word - Guide

8 réponses

Réponse 1 / 8

elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention 1 326

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)

Réponse 2 / 8

valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention 15

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)}

Réponse 3 / 8

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

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. ♣

Réponse 4 / 8

valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention 15

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...).

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 Statut Contributeur Dernière intervention 1 360

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. ♣

Réponse 6 / 8

valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention 15

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)}

Réponse 7 / 8

valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention 15

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

Réponse 8 / 8

valttt Messages postés 299 Date d'inscription Statut Membre Dernière intervention 15

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.

Votre réponse