Codage page d'accueil

4 participants

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 18:40

Bonjour,

Je viens vers vous car j'aurais bien besoin de votre aide. J'ai créé une page d'accueil sous Photoshop sur laquelle j'ai prévu des cadres pour mettre du texte, le seul soucis c'est que j'ai beau chercher sur internet, je ne trouve pas le fameux code pour mettre mon texte dans une zone spéciale. J'ai essayé le code qui permet de maper une partie de l'image et d'insérer un lien en le modifiant de façon à pouvoir insérer mon texte, mais rien ne se passe. Quelqu'un pourrait m'expliquer comment on fait pour insérer du texte sur une zone spécifique d'une image, en l'occurence de ma page d'accueil ?

Merci d'avance.

PS : voici ma page d'accueil, histoire que vous compreniez de quoi je parle
http://files.getwebb.org/view-cre635ub.html


Dernière édition par Sweeney le Sam 12 Jan 2013 - 21:23, édité 3 fois
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Roxy. Ven 11 Jan 2013 - 19:22

Bonsoir,

Déjà pour le mapping des liens, un logiciel de graphisme pourra faire l'affaire. Je vous propose ce tutoriel pour photoshop : ici.

Ensuite, pour les blocs ça se complique un peu. Vous devrez utiliser des divs ainsi que des marges.
Pour les div, c'est simple il vous suffit de créer ceci :
Code:
<div style="">Blabla</div>
Vous écrirez votre texte là où il y a blabla et le css (soit les marges) entre les "".
Pour les marges, utilisez donc ce code en remplaçant les 0 par de bonnes valeurs :
Code:
left: 0px;
top: 0px;
Par conséquent, vous devrez faire preuve de patience pour trouver le bon positionnement.

Cordialement,
Roxy.

Roxy.
Membre habitué

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 19:26

Merci beaucoup pour le code !
Et au niveau de la longueur, comment est-ce que je dois m'y prendre pour que le texte ne soit pas plus long que mes cadres ?
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Roxy. Ven 11 Jan 2013 - 19:45

Le mieux serait de déterminer une taille avec :
Code:
width: 0px;
height: 0px;
Où width = largeur & height = hauteur.

Et d'y mettre une scrollbar (comme ça si votre texte est plus long, vous aurez une barre de défilement) en ajoutant ceci au css :
Code:
overflow: auto;

Cordialement,
Roxy.

Roxy.
Membre habitué

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 20:03

C'est nickel, je vais essayer avec tout ça, merci beaucoup !
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 20:07

Désolée du DP, mais en fait ça ne marche pas, le texte continue de se positionner en-dessous de l'image.
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Roxy. Ven 11 Jan 2013 - 20:34

Puis-je voir le code au complet ?

Cordialement,
Roxy.

Roxy.
Membre habitué

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 20:38

Oui bien-sûr, le voilà :
Code:
<img src="http://files.getwebb.org/files/a6/ba/fa/23fb96c1985b593da38ee9006ec3df8fe1/source.png"><div style="left: 100px; top: 100px; color: #ffffff">Blabla</div>
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Ven 11 Jan 2013 - 20:53

Vous devriez faire un tableau avec des class.

Par exemple
Le Css
Code:

.bg{
background: url("    Adresse de l'image    ");}

.espace_vide{
margin-top: 200px;} /* Corresponds à l'espace au dessus */

.case1{
width: 200px; /* hauteur */
height: 300px; /* largeur */}

.case2{
width: 150px; /* hauteur */
height: 300px; /* largeur */
margin-left:50px; /* marge par rapport à la case 1 */
}

.case3{
width: 300px; /* hauteur */
height: 300px; /* largeur */
margin-left:50px; /* marge par rapport à la case 2 */

}

Le HTML
Code:

<div class="bg">
<div class="espace_vide">
<table>
<td class="case1">
Contenu 1
</td>
<td class="case2">
Contenu 2
</td><td class="case3">
Contenu 3
</td>
</table>
</div>
</div>


Dernière édition par Grafik'aid le Ven 11 Jan 2013 - 21:06, édité 1 fois
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 21:03

J'ai essayé et ça s'affiche bien en tableau, mais ça s'affiche encore en-dessous de l'image et non dans les cases de l'image :\
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Ven 11 Jan 2013 - 21:04

Sweeney a écrit:J'ai essayé et ça s'affiche bien en tableau, mais ça s'affiche encore en-dessous de l'image et non dans les cases de l'image :\

Oui je viens de modifier Wink
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 21:19

J'ai un soucis : le fameux espace vide.
J'ai dû le réduire à 0px sinon mon image n'apparaissait pas dans sa totalité. Le soucis c'est que, maintenant, je ne peux pas positionner mon texte correctement dans les cases, voici ce que j'obtiens :
http://files.getwebb.org/files/35/45/fc/e852b523331125725af439275bffa5556d/source.png

+ Est-ce que cette méthode permet bien de mapper l'imager par la suite ?
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Roxy. Ven 11 Jan 2013 - 21:22

Je viens rectifier le code de Grafik, n'oubliez pas le tr !
D'ailleurs à mon avis, on peut très bien rassembler les div bg et espace_vide ensemble.

Code:
        <div class="bg">
        <table><tr>
        <td class="case1">
        Contenu 1
        </td>
        <td class="case2">
        Contenu 2
        </td><td class="case3">
        Contenu 3
        </td></tr>
        </table>
        </div>

Avec donc ce css :

Code:
.bg{
background-image: url('Adresse de l'image');     
 margin-top: 200px ;}
.case1{
width: 200px; /* hauteur */
height: 300px; /* largeur */}
       
.case2{
width: 150px; /* hauteur */
height: 300px; /* largeur */
margin-left:50px; /* marge par rapport à la case 1 */
        }
       
.case3{
width: 300px; /* hauteur */
height: 300px; /* largeur */
margin-left:50px; /* marge par rapport à la case 2 */
}

D'ailleurs, je ne vois pas pourquoi mettre des margin-left vu qu'il lui faudra ajouter des marges par rapport aux positionnements de chaque bloc. Wink

Cordialement,
Roxy.

Roxy.
Membre habitué

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 21:29

Je ne peux toujours pas changer la position du texte...
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Codage page d'accueil

Message par FlohCricket Ven 11 Jan 2013 - 21:35

Je me permet de m'incruster, juste pour indiquer la solution que j'ai choisie, à titre d'info, qui m'a semblé être la plus simple:

J'ai dessiné mon image de fond, avec ses zones prévues pour contenir le texte:
Spoiler:

Ensuite, dans mon code de PA, j'ai déclaré une table "globale":
Code:
 <table class="table">
contenant toutes les divs suivantes(je ne suis pas convancu de l'utilité de cette table mais je la laisse).
Ensuite j'ai déclaré une div "fond" avec "background:url(MonImage)".


J'ai ensuite déclaré une div, a l'intérieur de "fond" pour chaque cadre de l'image contenant du texte ou autre:
Code:
<div class="annonces">;<div class="histoire"> etc
,
avec chaqu'une :
Code:
 <div style="overflow: auto; height:40px  ; width:370px ;text-align:center">


avec les dimensions adaptées au cadre défini.

Ensuite, j'ai repéré la distance entre le cadre et la bordure gauche/la bordure haute, que j'insère en position absolue pour chaque div:

Pour annonces, j'ajoute
Code:
<div style="padding: 60px 0px 0px 22px;">
dans la div "fond" [au HTML]
, pour les autres, j'ajoute un position : absolute au CSS:

Code:

.histoire
{
position: absolute;
left: 279px;
top: 85px ;
}
.partenaires
{
position: absolute;
left: 279px;
top: 326px;
}
.liens
{
position: absolute;
left: 719px;
top: 92px;
}


Voila, j'espère que ça sera utile!

Cordialement,

Floh
avatar

FlohCricket
Nouveau membre

Messages : 27
Inscrit(e) le : 10/11/2012

http://fanthaisa-rpg.pro-forums.fr/
FlohCricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 22:20

Voici ce que j'obtiens, ça ne me convient absolument pas et même les modifications apportées au CSS ne changent pas la position :
http://files.getwebb.org/files/33/26/a3/900386c53eee7cff9516aa7305c356328a/source.png
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Ven 11 Jan 2013 - 23:09

Essayez en faisant une phrase et non un "BLABLABLABLABLABLABLABLA"
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par FlohCricket Ven 11 Jan 2013 - 23:10

Doublé par Grafik' =O
avatar

FlohCricket
Nouveau membre

Messages : 27
Inscrit(e) le : 10/11/2012

http://fanthaisa-rpg.pro-forums.fr/
FlohCricket a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Ven 11 Jan 2013 - 23:55

Je vous remercie énormément de votre aide ! Ça marche très bien, enfin presque. En effet, j'ai un dernier petit problème. J'ai réglé les tailles et les positions comme indiqué, malgré tout la scrollbar a un petit soucis, je vous montre :
http://files.getwebb.org/files/be/57/70/d7967e8e5cc7f1695c0c95b4251eb2b0b7/source.png
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Sam 12 Jan 2013 - 0:07

Où avez vous placé le overflow?
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Sam 12 Jan 2013 - 0:09

Au même endroit que dans le code donné ci-dessus, c'est-à-dire au début de chaque balise div excepté celle du fond.
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Sam 12 Jan 2013 - 0:11

Avez vous fait attention aux dimensions?
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Sam 12 Jan 2013 - 0:12

Oui oui, les dimensions sont celles du cadre, le padding est nickel, d'ailleurs quand la scrollbar n'est pas là le texte est parfaitement mis en place. Mais quand la scrollbar apparaît tout est déformé et sort du cadre par le haut.
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Sam 12 Jan 2013 - 0:18

Je ne comprends pas... Je peux avoir le code dans sa totalité que j'essaye...
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Sam 12 Jan 2013 - 0:21

Oui bien-sûr, voilà :
Code:
<table class="table"><div style="background-image: url(http://files.getwebb.org/files/a6/ba/fa/23fb96c1985b593da38ee9006ec3df8fe1/source.png); height: 563px; width: 728px;">
<div class="welcome" style="overflow: auto; height: 119px; width: 162px; padding: 196px 0px 0px 22px; text-align: justify">Soyez les bienvenus sur Black Veil Brides France, le forum francophone de référence dédié au groupe californien Black Veil Brides. Ce forum a été créé pour tous les fans de quelque nationalité qu’ils soient afin de leur permettre de partager ensemble leur passion pour le groupe. Si vous aussi vous êtes de fiers membres de la BVB Army, n’hésitez plus et rejoignez notre communauté en vous inscrivant sur le forum. Je vous souhaite de bien vous amuser parmi nous !</div>
<div class="informations" style="overflow: auto; height:119px  ; width:123px ;text-align:justify"></div>
<div class="news" style="overflow: auto; height:119px  ; width:292px ;text-align:justify"></div>
</div>
</table>
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Sam 12 Jan 2013 - 0:36

Essayez ceci

Code:
<div style="background-image: url(http://files.getwebb.org/files/a6/ba/fa/23fb96c1985b593da38ee9006ec3df8fe1/source.png); height: 563px; width: 728px;">
      
      <table class="table"><tbody><tr>
      <td style="overflow: auto; height: 119px; width: 162px; padding: 0px 0px 0px 22px; text-align: justify; position: absolute; margin-top: 200px;" class="welcome">
      Soyez les bienvenus sur Black Veil Brides France, le forum francophone de référence dédié au groupe californien Black Veil Brides. Ce forum a été créé pour tous les fans de quelque nationalité qu’ils soient afin de leur permettre de partager ensemble leur passion pour le groupe. Si vous aussi vous êtes de fiers membres de la BVB Army, n’hésitez plus et rejoignez notre communauté en vous inscrivant sur le forum. Je vous souhaite de bien vous amuser parmi nous !
      </td>
      <td style="overflow: auto; height:119px  ; width:123px ;text-align:justify; position: absolute;" class="informations">      </td>
      <td style="overflow: auto; height:119px  ; width:292px ;text-align:justify" class="news"></td>
      </tr>
        </tbody></table>
      
      </div>
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Sam 12 Jan 2013 - 0:38

Je regarde si je peux l'alléger
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Sam 12 Jan 2013 - 0:42

Le problème de la scrollbar est réglé grâce au code que vous venez de poster, mais le tout se retrouve désormais sur mon header x)
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Grafik'aid Sam 12 Jan 2013 - 0:45

Comment ça?

Je vous re-demande le code dans sa totalité Wink Header compris... Comprenez que je ne sais pas comment est le reste de la page...
Grafik'aid

Grafik'aid
*

Messages : 46
Inscrit(e) le : 04/01/2013

Grafik'aid a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil

Message par Sweeney Sam 12 Jan 2013 - 1:11

J'ai juste eu à modifier les valeurs du CSS et tout est rentré dans l'ordre, je vous remercie énormément !

Par contre comment est-ce que je peux mapper l'image ? Car si j'utilise le code traditionnel, ça va dupliquer l'image qui me sert de page d'accueil...
Sweeney

Sweeney
*

Messages : 31
Inscrit(e) le : 11/03/2012

Sweeney a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum