[RESOLU]Alignement d'une image dans body

Question

Chum

16 Apr 2007 à 15:57

En parlant de scrollbar ^^

y a t il un moyen de centrer une background-image placé dans le body ?
ex:


body{
   background-image:url(voyage.jpg);
   background-repeat:no-repeat;
   left:50%;
   top:50%;
   height:100px;
   width:300px;
   margin-left:-150px;
   margin-top:-50px;
}

(évidement c'est faut ^^)

mais je cherche une solution pour ne pas voir les bares de scroll !
Est-ce que quelqu'un a une solution ?
J'ai cherché sur la faq, mais malheureusement il y a une erreur a quelque part !
Si la réponse est vraiment bête --> dite le moi ^^ je suis aveuglé dans une direction Smiley bawling

merci beaucoup de prendre 5 minutes de votre temps !

Chum
Modifié par Chum (17 Apr 2007 - 11:55)

fvsch

16 Apr 2007 à 16:09

Positionner une image de fond... par exemple avec la propriété background-position ?

body{
background-image:url(voyage.jpg);
background-repeat:no-repeat;
background-position:center center;
}

Mais là on ne positionne que l'image de fond, pas le contenu. D'ailleurs, c'est quoi ce body de 150px de haut ? Smiley eek

Si tu veux positionner au centre de la page (en vertical et en horizontal) un bloc global regroupant tous les contenus de la page, mieux vaut :
1 - oublier l'idée farfelue de faire un site avec une hauteur fixe (le Web n'est pas le Print...) ;
2 - travailler avec un conteneur global autre que body.

Chum

16 Apr 2007 à 16:22

En fait je voudrais mettre une image autour d'un contenu.
C'est pour optimiser mon site, de cette manière les écran 600/800 ne voient que le contenu et le design ne créé pas de scroll bar.

---------------------------------------------
---------------------------------------------
---------------------------------------------
------0000000000000000000--------
------0001111111111111000---------
------0001111111111111000---------
------0001111111111111000---------
------0001111111111111000---------
------0000000000000000000--------
---------------------------------------------
---------------------------------------------
---------------------------------------------

le contenu c'est les 1111111
et je voudrais que le design qui est autour (symbolisé par les 000000) ne créé pas de scrollbar...

si c'est pas claire je vais essayer de répondre a vos questions!

Donc: je voulais mettre mon design dans body et de l'aligner au centre comme le contenu et de cette manière on pourra donner l'illusion que c'est un toute !

Smiley biggrin

merci de prendre du temps pour moi !

Super_baloo8

16 Apr 2007 à 18:10

Bonjour, vive les Div !

Pour ton fond, le background sur le body impeccable :

body{
background: #FFF url(voyage.jpg) no-repeat center center;
}

Et pour centrer tout ton contenu après, tu crée une div, avec une dimension fixe ou relative en largeur et tu indique des marges droite et gauche automatique.

Exemple dimension dynamique :

div#contenu{
width: 50%;
margin-left: auto;
margin-right: auto;
}

Exemple dimension fixe :

div#contenu{
width: 500px;
margin-left: auto;
margin-right: auto;
}

Après pour le centrage vertical, je ne sais pas si c'est possible aussi simplement que ca :

div#contenu{
height: 100px;
width: 500px;
margin: auto;
}

Modifié par Super_baloo8 (16 Apr 2007 - 18:12)

Chum

17 Apr 2007 à 08:54

Merci beaucoup pour ta réponse !!! Smiley biggrin

Le seul soucis c'est que l'image de fond ne s'aligne pas encore en vertical ... (l'image dans body). C'est le 2ème center qui devais l'aligner en vertical ?


body{
background: #FFF url(voyage.jpg) no-repeat [b]center center[/b];
}

Mais c'est déjà un grand pas pour moi ^^ mon image s'aligne en horizontal mais collé sur le top de mon navigateur. Il faut aussi signaler que mon image n'est qu'a moitié visible .... snif Smiley bawling

Bref je vais voir si je trouve une solution ! (mais s'il y a une personne qui connais la solution je suis toujours preneur !)
voici le code pour mon test:


<!--HTML Document-->

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />

<title>test</title>
</head>

<body>
   <div id="contenu">
   </div>
</body>
</html>


/* CSS Document */

*{
   margin:0px;
   padding:0px;
}

body{
   background: #FFF url(chienetchat.jpeg) no-repeat center center;
}

#contenu{
   position:absolute;
   left:50%;
   top:50%;
   height:100px;
   width:300px;
   margin-left:-150px;
   margin-top:-50px;
   background-color:#999999;
}

