Discussion :

[jm49]

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.

[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 ??

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

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

[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

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

[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

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

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

Sinon je t'envoie la photo des que possible.

[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

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

[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

[jm49]

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

[jm49]

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.

[kenny.kev]

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

[jm49]

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

[kenny.kev]

voila c'est fait pour l'image

[kenny.kev]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[blueice]

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

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

[jm49]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.