Codage page d'accueil
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Codage page d'accueil
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
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
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 :
Pour les marges, utilisez donc ce code en remplaçant les 0 par de bonnes valeurs :
Cordialement,
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>
Pour les marges, utilisez donc ce code en remplaçant les 0 par de bonnes valeurs :
- Code:
left: 0px;
top: 0px;
Cordialement,
Re: Codage page d'accueil
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 ?
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Le mieux serait de déterminer une taille avec :
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 :
Cordialement,
- Code:
width: 0px;
height: 0px;
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,
Re: Codage page d'accueil
C'est nickel, je vais essayer avec tout ça, merci beaucoup !
Sweeney- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Désolée du DP, mais en fait ça ne marche pas, le texte continue de se positionner en-dessous de l'image.
Sweeney- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Puis-je voir le code au complet ?
Cordialement,
Cordialement,
Re: Codage page d'accueil
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Vous devriez faire un tableau avec des class.
Par exemple
Le Css
Le HTML
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- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
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
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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 ?
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
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.
Avec donc ce css :
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.
Cordialement,
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.
Cordialement,
Re: Codage page d'accueil
Je ne peux toujours pas changer la position du texte...
Sweeney- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
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:
Ensuite, dans mon code de PA, j'ai déclaré une table "globale":
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:
avec chaqu'une :
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
, pour les autres, j'ajoute un position : absolute au CSS:
Voila, j'espère que ça sera utile!
Cordialement,
Floh
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">
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;">
, 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
Re: Codage page d'accueil
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
http://files.getwebb.org/files/33/26/a3/900386c53eee7cff9516aa7305c356328a/source.png
Sweeney- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Essayez en faisant une phrase et non un "BLABLABLABLABLABLABLABLA"
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
Doublé par Grafik' =O
Re: Codage page d'accueil
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
http://files.getwebb.org/files/be/57/70/d7967e8e5cc7f1695c0c95b4251eb2b0b7/source.png
Sweeney- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Où avez vous placé le overflow?
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Avez vous fait attention aux dimensions?
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Je ne comprends pas... Je peux avoir le code dans sa totalité que j'essaye...
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
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- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
Je regarde si je peux l'alléger
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Re: Codage page d'accueil
Comment ça?
Je vous re-demande le code dans sa totalité Header compris... Comprenez que je ne sais pas comment est le reste de la page...
Je vous re-demande le code dans sa totalité Header compris... Comprenez que je ne sais pas comment est le reste de la page...
Grafik'aid- *
- Messages : 46
Inscrit(e) le : 04/01/2013
Re: Codage page d'accueil
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...
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- *
- Messages : 31
Inscrit(e) le : 11/03/2012
Page 1 sur 2 • 1, 2
Sujets similaires
» Affichage des visiteurs sur la page daccueil.
» Codage de page
» codage Page d'acceil
» codage page d'acceuil
» Espace dans le codage de la Page d'Accueil (panneau admin)
» Codage de page
» codage Page d'acceil
» codage page d'acceuil
» Espace dans le codage de la Page d'Accueil (panneau admin)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum