Sujets similaires

Sujet: Problème Fiche pub Dim 16 Sep 2012, 11:48

Bonjour

,

J'ai un gros ou un petit (selon les gens) problème, j'ai commencé l'intégration d'un fiche pub, mais mon problème c'est que le texte/image reste coller en haut Suspect

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

</head>

<div style="background: #ffffff; width: 500px; height:963px; background-image: url('http://www.img.dizee.fr/images/backgrvcv.png') ; box-shadow: 0px 0px 7px #000000; -moz-box-shadow: 0px 0px 7px #000000; -o-box-shadow: 0px 0px 7px #000000; -htm-box-shadow: 0px 0px 10px #000000; -webkit-box-shadow: 0px 0px 7px #000000; ">
<div style="background-image: url('http://img15.hostingpics.net/pics/823693Derniertutorielfond.png'); width: 500px;height:960px; ">
<div style="background-image: url('http://img15.hostingpics.net/pics/737552Corp.png');width: 500px;height:960px;margin-left: -4px;">

<a href="http://serialdesigner.forumactif.fr/t395-signature-star-wars"><img src="http://img15.hostingpics.net/pics/690146StarWarTutoriel.png" style="/></a>

<a href="http://serialdesigner.forumactif.fr/t414-large-creation-guitare-classique"><img src="http://img15.hostingpics.net/pics/941725TutorielGuitareClassique.png" /></a>

<a href=""><img src="http://img15.hostingpics.net/pics/301936TutorielMonsterWar.png" /></a>

<a href="http://serialdesigner.forumactif.fr/t163-signature-street-fighter"><img src="http://img15.hostingpics.net/pics/884123TutorielRyu.png" /></a>

<div style="text-align:center; font-family: calibri; font-size: 12px; margin-bottom: -100px;">
Serial Designer est <b>un vrai repère</b> pour les graphistes ! Que vous soyez débutant où expert, vous trouverez des sections qui vous conviennes comme <b><a href="http://serialdesigner.forumactif.fr/f11-les-tutoriels">nos tutoriels</a></b>, <b><a href="http://serialdesigner.forumactif.fr/f10-formation">des formations</a></b>, des TPs et même participer à des <b><a href="http://serialdesigner.forumactif.fr/c5-activite-graphique">concours graphiques</a></b> et tout cela dans le but d'améliorer votre niveau tout en vous amusant. Le forum a été construit dans le but de vous faire<b> progresser</b>. Un section de <b>ressource complète</b> est aménagée pour vous ainsi que des zones de détente.<br /> <br />

<span style="font-size: 9px;"><b>SerialDesigner est fais pour vous, <a href="http://serialdesigner.forumactif.fr/">on vous attends.</a></b> </span>

</div>
</div>
</div>
</div>
<body>

</body>
</html>

Cordialement K-Surf

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 12:45

Hello,

Alors je mieux serait de rajouter des marges à chacune de tes images. Pour la première, comme on veut qu'elle soit légèrement décalé de la gauche et un peu en haut, on va ajouter ceci

Code:: style="margin: 0px 0px 0px 0px;"

à ton image ce qui donne :

Code:: <img style="margin: 0px 0px 0px 0px;" src="http://img15.hostingpics.net/pics/690146StarWarTutoriel.png" style="/>

Personnellement, quand c'est question de marge je mets un peu au hasard jusqu'à trouver la bonne valeur. Ici, en essayant, j'ai trouvé que

Code:: style="margin: 5px 14px 0px 18px;"

Etait pas mal.

A savoir pour les prochaines images, tu utilise le même code, au même emplacement mais juste en changeant les valeurs. Maintenant, je te propose de faire de même pour les autres images. Je ne vais quand même pas te donner le bon code sans que tu essaie par toi même. Siffle

Si jamais tu rencontre des problèmes, hésite pas à dire.

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 12:48

Bonjour,

Ta fiche publicité est-elle destinée à être postée telle qu'elle dans un message FA (auquel cas il faut retirer toute la partie déclaration de documents qui est inutile) ou bien dans une iframe (auquel cas il serait bien mieux de retirer tout le CSS du HTML et de faire une feuille de style propre) ?

D'autant plus que tu as mis le corps du document en dehors des balises <body> =.=

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 13:05

Melon, merci j'essaye sa tous de suite, Christa c'est dans une inframe.... donc je sépare ?

Edit ça bug de partout....

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

</head>

