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

Version imprimable

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:

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 !

05/11/2015, 12h31
SpaceFrog

colle la dans un conteneur de largeur 100%
mets une largeur fixe à ton image en pixels et un marign auto .
05/11/2015, 14h21
Adakhum

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

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

exemple :

Code:

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>

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:

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

06/11/2015, 08h19
SpaceFrog

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

https://jsfiddle.net/gpnLgmnd/
06/11/2015, 11h32
Adakhum

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 !!
06/11/2015, 13h42
Adakhum
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:

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 !!!
06/11/2015, 13h49
SpaceFrog

Code:

background-position: middle !important;

il ne s'agit pas d'une balise image alors ...
mais d'une image en background ...
06/11/2015, 13h51
Adakhum

heu oui ... peut être ... désolé je suis nul en html j'y connais rien :/
06/11/2015, 13h53
SpaceFrog

ben une balise image :

Code:

<img src="..." .../... />

et une image en arrière plan ça se passe dans el css avec

Code:

background-image: url("...")
06/11/2015, 13h58
Adakhum

Je le saurais pour une prochaine fois, c'est tout bête merci :)

C'est pas toi le site a tout hasard FrogWeb ? ^^ Sinon il est bien fait :p
06/11/2015, 14h27
SpaceFrog

Non, on est plusieurs grenouilles faut croire ...