Mettre une image centrée selon la largeur de fenêtre (fonction Javascript déjà faite) [Débutant(e)]

**Adakhum** · 05/11/2015, 12h06

Bonjour à tous,

Alors je suis très nul en Javascript ainsi qu'en HTML (CSS je comprends les bases), veuillez excusez mes déboires.

J'ai un blog (http://lenormanditinerant.blogspot.fr/) et je souhaiterais mettre l'image qui se trouve en haut contenant "Le normand Itinérant" centrée en fonction de la taille de la fenêtre de l'utilisateur.

J'ai parcouru le net et surtout toucher à mon code pendant des heures, et je me résous finalement, à demander un peu d'aide ici.

L'image à placer est ".Header". et l'élément à corriger est le "margin-left".

Alors j'ai une fonction, qui je crois, me permettrait déjà de placer l'image centrée, seulement je ne sais pas faire le lien entre ma fonction et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.Header {
text-align: center;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 10.5% !important;		/* Espace à gauche */
margin-top: 40px !important;                  /* Espace au-dessus de l'en-tête */ 
}
 
/* Fonction pour trouver la taille de la fenêtre */
 
<script type="text/javascript">
 
function centrerElementFixe(element)
{
	var largeur_fenetre = (document.body.clientWidth);
	var hauteur_fenetre = (document.body.clientHeight);
 
	var haut = (hauteur_fenetre - element.height()) / 2;
	var gauche = (largeur_fenetre - element.width()) / 2;
	element.css({position: 'fixed', top: haut !important, left: gauche !important});
}
</script>

Que dois-je mettre à la place de "element" de la fonction ? Comment l'inclure dans le CSS ?

J'espère avoir été clair, n'hésitez pas si il y a des questions.
Merci beaucoup à tous pour votre lecture et vos réponses !

**SpaceFrog** · 05/11/2015, 12h31

colle la dans un conteneur de largeur 100%
mets une largeur fixe à ton image en pixels et un marign auto .

**Adakhum** · 05/11/2015, 14h21

Merci pour la réponse

L'image est déjà dans un conteneur 100% Elle fait 1500px. Si je fais un margin auto, l'image, par un phénomène que je ne maitrise pas, reste sur le côté gauche et remonte légèrement.

Je suppose que c'est à cause de ma barre de navigation (ou peut etre un autre module encore..) que j'ai mis au dessus et qui reste tout le temps en haut de la page. Il doit y avoir une interaction peut etre mais je ne sais pas si elle existe vraiment et si oui, comment l'annulée.. C'est pour ça que je place un "! important" avec le "margin: auto" mais ça ne change rien ..

**NoSmoking** · 05/11/2015, 15h50

Bonjour,
le centrage écran peut se faire en CSS pure

exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Centrage Ecran</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
  height:100%;
}
body{
  height:2000px;
}
#conteneur{
  display:table;
  position:fixed;
  background:#cde;
  height:100%;
  width:100%;
}
div #inside{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.ses_creations{
  width:80%;
/*  min-width:60em;/* optionnel */
  margin:auto;
  box-shadow: 2px 2px 5px #888;
}
</style>
</head>
<body>
<div id="conteneur">
  <div id="inside">
      <img class="ses_creations" src="http://www.magix-photos.com/mpfwhd04/10/4A1/319EC700615111E182B439B3A8994960.jpg" alt="Matin de neige à font d'Urle, René CHARRIER">
  </div>
</div>
</body>
</html>

**Adakhum** · 05/11/2015, 17h19

C'est gentil mais ce type de CSS ne fonctionne pas car encore une fois c'est un peu le bordel dans mon code et je ne m'y connais pas du tout !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.Header {
text-align: center;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 10.5% !important;		/* Espace à gauche */
margin-top: 40px !important;                  /* Espace au-dessus de l'en-tête */ 
}
 
/* Fonction pour trouver la taille de la fenêtre */
 
<script type="text/javascript">
 
function centrerElementFixe(element)
{
	var largeur_fenetre = (document.body.clientWidth);
	var hauteur_fenetre = (document.body.clientHeight);
 
	var haut = (hauteur_fenetre - element.height()) / 2;
	var gauche = (largeur_fenetre - element.width()) / 2;
	element.css({position: 'fixed', top: haut !important, left: gauche !important});
}
</script>

Est ce qu'il est possible avec ce code d'intéragir avec le javascript dans le html ?
C'est à dire : grace a la fonction je connais la taille de la fenêtre, je met ensuite cette taille en pixel comme valeur à mon "margin-left" puisque mon "margin : auto" ne fonctionne pas (parce que encore une fois j'y connais rien ...)

**SpaceFrog** · 06/11/2015, 08h19

Un exemple vaut mieux que de longs discours ...
il faut rajouter un display block sur ton image

https://jsfiddle.net/gpnLgmnd/

**Adakhum** · 06/11/2015, 11h32

L'image est toujours sur la gauche, y'a rien à faire. pfff Il doit y avoir une autre commande qui lui dit d'être comme ça mais .. introuvable.

pourtant en mettant !important ça devrait marcher ... et non. :/

Quand je met "margin-left: 10.5% !important;" ça se décale bien mais du coup c'est fixe quelque soit la fenêtre et souvent c'est très mal placé.
Quant je met "display: block !important; + margin: auto !important;" ça le met à fond sur la gauche

Merci pour la réponse tout de même !!

**Adakhum** · 06/11/2015, 13h42

Merci Merci Merci !

Pfiou. Grâce au module de Firefox Firebug j'ai pu aller dans le détail de mon blog et finalement trouver le truc qui régissais directement le position de mon image (header-inner) ! Du coup, au pif, j'ai mit un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#header-inner {
background-position: middle !important;
margin: auto !important;
diplay: block !important;
}

Et ça marche !!!! Maintenant l'image suit la taille de la fenêtre et est toujours centrée ! PFIOU ! ça fait 2 mois que je galère avec ce truc, je viens d'enlever un poids immense !!! Merci à tous autant que vous êtes pour vos conseils !!!