[Résolu]Probleme de css / background site

Bonjour,

J'ai actuellement un probleme avec le fond de mon site. Voila une image qui parlera certainement mieux qu'un long blabla :

[img=http://img126.imageshack.us/img126/2573/adelca0.th.jpg]

voila donc le probleme, j'aimerai ne pas avoir cette "coupure" et voici maintenant mon css :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background:#ffff00 url(images/fond2.jpg) repeat-x bottom center;
height:100%;/*---obligatoire pour le footer---*/	
margin: 0;
padding: 0;
}

Modifié par wachalala (10 Nov 2007 - 18:19)

Bonsoir wachalala,

Sans une page en ligne, sans accès à ton image de fond, il nous est difficile de te venir en aide...
Techniquement, tu répètes en le bas de ta page sur l'axe des abscisses une image dont nous n'avons aucune information (dimension par exemple...) que veux-tu que nous fassions de cette info ?
A te lire

Bonsoir,

voila le liens du site : http://www.vivafiesta.fr/

j'espere que ca sera plus facile maintenant ^^

Hello wachalala ,

pas sûr d'avoir bien compris mais tu pourrais essayer de rajouter ça :

body {
	background:#fe8b0a url(images/fond2.jpg) repeat-x scroll left top;
}

pour coller avec le dégradé du haut...

A+
Modifié par Heyoan (08 Nov 2007 - 04:33)

Hello,

Je viens enfin de comprendre (enfin il me semble ) ce que tu tentes de faire...je suis lent parfois (ou à coté de la plaque ?!... )

Bref, tu veux positionner ton image fond2.jpg en bas de ta page, la répéter sur l'axe des abscisses et faire la liaison avec ton background-color #ffff00, c'est bien cela ?
Si oui, ceci devrait correspondre à ton besoin :

background:#ffff00 url(images/fond2.jpg)repeat-x left bottom;

Ceci dit tu as d'autres problèmes à régler avant ces petites finitions, ta page n'est pas valide tu as des problèmes de positionement, des erreurs de script, etc... bref, du boulot en perpective

Sinon, ça sent la bonne humeur ton p'tit boulot, c'est gai et coloré et j'aime beaucoup ton favicon

Ce ne sera que mieux lorsque tu auras corrigé ce qui ne va pas
Modifié par 6l20 (08 Nov 2007 - 11:56)

Bonjour de nouveau

merci Heyoan et 6l20 mais aucune des deux solutions n'a fonctionné...
et effectivement, je souhaiterai positionner l'image en bas de ma page puis que l'image de fond finisse la page jusqu'en haut
j'espere être claire

De plus je me doute que je dois avoir plein de petites erreurs sachant que c'est un de mes premiers sites, je corrigerais ca tout de suite apres !

Merci pour votre aide !

@6l20 : Merci pour le favicon
Modifié par wachalala (08 Nov 2007 - 10:13)

Bonjour,

Le code suivant est problématique:

body, html {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
}

Ça devrait pouvoir se simplifier ainsi:

body, html {
    margin: 0;
    padding: 0;
}

