Fond d'image

Version imprimable

11/02/2008, 22h53
jm49

Fond d'image

Bonsoir,

Voila mon soucis, je voudrais afficher une image sur ma page et cette page a un fond fixe et le contenu de la page (image comprise) est mobile. Donc le fond d'image n'est jamais le même, je l'aurais bien mis en transparent mais je perd enormément en qualité d'image en passant en gif. Si qqun a une idée je vous en remercie.

Cette page est visible au lien suivant dans la rubrique "QUI SOMMES NOUS? > Notre création" et l'image en question est la pyramide.
http://www.upteamhomme.fr/index2.html

D'avance merci.
12/02/2008, 00h11
kaiser59

Salut,

Simple question peux tu nous expliquer pourquoi tu passe par des iframes pour afficher non seulement ton menu et en plus le contenu il vient d'un autre site ?? 8O

Ensuite est ce que tu débutes dans la programmation ? Parce qu'il y a beaucoup de chose à revoir.

1 - Pourquoi utilises tu la balises <form></form> si tu n'as pas de formulaire à soumettre ?
2 - La balise <font></font> ne sert pas de paragraphe c'est plutôt la balise <p></p>
3 - Faut enlever les iframes qui n'ont aucun intérêt ici est même en général d'ailleurs et remplacer par des divs
et 4 - Une fois passer aux divs ajoute un doctype adéquat.

Pour ton images la je sèche j'ai jamais vue un jpeg s'adapter au fond d'écran alors qu'il a déjà une couleur de fond :?
12/02/2008, 22h01
jm49

1. Pour les balises <form> c'est un reste d'une ancienne version et merci de me le rappeler je dois les virer.
2. Pour les iframes, s'ils n'ont pas intérêt en général à quoi servent-ils alors? Et tu me proposes d'utiliser des divs, je ne suis pas contre, car il parait que les frame limitent le référencement, mais est il possible de charger différentes pages dans une div?
En gros j'aurais toujours ma page principale avec deux div (au lieu de 2 frames) et dans chaque div j'aurais respectivement mon menu et mes pages de formation?
Sinon il est toujours possible qu'a chaque fois que je clique sur un lien de mon menu ça m'ouvre une nouvelle page (a la place de celle en cours) contenant le div du menu et le div du contenu mais ne serait il pas plus lourd?

Comment vois tu les choses?

En espérant que tu réussisses à me comprendre.

Et pour la photo je suis bien d'accord avec toi, mais je voulais mettre un fond transparent à l'image mais la photo au format gif me donne une qualité de merde.

Encore merci pour tes conseils.
13/02/2008, 13h43
kaiser59

En quoi le fait d'utiliser les divs seraient plus lourd ?

C'est déjà plus léger que l'utilisation de tableau etc...

Sinon pour te faire une idée tu peux regarder ce post la
Début avec les divs

A quoi sert les iframes .... à rien.

L'utilisation des iframes n'a aucun intérêt dans le sens à quoi te sert de mettre une vue sur un autre site, si tu veux susciter la curiosité, l'utilisation d'un liens sera plus adapté et ne sera pas un frein au réferencement.

Au pire, si vraiment tu veux utiliser un iframe, cible une page à toi dont tu as le contrôle mais certainement pas dans le cas de ton contenu.

Et pour ton image, ce que je peux te dire c'est de ne pas mettre de fond transparent ce n'est pas géré par IE.
Est ce que ton image et d'origine jpeg ? J'entends par la que tu l'enregistre en png puis que tu modifie son extension en jpg je ne sais pas si cela fonctionne mais mieux vaut éliminer tout les cas ;)
14/02/2008, 01h02
jm49

Voici mon soucis lorsque je veux passer ça en div.
J'ai u div "conteneur" qui contient deux autres div : "menu" et "article" o sous firefox ils se positionnent bien mais sous IE ça veut rien savoir, le div "article" se met tjs en dessous.

J'ai parcouru plein de forum et rien de bien concret, donc si qqun a une idée se serait cool.
14/02/2008, 14h56
kaiser59

Pour que cela fonctionne il faut que tu ajoute un doctype dans un premier temps
Ensuite il y a beaucoup de truc bizarre comme la balise <font> pourquoi est-elle tjrs la ?

Regarde ceci cela pourra te servir dans ta construction avec les divs Exemple
14/02/2008, 16h44
kenny.kev

bonjour,

Pour ton Image tu doit utiliser le format png car seule le png gère a 100% la transparence. Pour la transparence tu la fait avec photoshop ou Gimp, si tu ne sais pas le faire envoie la moi et je te le ferai.

Pour t'aider a développer tu as un module sous firefox qui s'appelle firebug, il te permettra de voir en détaille se que tu fais, par exemple : la position des div, leurs tailles, etc...
15/02/2008, 01h35
jm49

Merci les gars!!! Je suis sur la bonne piste, je vous fait parvenir le lien de mon site des que j'ai fini, je ne prétend pas qu'il sera parfait, mais il ne pourra pas être pire. :oops:

Sinon je t'envoie la photo des que possible.
05/03/2008, 00h18
jm49

Voila mon site est partiellement fini, j'ai utilisé les Div à la place des frames et du CSS, le lien :
http://www.upteamhomme.fr/index2.html
05/03/2008, 00h48
kenny.kev

il y a de l'amélioration, mais tu n'es pas obligé d'utiliser des <div> pour tout, par exemple : pour tes titres, la balise <h2> ou <h3> etc ... mais aussi tes paragraphes, la balise <p>.

Mais par conte très bien tu as une div pour le menu et une autre pour le corps de ton site.

Pour ton image tu me l'envoies quand tu veux.
05/03/2008, 10h25
Deallyra

plop
je prends le train en cour de route mais le png n'est pas prit en charge par IE6...
du moins pour sa transparence...
donc il faut trouver autre chose
06/03/2008, 19h47
jm49

Citation:

Envoyé par kenny.kev

il y a de l'amélioration, mais tu n'es pas obligé d'utiliser des <div> pour tout, par exemple : pour tes titres, la balise <h2> ou <h3> etc ... mais aussi tes paragraphes, la balise <p>.

Mais par conte très bien tu as une div pour le menu et une autre pour le corps de ton site.

Pour ton image tu me l'envoies quand tu veux.

Bonsoir,

Merci pour tes encouragements.
Pour ce qui est des images, j'ai deux soucis :
- Le soucis du fond transparent pour l'image (je te la met dispo en fichier joint (pyramide.jpg)8-)).
- Le fond d'écran du div de contenu que je voudrais mettre en fixe, mais lorsque je rajoute "background-attachment:fixed;" en propriété css de mon div j'obtiens un résultat tout bizarre (voir image jointe). Je ne trouve pas comment faire, partout ils disent d'utiliser ça et pour moi pof ça plante.:(

D'avance merci pour vos réponses.
06/03/2008, 19h48
jm49

Citation:

Envoyé par MimiCracra44

plop
je prends le train en cour de route mais le png n'est pas prit en charge par IE6...
du moins pour sa transparence...
donc il faut trouver autre chose

Merci pour cette info je prend note.
06/03/2008, 19h55
kenny.kev

bonsoir,
dit moi quelle est la taille réelle de ton image
06/03/2008, 20h11
jm49

Citation:

Envoyé par kenny.kev

bonsoir,
dit moi quelle est la taille réelle de ton image

La photo que je 'ai envoyé est celle que j'insère dans ma page web (Chapitre qui sommes nous>Notre création). Donc la taille réelle est celle de la photo que j'ai mi a disposition
06/03/2008, 20h20
kenny.kev

1 pièce(s) jointe(s)

voila c'est fait pour l'image

pour le probleme de ton fond ça vien qu'il manquait l'atribut
Code:

1 2 background-repeat: no-repeat; background-position: right;
Pour que ton image ne se repète pas et la aligne à droit car tu es en position relative voici ton id complet :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 div#contenu { background-image:url(../images/fond_contenu2.jpg); background-repeat:no-repeat; background-attechment: fixed; background-position: right; float:left; height:820px; left:130px; overflow:auto; position:relative; top:20px; width:755px; }
Bon courage

08/03/2008, 11h47
kenny.kev

bonjour,
Je me suis renseigné sur IE6 pour la transparence des fichier png il y a un script PHP, a mettre dans les pages web, qui corrige ce bug

Merci de ton intervention MimiCracra44, grace a toi je sais que l'on peut le resoudre le bug.
09/03/2008, 11h06
blueice

J'ai lu le post en diagonale, pourquoi persister à faire un site bancal :aie: ?

Tu dois séparer ta page en deux, gauche le menu, droite le contenu.
En fond du menu un dégradé d'1 pixel de large par 200pixels de haut avec la couleur de fin du dégradé en fond du menu.
Pour le menu utilise des listes bon sang !!

Ensuite pour le contenu, un en-tête avec les vagues en fond et le titre en texte par dessus, en dessous la même couleur de fin du dégradé.
Et enfin tout le reste du contenu, avec textes et images.

C'est pourtant pas bien compliqué...

Citation:
Envoyé par kenny.kev
pour le probleme de ton fond ça vien qu'il manquait l'atribut
Code:

1 2 background-repeat: no-repeat; background-position: right;
Pour que ton image ne se repète pas et la aligne à droit car tu es en position relative voici ton id complet :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 div#contenu { background-image:url(../images/fond_contenu2.jpg); background-repeat:no-repeat; background-attechment: fixed; background-position: right; float:left; height:820px; left:130px; overflow:auto; position:relative; top:20px; width:755px; }
Bon courage
Merci pour l'image, c'est parfait. Tu fais ça avec quel logiciel? Photoshop?
Par contre pour ce qui est du css, ça ne marche pas, voici, ci-joint, un imprim'ecran de ce que ça donne sous ie7.

10/03/2008, 23h31
jm49

Citation:

Envoyé par blueice

J'ai lu le post en diagonale, pourquoi persister à faire un site bancal :aie: ?

Tu dois séparer ta page en deux, gauche le menu, droite le contenu.
En fond du menu un dégradé d'1 pixel de large par 200pixels de haut avec la couleur de fin du dégradé en fond du menu.
Pour le menu utilise des listes bon sang !!

Ensuite pour le contenu, un en-tête avec les vagues en fond et le titre en texte par dessus, en dessous la même couleur de fin du dégradé.
Et enfin tout le reste du contenu, avec textes et images.

C'est pourtant pas bien compliqué...

La méthode de l'entête n'est pas mal mais celle que j'ai utilisée n'est pas non plus mauvaise, ça se vaut.

Merci

Cordialement,

JM

C'est bon pour l'alignement de mon fond d'ecran fixe. Je suis repassé en position:absolute et est utiliser plus finement l'option background-position

feuille CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
div#contenu {
	position:absolute;
	float:left;
	width:755px;
	height:820px;
	background-image : url(../images/fond_contenu2.jpg);
	background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: 70% -31%;
        left:367px;
        top:35px;
	overflow: auto;
    }

13/03/2008, 21h09
kenny.kev

bonsoir,

excusez-moi pour cette absence ci longue (des problèmes familiaux)

Citation:

Merci pour l'image, c'est parfait. Tu fais ça avec quel logiciel? Photoshop?

Oui j'utilise le logiciel photoshop mais tu peux utiliser Gimp qui est gratuit mais il faut que tu partes d'un fond transparant et non blanc.

Exactement IE pose de très gros problèmes pour les site que développe actuellement je fait deux CSS, un pour firefox et les autres et un pour IE avec un traitement PHP qui me permet d'utiliser le bon CSS en fonction du navigateur :?. Je sais qu'il y a mieux mais bon ;).

parfait je ne savais pas que l'on pouvais faire comme ça.

bon courage pour la suite

Fuseau horaire GMT +2. Il est actuellement 09h18.