28172 sujets

CSS et mise en forme, CSS3

Vue sur le div ou le body au chargement

Bonjour, un sujet un peu bizarre comme ça mais je m'explique:

Sur mon site, j'ai mis une grande image dans une div que j'ai {fixed;} , pour servir de fond d'écran, et j'ai ensuite créer une <map> et des <area> pour faire des zones cliquables et rendre la chose interactive, tout ça fonctionne très bien.

Mais voilà, au chargement de ma page, la vue dans le navigateur se place en haut à gauche de ma photo(ou div ou body), chose parfaitement logique par ailleurs.

Même si j'ai un écran 24' qui me permet de visualiser l'image dans son ensemble, ce n'est pas le cas de tout le monde, c'est pourquoi j'ai rassemblé les zones cliquables au milieu de ma page, pour éviter aux petits écran de trop naviguer sur ma page.

Et donc ce que je voudrai c'est qu'au chargement de ma page, la vue du navigateur se place au centre de mon image(ou div ou même body), et non pas en haut à gauche comme par défaut.

Est ce quelqu'un saurait comment faire, car moi j'ai cherché, j'ai essayer plein de choses, et je ne vois pas comment faire.

Je précise que si j'utilise {padding;} la vue démarre toujours en haut à gauche et ça ne règle pas mon problème.

Pour plus d'explication, le HTML, j'ai bien sûr extrêmement simplifier le code, mais tout est là:

<body>

<div id="montexte">
<p>mon bla bla</p>
</div>

<div id="fond">
<img src="monfond.jpg" />
</div>
</body>


et le CSS, simplifié aussi, mais toutes les valeurs sont là:

body
	{
	width: auto;
	margin-top: 20px; 
	margin-bottom: 20px;  
	margin: auto;}

.montexte
{
	z-index: 2;
	background-color: transparent;
	background-repeat: no-repeat;
	border: none; 
	position: absolute;
	width:340px;
	height:340px;
	margin-left:195px;
	margin-top:30px;
	color: #A10684;
	opacity:0.9;
	text-align:justify;
}

.fond{
   background-color: #000000;
	background-repeat: no-repeat;
	border: none;
	position: absolute;
	margin:auto;
	width:auto;
	height:auto;
	z-index: 1;
}



merci à ceux qui auront lu jusqu'au bout mon post!
Modifié par felnag (06 Nov 2011 - 13:42)
Bonjour,

En fait ce n'est pas la vue du navigateur qu'il faut essayer de contrôler. (Tu pourrais éventuellement centrer le viewport sur le centre du canevas en jouant sur le scroll en JavaScript... si jamais tu avais un contenu pris en compte dans le calcul des dimensions du canevas, ce qui n'est pas le cas ici avec un contenu en position:fixed. Désolé pour l'avalanche de termes techniques. Smiley cligne )

Il faut plutôt essayer de centrer ton contenu dans le viewport (zone de visualisation du navigateur). Vu que ton contenu est une image de taille connue (en pixels) en position:fixed, tu dois pouvoir faire quelque chose qui ressemble à ceci:
#content {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -800px; /* si hauteur = 1600px */
  margin-left: -800px; /* si largeur = 1600px */
}
Par contre je ne suis pas sûr que l'option «grosse image avec image map» soit idéale pour implémenter ton design. C'est peut-être une solution correcte, mais ça a tendance à allumer des warnings dans ma tête d'intégrateur. Smiley lol
Merci pour ta réponse.

Pour ce qui est du centrage pour les écrans de grande taille, j'ai réglé le problème avec un petit passe-passe: 


body{  margin-left: auto;
          margin-right: auto;
          text-align: center;}


Par contre c'est effectivement la vue du navigateur que j'aimerai contrôler, je vais aller voir du coté des fonction JS, merci du conseil, c'est qu'en tant que codeur du dimanche je ne savais pas trop quelle fonctionnalité pouvait m'aider à faire ça.

Je suis tout à fais d'accord avec toi, en terme d'intégration un gros fond avec des images map est contraire à la logique, mais c'était vraiment une solution de facilité pour avoir du design sans trop se fouler(j'avoue Smiley rolleyes ), et les enjeux du site que je fait ne sont pas trop important.

Pour ceux qui veulent voir ce que ça donne et me donner des retours:

http://www.kleznot.fr
Modifié par felnag (13 Nov 2011 - 15:21)
Sujet clos
Aller à