<body>
<div style="background: #ffffff; width: 500px; height:963px; background-image: url('http://www.img.dizee.fr/images/backgrvcv.png') ; box-shadow: 0px 0px 7px #000000; -moz-box-shadow: 0px 0px 7px #000000; -o-box-shadow: 0px 0px 7px #000000; -htm-box-shadow: 0px 0px 10px #000000; -webkit-box-shadow: 0px 0px 7px #000000; ">

<div style="background-image:url('http://img15.hostingpics.net/pics/823693Derniertutorielfond.png'); width:500px; height:960px; ">
<a href="http://serialdesigner.forumactif.fr/t395-signature-star-wars"><img src="http://img15.hostingpics.net/pics/690146StarWarTutoriel.png" style="margin-top: 250px; margin-left: 35px;"/></a>

<a href="http://serialdesigner.forumactif.fr/t414-large-creation-guitare-classique"><img src="http://img15.hostingpics.net/pics/941725TutorielGuitareClassique.png" /></a>
<a href=""><img src="http://img15.hostingpics.net/pics/301936TutorielMonsterWar.png" /></a>

<a href="http://serialdesigner.forumactif.fr/t163-signature-street-fighter"><img src="http://img15.hostingpics.net/pics/884123TutorielRyu.png" /></a>

</div>

<div style="background-image: url('http://img15.hostingpics.net/pics/737552Corp.png');width: 500px;height:960px;position: abosulute;">

<div style="text-align:center; font-family: calibri; font-size: 12px; margin-bottom: -100px;">
Serial Designer est <b>un vrai repère</b> pour les graphistes ! Que vous soyez débutant où expert, vous trouverez des sections qui vous conviennes comme <b><a href="http://serialdesigner.forumactif.fr/f11-les-tutoriels">nos tutoriels</a></b>, <b><a href="http://serialdesigner.forumactif.fr/f10-formation">des formations</a></b>, des TPs et même participer à des <b><a href="http://serialdesigner.forumactif.fr/c5-activite-graphique">concours graphiques</a></b> et tout cela dans le but d'améliorer votre niveau tout en vous amusant. Le forum a été construit dans le but de vous faire<b> progresser</b>. Un section de <b>ressource complète</b> est aménagée pour vous ainsi que des zones de détente.<br /> <br />

<span style="font-size: 9px;"><b>SerialDesigner est fais pour vous, <a href="http://serialdesigner.forumactif.fr/">on vous attends.</a></b> </span>

</div>

</div>
</body>
</html>

J'ai bien replacer ma fiche entre les balises < body > et pafff sa décale tous....

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 13:28

Il te faut surtout commencer par utiliser une syntaxe propre pour ta page U.U

Code:: <!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="utf-8" />


   <style type="text/css">
   
   </style>

<title>Titre de la page</title>
</head>

<body>



</body>

</html>

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 13:46

Voilà j'ai remis de l'ordre mais sa fais toujours le même bug Sad

:

Code:: <!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="utf-8" />


<style type="text/css">
.body {
background-color: #ffffff;
width: 500px;
height:963px;
background-image: url('http://www.img.dizee.fr/images/backgrvcv.png') ;
box-shadow: 0px 0px 7px #000000;
-moz-box-shadow: 0px 0px 7px #000000;
-o-box-shadow: 0px 0px 7px #000000;
-htm-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 7px #000000;
}
#fondtuto {
background-image: url('http://img15.hostingpics.net/pics/823693Derniertutorielfond.png');
width:500px;
height:960px;
}
#fondtext{
background-image: url('http://img15.hostingpics.net/pics/737552Corp.png');
width: 500px;
height:960px;
}
#description{
text-align:center;
font-family: calibri;
font-size: 12px;
margin-bottom: -100px;
}

</style>

<title>Fiche pub Serialdesigner</title>
</head>

<body>

<div id="fondtuto">
<a href="http://serialdesigner.forumactif.fr/t395-signature-star-wars"><img src="http://img15.hostingpics.net/pics/690146StarWarTutoriel.png" style="margin-top: 250px; margin-left: 35px;"/></a>

<a href="http://serialdesigner.forumactif.fr/t414-large-creation-guitare-classique"><img src="http://img15.hostingpics.net/pics/941725TutorielGuitareClassique.png" /></a>

<a href=""><img src="http://img15.hostingpics.net/pics/301936TutorielMonsterWar.png" /></a>

<a href="http://serialdesigner.forumactif.fr/t163-signature-street-fighter"><img src="http://img15.hostingpics.net/pics/884123TutorielRyu.png" /></a>

</div>

<div id="fondtext">
<div id="description">
Serial Designer est <b>un vrai repère</b> pour les graphistes ! Que vous soyez débutant où expert, vous trouverez des sections qui vous conviennes comme <b><a href="http://serialdesigner.forumactif.fr/f11-les-tutoriels">nos tutoriels</a></b>, <b><a href="http://serialdesigner.forumactif.fr/f10-formation">des formations</a></b>, des TPs et même participer à des <b><a href="http://serialdesigner.forumactif.fr/c5-activite-graphique">concours graphiques</a></b> et tout cela dans le but d'améliorer votre niveau tout en vous amusant. Le forum a été construit dans le but de vous faire<b> progresser</b>. Un section de <b>ressource complète</b> est aménagée pour vous ainsi que des zones de détente.<br /> <br />

<span style="font-size: 9px;"><b>SerialDesigner est fais pour vous, <a href="http://serialdesigner.forumactif.fr/">on vous attends.</a></b> </span>

</div>

</div>

</body>

</html>

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 13:53

Je me permet d'intervenir. Heu à la base, j'aurais plutôt mit :

Code:: margin: 0px 0px 0px;

Et non une marge différente pour chaque côté (margin-left...). En plus, tu mets des valeurs mais wow. Elles sont dix fois trop grandes !
Surtout que tu n'as même pas fait attention à ce que j'ai dit pour la première image, je veux bien t'aider mais faudrait que tu prenne en compte chaque points. Calme

Ps : C'est Melone et pas melon. '-'

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 13:58

Attention, on écrit body et pas .body dans le CSS. C'est un élément HTML que l'on cible et non pas une classe !

Pour le bug j'attends toujours un screen o/

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 14:32

Melone a écrit:

Je me permet d'intervenir. Heu à la base, j'aurais plutôt mit :

Code:: margin: 0px 0px 0px;

Et non une marge différente pour chaque côté (margin-left...). En plus, tu mets des valeurs mais wow. Elles sont dix fois trop grandes !
Surtout que tu n'as même pas fait attention à ce que j'ai dit pour la première image, je veux bien t'aider mais faudrait que tu prenne en compte chaque points. Calme

Ps : C'est Melone et pas melon. '-'

je ne sais pas c'est quoi le premier 0px, le second... je me sens plus stable sur les différentes margins, ça revient au même au finale non ?

Christa voilà >> http://k-surf.forumactif.fr/h5-fiche-pub

Code:: <!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="utf-8" />


<style type="text/css">
body {
background-color: #ffffff;
width: 500px;
height:963px;
background-image: url('http://www.img.dizee.fr/images/backgrvcv.png') ;
background-repeat: no-repeat;
box-shadow: 0px 0px 7px #000000;
-moz-box-shadow: 0px 0px 7px #000000;
-o-box-shadow: 0px 0px 7px #000000;
-htm-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 7px #000000;
}
#fondtuto {
background-image: url('http://img15.hostingpics.net/pics/823693Derniertutorielfond.png');
width:500px;
height:960px;
}
#fondtext{
background-image: url('http://img15.hostingpics.net/pics/737552Corp.png');
width: 500px;
height:960px;
}
#description{
text-align:center;
font-family: calibri;
font-size: 12px;
margin-top: -580px;
}

</style>

<title>Fiche pub Serialdesigner</title>
</head>

<body>

<div id="fondtuto">
<a href="http://serialdesigner.forumactif.fr/t395-signature-star-wars"><img src="http://img15.hostingpics.net/pics/690146StarWarTutoriel.png" style="margin-top: 250px; margin-left: 35px;"/></a>

<a href="http://serialdesigner.forumactif.fr/t414-large-creation-guitare-classique"><img src="http://img15.hostingpics.net/pics/941725TutorielGuitareClassique.png" /></a>

<a href=""><img src="http://img15.hostingpics.net/pics/301936TutorielMonsterWar.png" /></a>

<a href="http://serialdesigner.forumactif.fr/t163-signature-street-fighter"><img src="http://img15.hostingpics.net/pics/884123TutorielRyu.png" /></a>

</div>

<div id="fondtext">
<div id="description">
Serial Designer est <b>un vrai repère</b> pour les graphistes ! Que vous soyez débutant où expert, vous trouverez des sections qui vous conviennes comme <b><a href="http://serialdesigner.forumactif.fr/f11-les-tutoriels">nos tutoriels</a></b>, <b><a href="http://serialdesigner.forumactif.fr/f10-formation">des formations</a></b>, des TPs et même participer à des <b><a href="http://serialdesigner.forumactif.fr/c5-activite-graphique">concours graphiques</a></b> et tout cela dans le but d'améliorer votre niveau tout en vous amusant. Le forum a été construit dans le but de vous faire<b> progresser</b>. Un section de <b>ressource complète</b> est aménagée pour vous ainsi que des zones de détente.<br /> <br />