Avec un height: 100% sur html et body, tu donnes à body une hauteur de 100% de la hauteur de la zone de visualisation (viewport), et pas de 100% de la hauteur de la page (la référence «hauteur de la page» n'est pas utilisable en CSS). D'où le problème.

Le positionnement absolu pose également problème ici, je ne sais pas vraiment pourquoi.
Modifié par Florent V. (08 Nov 2007 - 12:25)

wachalala a écrit :

Bonjour de nouveau

merci Heyoan et 6l20 mais aucune des deux solutions n'a fonctionné...
et effectivement, je souhaiterai positionner l'image en bas de ma page puis que l'image de fond finisse la page jusqu'en haut
j'espere être claire
...
Merci pour votre aide !
@6l20 : Merci pour le favicon

Mais de rien

Au passage la solution que je t'ai proposée (et que j'ai évidemment vérifiée, Ouaih, j'avais bien compris la question !!! ) fonctionne parfaitement sous IE5.01, IE5.5, IE6, IE7, Firefox 2.0.0.9....

body {background:#ffff00 url(fond2.jpg) repeat-x bottom ;}

le positionnement left,center ou right ne te sers à rien ici

IE7 semble comprendre l'argument !important (quelqu'un peut-il confirmer, chez moi I6 opte pour fond2.jpg et IE7 pour fond.png avec

body {
background:#ffff00 url(fond2.jpg) repeat-x bottom;
background:#ffff00 url(fond.png) repeat !important;
}

donc a priori, IE7 optera pour le fond.png repeat que tu proposes...

Voili, Voilou...

Whoua vous êtes super ca marche presque !!

j'ai juste encore deux petits soucis :

sous FF : J'ai encore un petit espacement blanc sur la page d'accueil et seulement sur cette derniere !

Sous ie6/7 : Je ne sais pas pourquoi mais j'ai un décalage de cette page d'accueil qui se remet normalement des que l'on clique sur n'importe quelle liens ... étrange ...

Merci beaucoup de votre aide !

Hello,

Il te reste un height: 100% appliqué à body, dans le fichier suivant:
http://www.vivafiesta.fr/templates/0/fr/ui1.css

Merci florent mais malgré ta réponse, ca ne marche toujours pas

edit : Bon j'ai rajouté un fixed et ca marche nikel maintenant ^^
j'ai plus que mon probleme sous IE apres je vous embete plus :

a écrit :
Sous ie6/7 : Je ne sais pas pourquoi mais j'ai un décalage de cette page d'accueil qui se remet normalement des que l'on clique sur n'importe quelle liens ... étrange ...

Modifié par wachalala (08 Nov 2007 - 15:00)

wachalala a écrit :
Merci florent mais malgré ta réponse, ca ne marche toujours pas

Je vais sur la page d'accueil du site, je désactive le height: 100% sur body, et j'obtiens le rendu suivant:


C'est pas le bon rendu?

Edit: je fais des tests sur ta page pour vérifier, mais le code HTML change en cours de route... Donc je vais te laisser stabiliser ça.
Modifié par Florent V. (08 Nov 2007 - 15:06)

c'est bon j'y touche plus

Pour l'image de fond de body: tu peux sans doute en rester là. body a toujours une hauteur figée à 100% du viewport, mais le background-position: fixed permet d'avoir un résultat peut-être plus sympa.

Si tu veux que le dégradé orangé ne s'affiche que lorsqu'on arrive en bas de page, et pas systématiquement en bas d'écran comme actuellement, il faudra:
- supprimer le "fixed" indiqué comme valeur de la propriété background (le remplacer par "scroll", ou ne rien mettre à la place);
- supprimer le height: 100% appliqué à body.
Tu peux tester les deux solutions pour voir la différence de rendu.

Sinon, autre problème: ton menu (ul.menu) a une largeur de 900px. Du coup, il sort de son conteneur, et déborde à droite... en affichage en 1024x768, on se retrouve donc avec une barre de défilement horizontale inutile à cause de cela.
Une largeur de 700 peut faire l'affaire.
Ceci dit, c'est le conteneur global lui-même qui est trop large: 1000px, il n'y a quasiment aucune chance que ça passe sur un écran de 1024px, si on compte les bordures de la fenêtre, la barre de défilement à droite, le fait que la fenêtre n'est pas toujours maximisée... en général, on utilise plutôt la valeur de référence de 980px, voire de 960px.

Autre chose: le rendu dans IE est pas terrible.
- transparence PNG qui ne passe pas dans IE6 (solution: ne pas utiliser de PNG-24 avec couche alpha, c'est inutile pour ce design);
- problème de centrage (pas testé de solution);
- problème de retrait à gauche en trop pour les listes (sur ce point, chercher dans la FAQ du forum).

bonsoir et désolé du retard pour la réponse !

Bon merci pour les infos florents j'ai essayé de modifier un peu tout ca mais des que je change quelques trucs, c'est la merde sous ie

bref j'ai résolu mon probleme de centre sur ie et tout roule maintenant ! plus qu'a corriger mes erreurs !

Un grand merci a vous !!