un petit lien pour vous montrer ce qui ce passe....
--> http://www.nuance.ch/test/

Merci pour votre aide Smiley cligne

Modifié par Chum (17 Apr 2007 - 10:35)

PititeFleur

17 Apr 2007 à 10:06

Chez moi sous ie6 c'est centré en hauteur et en largeur Smiley smile

koala64

Modérateur

17 Apr 2007 à 10:14

Bonjour Chum, Smiley smile

Peux-tu éditer tes messages pour baliser le code comme prévu dans les règles (règle 13) ? Merci d'avance. Smiley cligne

Chum

17 Apr 2007 à 10:20

Je sais pas trop.... sous FX ca bug ....

Mais qu'est-ce qui se passe Smiley biggol

FX2.0.0.3 --> marche pas
FX1.0.7 --> ca marche
Safari --> ca marche
IE6 --> ca marche
IE5(mac) --> ca marche pas (évidement)

Est-ce que c'est possible que c'est parce que j'ai un macbook pro ? avec la puce intel qui fait que firefox bug et donc il n'affiche pas bien le contenu ?

Grrrrrrrrr

niuxe

Modérateur

17 Apr 2007 à 10:25

Salut Chum,

Là, je suis sur une machine où il n'y a que IE7. Ça passe. Sur les autres navigateurs, je ne peux pas me prononcer.

++

koala64

Modérateur

17 Apr 2007 à 10:26

Pour ma part, je suis sur Fx 1.5 ou 2.0.0.3 et je n'ai pas ce problème. Smiley confus

Ecris-tu bien [code ]ton code[ /code] (sans les espaces) ?

Chum

17 Apr 2007 à 10:36

koala64 a écrit :
Pour ma part, je suis sur Fx 1.5 ou 2.0.0.3 et je n'ai pas ce problème.

Ecris-tu bien [code ]ton code[ /code] (sans les espaces) ?

Voila voila j'ai fais le ménage ! Désolé pour le désagrément temporaire Smiley cligne

Je vais encore faire quelques testes et je vais vous transmettre mes recherche sous peu ! Il est fort possible que ce soit a cause de mon problème de programme mal adapté pour ma machine...

Camino --> marche pas

bref dites moi si chez vous ca marche !

Merci
Modifié par Chum (17 Apr 2007 - 10:56)

fvsch

17 Apr 2007 à 11:33

Le problème, c'est que ton body ne fait pas forcément toute la hauteur de la fenêtre (contrairement à la couleur de fond de body... oui ok, c'est pas super logique mais c'est comme ça avec Firefox 1.5+).

Il te faudrait donc :

html {height: 100%;}
body {
height: 100%;
background: url(monimage.jpg) no-repeat center center;
}

Une question : si tu fais un site en hauteur fixe, comment vas-tu gérer les contenus ? Qu'est-ce qui se passe si tu as trop de contenu pour la hauteur choisie ?

Chum

17 Apr 2007 à 11:55

Yesss !

Merci beaucoup ! Tout marche comme je voulais ! Merci beaucoup a tous !

Pour mon contenu:

La zone grise est en fait la pour symboliser 3 cube (optimisé 750/450). Dans ces 3 cubes je vais faire des intégrations de modules flash. de cette manière on aura pas de scroll barres de navigateur et on pourra géré le condenu de manière libre !
Mais la navigation et les "simple testes" seront en Php/css (include pour que la personne puisse faire facilement les up elle meme !)

L'image de fond c'est pour que si ces gout change dans le future il lui suffit de faire une image en tennant compte du format imposé!
La dimension 750/450 pour que les utilisateur d'écrant 800/600 puisse voir le site sans les scroll bares ! Mais sans design autour du contenu sécurisé...
Et les utilisateurs d'écrant 1024 ou plus grand verront le site en intégralité avec le design !

Si c'est pas claire ( Dyslexique power ^^) je vous invite a y faire un tour dans les prochains jours !

Merci pour tout ! Smiley biggrin

Sujet clos

Questions générales et questions de débutants

[RESOLU]Alignement d'une image dans body