<span style="font-size: 9px;"><b>SerialDesigner est fais pour vous, <a href="http://serialdesigner.forumactif.fr/">on vous attends.</a></b> </span>

</div>

</div>

</body>

</html>

Mais quand je lève le fond, le texte monte aussi par la même occasion Problème Fiche pub 4258144352

....

Sujet: Re: Problème Fiche pub Dim 16 Sep 2012, 14:50

Oui alors, laisse moi récapituler :
• On ne met pas d'ombres, de hauteur ou de bordures au CORPS d'une page, en général.
• Pourquoi des identifiants et pas des classes ?
• Chacun de tes div a une grande hauteur je ne vois pas pourquoi
• Il y a toujours du CSS dans le code HTML (et des marges gigantesques comme Melone te l'a indiqué)
• Là je contredis Melone, il est inutile de mettre des marges aux images, il suffit de les placer dans un bloc et de lui mettre des marges (si vraiment c'est utile...)
• Tu n'étais pas sensé savoir coder toi à la base ?

On pourrait savoir quelle est l'apparence que tu souhaites avoir en fait ? Parce que là c'est très bizarre.

EDIT : Ah d'accord l'image de fond c'est le titre "les derniers tutos" et la bande grise. Tu aurais pu le coder au lieu de faire une image, mais soit.

Etape 1 : Ne touche pas à la mise en page de body pour le moment (ergo ne mets rien)
Etape 2 : Crée ton premier bloc avec ton fond, et fixe sa largeur et sa hauteur de manière à ce qu'elles soient égales à celle de de l'image.
Etape 3 : A l'intérieur de ce bloc là, tu peux placer les autres blocs les uns à la suite des autres en réglant les marges de façon à ce que ça colle à ce que tu veux.

Sujet: Re: Problème Fiche pub Lun 17 Sep 2012, 11:19

A ok je comprends mieux, oui normalement je devrais savoir mais quand je fais des erreurs je m'embrouille et je fini par faire du gros n'importe quoi...
Mais je trouve que j'arrive plus à trouver et résoudre les erreurs des autres que mes erreurs Rolling Eyes

d'ou ma spécialité.... Je vous tiens au courant de me progression (en éditant ce message) Very Happy

Sujet: Re: Problème Fiche pub Lun 17 Sep 2012, 12:22

Soit dit en passant, pour la remarque sur les margin, je ne peux que conseiller d'utiliser la syntaxe simplifiée : margin: 0;.

Déjà parce-que px n'est pas nécessaire quand cela vaut 0, ensuite et surtout parce-que une seule valeur l'applique aux 4 margin-*, ce qui évite de dupliquer bêtement du code (margin: 0; est plus concis et tout aussi clair que margin: 0px 0px 0px 0px;).

Ensuite, petit cours express sur la syntaxe margin pour K-Surf vis-à-vis des équivalences avec les propriétés margin-top, margin-right, margin-bottom et margin-left. On a les équivalences suivantes :

margin: top right bottom left;
margin: top (right/left) bottom;
margin: (top/bottom) (right/left);
margin: (top/right/bottom/left);

Ce qui revient à expliquer pourquoi margin: 0; l'applique aux 4 propriétés.

Soit dit en passant... Smile

Sujet: Re: Problème Fiche pub Sam 22 Sep 2012, 06:51

Bonjour,

Voilà cinq jours que nous n'avons plus de nouvelles de la part de l'auteur. Le problème est-il résolu ?
Si nous n'avons pas de réponse dans 4 jours, le sujet se verra archivé !

Merci de ta compréhension Problème Fiche pub 926145

Sujet: Re: Problème Fiche pub Sam 22 Sep 2012, 07:02

Bonjour,

Alors je n'avais pas trop eu de temps, donc je me suis dis que fusionner le background avec le fond (de la description) et le fond des tutoriels serait plus simple à coder et effectivement, j'ai réussi à avoir ce que je voulais Very Happy

Problème résolu, merci espeon pour ton explication je comprends mieux maintenant Smile

PS: Christa, je saurais maintenant que on ne met pas d'ombres, de hauteur ou de bordures au CORPS d'une page, en général.

Sujet: Re: Problème Fiche pub Sam 22 Sep 2012, 08:15

Bonjour,
si le problème est résolu, je classe (:
Merci de l'avoir signalé, mais la prochaine fois, si possible, pense à éditer ton titre pour nous aider ! Problème Fiche pub 926145

Problème Fiche pub

Problème Fiche pub

Sujets similaires

Sujets similaires

Partenaires Or