Accueil
Créer un forumPage d'accueil
2 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 1 • Partagez
Page d'accueil
par adrien779 Dim 22 Jan 2012 - 0:00
Bien le bonjour à tous !!
Alors voilà, je construis un forum et je galère vraiment avec la PA. Pourtant, ça n'a pas l'air si compliqué que ça à faire... Enfin, tout ça pour dire que j'ai vraiment besoin de votre aide parce que je vais faire une crise de nerfs :S
Pour mieux vous exposer mon idée, j'ai fais un schéma :
En plus de cela, j'aurais bien voulu que les cadres des images de "Team" et "Scenarii" change de couleur lorsqu'on passe dessus, est ce possible ?
Et y-a t-il moyen de mettre comme un voile blanc ou sombre sur les images ?
PS: Les images des infobulles seraient des gifs et j'aurais aimé que le texte soit légèrement sur le gif. (Désolé j'en demande beaucoup :S)
Enfin voilà, je ne sais pas si vous souhaitez voir les bêtises que j'ai déjà faites ou alors mon css pour les infosbulles. Je suis vraiment perdu et après deux jours de recherche de codes, etc... non stop, je sature :S
J'espère que vous pourrez m'aider et je vous dis à bientôt et n'hésitez pas si vous voulez plus d'informations.
:thanks:
Alors voilà, je construis un forum et je galère vraiment avec la PA. Pourtant, ça n'a pas l'air si compliqué que ça à faire... Enfin, tout ça pour dire que j'ai vraiment besoin de votre aide parce que je vais faire une crise de nerfs :S
Pour mieux vous exposer mon idée, j'ai fais un schéma :
En plus de cela, j'aurais bien voulu que les cadres des images de "Team" et "Scenarii" change de couleur lorsqu'on passe dessus, est ce possible ?
Et y-a t-il moyen de mettre comme un voile blanc ou sombre sur les images ?
PS: Les images des infobulles seraient des gifs et j'aurais aimé que le texte soit légèrement sur le gif. (Désolé j'en demande beaucoup :S)
Enfin voilà, je ne sais pas si vous souhaitez voir les bêtises que j'ai déjà faites ou alors mon css pour les infosbulles. Je suis vraiment perdu et après deux jours de recherche de codes, etc... non stop, je sature :S
J'espère que vous pourrez m'aider et je vous dis à bientôt et n'hésitez pas si vous voulez plus d'informations.
:thanks: Dernière édition par adrien779 le Dim 22 Jan 2012 - 16:46, édité 1 fois
adrien779- *****
-
Messages : 711
Inscrit(e) le : 26/11/2006 -
Re: Page d'accueil
par Gorgorbey Dim 22 Jan 2012 - 0:35
Bonjour,
On va s'attaquer à la "bête"
Alors le HTML :
Le CSS :
C'est du très grossier, vous pouvez commencer à remplir les contenus pour y voir plus clair et toucher au CSS si vous savez faire.
Prévenez-moi si vous voulez que cette page d'accueil ne soit pas visible de tous je la mettrais entre balises hide.
On va s'attaquer à la "bête"
Alors le HTML :
- Spoiler:
- Code:
Texte de bienvenue ou images<br/>
Liens rapides<br/>
<table>
<tr>
<td class="colonne1"><table>
<tr>
<td class="team">Cadre 1</td><td class="team">Cadre 2</td>
</tr>
<td class="team">Cadre 3</td><td class="team">Cadre 4</td>
</tr>
</table>Infos sur le forum<br/>
info<br/>
info<br/>
info<br/>
info
</td>
<td class="colonne2">Partenaires<table
<table><tr>
<td>Cadre1</td><td>Cadre2</td><td>Cadre3</td><td>Cadre4</td>
</tr>
<tr>
<td>Cadre5</td><td>Cadre6</td><td>Cadre7</td><td>Cadre8</td>
</tr>
</table>
Lien vers les sujets partenariat<br/>
<br/><br/>
Scenarii
<table><tr>
<td>Image lien</td><td>Image lien</td><td>Image lien</td>
</tr>
<tr>
<td>Image lien</td><td>Image lien</td><td>Image lien</td>
</tr>
</table>
Lien vers les catégories de scenarii
</td>
<td class="colonne3">
Image GIF<br/>
contexte<br/>
contexte<br/>
contexte<br/>
copyright<br/>
</td>
</tr>
</table>
Le CSS :
- Spoiler:
- Code:
.colonne1
{
width: 260px;
text-align: center;
}
.colonne2
{
width: 240px;
text-align: center;
}
.colonne3
{
width: 260px;
text-align: center;
}
.team
{
width: 107px;
border: 3px double black;
}
.colonne2 td
{
border: 1px solid black;
}
C'est du très grossier, vous pouvez commencer à remplir les contenus pour y voir plus clair et toucher au CSS si vous savez faire.
Prévenez-moi si vous voulez que cette page d'accueil ne soit pas visible de tous je la mettrais entre balises hide.
Gorgorbey- Membre actif
-
Messages : 3321
Inscrit(e) le : 09/09/2010 -
Re: Page d'accueil
par adrien779 Dim 22 Jan 2012 - 1:46
Ooooh, mille merciiiis !!!
Je viens de bidouiller quelques petits trucs sur le codes mais rien de bien fameux. Mais, j'ai vu qu'il y avait quelques petits soucis encore. J'ai refais un schéma
J'ai encadré les images parce qu'elles ne sont pas centrées en fait (je sais pas très bien pourquoi :S) Et je ne sais pas très bien comment faire pour enlever les cadres des images de partenariat tout en laissant les cadres des scénarii... (J'suis pas doué :'( )
Alors ensuite, quelques trucs qui manquait, (enfin, c'est peut être pas possible de le faire en fait) y'a les espaces entre les images de la team et des scenarii (rose pâle sur le schéma) puis aussi, j'aurais souhaité une couleur de fond derrières les images des scénarii et de la team puis seulement le cadre sur les bords de la couleur (jaune/vert sur le schéma). Ah oui, j'ai failli oublier, aurais-tu le code pour les infobulles et le voile sur les image des scenarii et de la team ?
Enfin, merci beaucoup en tout cas, ça m'a déjà bien avancé
Si tu as besoin du code html que j'ai un peu (très peu) modifié, n'hésites pas à me le demander
J'espère que j'ai su être clair parce que parfois je m'embrouille dans mes explications :S
Encore une fois un grand merci !!
Je viens de bidouiller quelques petits trucs sur le codes mais rien de bien fameux. Mais, j'ai vu qu'il y avait quelques petits soucis encore. J'ai refais un schéma
J'ai encadré les images parce qu'elles ne sont pas centrées en fait (je sais pas très bien pourquoi :S) Et je ne sais pas très bien comment faire pour enlever les cadres des images de partenariat tout en laissant les cadres des scénarii... (J'suis pas doué :'( )
Alors ensuite, quelques trucs qui manquait, (enfin, c'est peut être pas possible de le faire en fait) y'a les espaces entre les images de la team et des scenarii (rose pâle sur le schéma) puis aussi, j'aurais souhaité une couleur de fond derrières les images des scénarii et de la team puis seulement le cadre sur les bords de la couleur (jaune/vert sur le schéma). Ah oui, j'ai failli oublier, aurais-tu le code pour les infobulles et le voile sur les image des scenarii et de la team ?
Enfin, merci beaucoup en tout cas, ça m'a déjà bien avancé
Si tu as besoin du code html que j'ai un peu (très peu) modifié, n'hésites pas à me le demander
J'espère que j'ai su être clair parce que parfois je m'embrouille dans mes explications :S
Encore une fois un grand merci !!
adrien779- *****
-
Messages : 711
Inscrit(e) le : 26/11/2006 -
Re: Page d'accueil
par Gorgorbey Dim 22 Jan 2012 - 12:50
Voici le nouvel HTML :
Voici le nouveau CSS :
J'ai commenté le CSS pour que vous vous y retrouviez.
- Spoiler:
- Code:
Texte de bienvenue ou images<br/>
Liens rapides<br/>
<table>
<tr>
<td class="colonne1">Team<table>
<tr>
<td class="team"><a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a></td><td class="team"><a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a></td>
</tr>
<td class="team"><a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a></td><td class="team"><a class="info" href="#">texte du lien<span>Votre texte de l'info bulle</span></a></td>
</tr>
</table>Infos sur le forum<br/>
info<br/>
info<br/>
info<br/>
info
</td>
<td class="colonne2">Partenaires<table
<table><tr>
<td>Cadre1</td><td>Cadre2</td><td>Cadre3</td><td>Cadre4</td>
</tr>
<tr>
<td>Cadre5</td><td>Cadre6</td><td>Cadre7</td><td>Cadre8</td>
</tr>
</table>
Lien vers les sujets partenariat<br/>
<br/><br/>
Scenarii
<table class="table_col2"><tr>
<td>Image lien</td><td>Image lien</td><td>Image lien</td>
</tr>
<tr>
<td>Image lien</td><td>Image lien</td><td>Image lien</td>
</tr>
</table>
Lien vers les catégories de scenarii
</td>
<td class="colonne3">
Image GIF<br/>
contexte<br/>
contexte<br/>
contexte<br/>
copyright<br/>
</td>
</tr>
</table>
Voici le nouveau CSS :
- Spoiler:
- Code:
/* Toute la colonne 1 */
.colonne1
{
width: 260px;
text-align: center;
}
/* Les tableaux de la colonne 1 */
.colonne1 table
{
border-collapse: separate;
border-spacing: 8px 8px;
margin: auto;
background-color: red;
}
/* Toute la colonne 2 */
.colonne2
{
width: 240px;
text-align: center;
}
/* Tableaux de la colonne 2 */
.colonne2 table
{
margin: auto;
}
/* Toute la colonne 3 */
.colonne3
{
width: 260px;
text-align: center;
}
/* Cellules du tableau Team */
.team
{
width: 107px;
border: 5px solid black;
margin: 10px;
}
/* Tableau Scenarii colonne 2 */
.table_col2
{
border-collapse: separate;
border-spacing: 8px 8px;
background-color: red;
}
/* Cellules du tableau Scenarii colonne 2 */
.table_col2 td
{
border: 5px solid black;
}
/* Début mise en page infobules */
a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
/* Fin mise en page infobules */
J'ai commenté le CSS pour que vous vous y retrouviez.
Gorgorbey- Membre actif
-
Messages : 3321
Inscrit(e) le : 09/09/2010 -
Re: Page d'accueil
par adrien779 Dim 22 Jan 2012 - 15:40
Wouahw !! Merci merci merci merci !!!
J'ai déjà mis les images et les liens mais il me reste un dernier petit soucis...
Voici un schéma pour l'expliquer:
Voilà, j'aurais bien aimé que les bords des images de la team et des scénarii soient comme ceux des infobulles en fait, j'ai essayé quelques trucs mais ça ne marchait pas :S
Et aussi, y aurait-il moyen de faire en sorte que les bords (1px) des images team et scenarii changent de couleur lorsqu'on passe dessus ? Ainsi que le voile blanc et sombre sur les images que lorsqu'on passe dessus, elles redeviennent normales ? (J'sais pas si c'est très clair tout ça xD)
Enfin, si ce n'est pas possible, je comprendrai et encore mille mercis de m'aider Grace à toi, la PA de mon forum sera toute belle :thanks:
J'ai déjà mis les images et les liens mais il me reste un dernier petit soucis...
Voici un schéma pour l'expliquer:
Voilà, j'aurais bien aimé que les bords des images de la team et des scénarii soient comme ceux des infobulles en fait, j'ai essayé quelques trucs mais ça ne marchait pas :S
Et aussi, y aurait-il moyen de faire en sorte que les bords (1px) des images team et scenarii changent de couleur lorsqu'on passe dessus ? Ainsi que le voile blanc et sombre sur les images que lorsqu'on passe dessus, elles redeviennent normales ? (J'sais pas si c'est très clair tout ça xD)
Enfin, si ce n'est pas possible, je comprendrai et encore mille mercis de m'aider
Grace à toi, la PA de mon forum sera toute belle :thanks:
adrien779- *****
-
Messages : 711
Inscrit(e) le : 26/11/2006 -
Re: Page d'accueil
par Gorgorbey Dim 22 Jan 2012 - 15:47
Dans ce cas il me faudrait votre code HTML pour éviter que vous ayez tout à reprendre à chaque fois
Gorgorbey- Membre actif
-
Messages : 3321
Inscrit(e) le : 09/09/2010 -
Re: Page d'accueil
par adrien779 Dim 22 Jan 2012 - 15:52
Le voici
Ah oui et serais-ce possible de mettre le copyright+optimisation dans un autre "élément" (ligne ?) que le contexte ?
Encore merci
- Code:
<BR>
Texte de bienvenue ou images<br/>
Liens rapides<br/>
<br/>
<table>
<tr>
<td class="colonne1">Team<table>
<tr>
<td class="team"><a class="info" href="#"><img src="http://img685.imageshack.us/img685/703/samway05.png" width="108"><span><img width=200 src="http://i56.tinypic.com/1zwhik0.jpg"/></span></a></td><td class="team"><a class="info" href="#"><img width=108 src="http://img716.imageshack.us/img716/7883/taylormomsen00.png"/><span><img width=200 src="http://img709.imageshack.us/img709/1220/taylor5y.gif"/></span></a></td>
</tr>
<td class="team"><a class="info" href="#"><img width=108 src="http://img716.imageshack.us/img716/7883/taylormomsen00.png"/><span><img width=200 src="http://img709.imageshack.us/img709/1220/taylor5y.gif"/></span></a></td><td class="team"><a class="info" href="#"><img src="http://img685.imageshack.us/img685/703/samway05.png" width="108"><span><img width=200 src="http://i56.tinypic.com/1zwhik0.jpg"/></span></a></td>
</tr></table>
<br/>
Infos sur le forum<br/>
info<br/>
info<br/>
info<br/>
info
</td>
<td class="colonne2">Partenaires<table
<table><tr>
<td><a href="http://weneedheroes.actifforum.com/"><img src="http://i40.tinypic.com/sdfe3r.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td>
</tr>
<tr>
<td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td>
</tr>
</table>
Lien vers les sujets partenariat<br/>
<br/>
Scenarii
<table class="table_col2"><tr>
<td><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></td>
</tr>
<tr>
<td><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></td>
</tr>
</table>
Lien vers les catégories de scenarii
</td>
<td class="colonne3">
<img src="http://26.media.tumblr.com/tumblr_lvotjjPmep1qjt29ro1_500.gif" width="260"><br/>
contexte<br/>
contexte<br/>
contexte<br/>
contexte<br/>
</tr>
</td>
</table>
<BR>
Ah oui et serais-ce possible de mettre le copyright+optimisation dans un autre "élément" (ligne ?) que le contexte ?
Encore merci
adrien779- *****
-
Messages : 711
Inscrit(e) le : 26/11/2006 -
Re: Page d'accueil
par Gorgorbey Dim 22 Jan 2012 - 16:36
HTML :
CSS :
Pour le voile blanc je ne sais pas faire. Et le copyright je ne suis pas sur d'avoir compris.
- Spoiler:
- Code:
<BR>
Texte de bienvenue ou images<br/>
Liens rapides<br/>
<br/>
<table>
<tr>
<td class="colonne1">Team<table>
<tr>
<td class="team"><div class="bordure_team"><a class="info" href="#"><img src="http://img685.imageshack.us/img685/703/samway05.png" width="108"><span><img width=200 src="http://i56.tinypic.com/1zwhik0.jpg"/></span></a></div></td><td class="team"><div class="bordure_team"><a class="info" href="#"><img width=108 src="http://img716.imageshack.us/img716/7883/taylormomsen00.png"/><span><img width=200 src="http://img709.imageshack.us/img709/1220/taylor5y.gif"/></span></a></div></td>
</tr>
<td class="team"><div class="bordure_team"><a class="info" href="#"><img width=108 src="http://img716.imageshack.us/img716/7883/taylormomsen00.png"/><span><img width=200 src="http://img709.imageshack.us/img709/1220/taylor5y.gif"/></span></a></div></td><td class="team"><div class="bordure_team"><a class="info" href="#"><img src="http://img685.imageshack.us/img685/703/samway05.png" width="108"><span><img width=200 src="http://i56.tinypic.com/1zwhik0.jpg"/></span></a></div></td>
</tr></table>
<br/>
Infos sur le forum<br/>
info<br/>
info<br/>
info<br/>
info
</td>
<td class="colonne2">Partenaires<table
<table><tr>
<td><a href="http://weneedheroes.actifforum.com/"><img src="http://i40.tinypic.com/sdfe3r.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td>
</tr>
<tr>
<td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td><td><a href="URL DU LIEN"><img src="http://i43.tinypic.com/erx729.png"></img></a></td>
</tr>
</table>
Lien vers les sujets partenariat<br/>
<br/>
Scenarii
<table class="table_col2"><tr>
<td><div class="bordure_team"><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></div></td><td><div class="bordure_team"><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></div></td><td><div class="bordure_team"><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></div></td>
</tr>
<tr>
<td><div class="bordure_team"><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></div></td><td><div class="bordure_team"><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></div></td><td><div class="bordure_team"><a href="URL DU LIEN"><img src="http://img836.imageshack.us/img836/7281/c0t.png"></img></a></div></td>
</tr>
</table>
Lien vers les catégories de scenarii
</td>
<td class="colonne3">
<img src="http://26.media.tumblr.com/tumblr_lvotjjPmep1qjt29ro1_500.gif" width="260"><br/>
contexte<br/>
contexte<br/>
contexte<br/>
contexte<br/><br/><br/><div class="copyright">Copyright</div>
</tr>
</td>
</table>
<BR>
CSS :
- Spoiler:
- Code:
/* Toute la colonne 1 */
.colonne1
{
width: 260px;
text-align: center;
}
/* Les tableaux de la colonne 1 */
.colonne1 table
{
border-collapse: separate;
border-spacing: 8px 8px;
margin: auto;
background-color: red;
}
/* Toute la colonne 2 */
.colonne2
{
width: 240px;
text-align: center;
}
/* Tableaux de la colonne 2 */
.colonne2 table
{
margin: auto;
}
/* Toute la colonne 3 */
.colonne3
{
width: 260px;
text-align: center;
}
/* Cellules du tableau Team */
.team
{
width: 107px;
border: 1px solid black;
margin: 10px;
}
.team:hover
{
border: 1px solid orange;
}
/* Tableau Scenarii colonne 2 */
.table_col2
{
border-collapse: separate;
border-spacing: 8px 8px;
background-color: red;
}
/* Cellules du tableau Scenarii colonne 2 */
.table_col2 td
{
border: 1px solid black;
}
.table_col2 td:hover
{
border: 1px solid orange;
}
.bordure_team
{
border: 5px solid white;
}
/* Début mise en page infobules */
a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
/* Fin mise en page infobules */
Pour le voile blanc je ne sais pas faire. Et le copyright je ne suis pas sur d'avoir compris.
Gorgorbey- Membre actif
-
Messages : 3321
Inscrit(e) le : 09/09/2010 -
Re: Page d'accueil
par adrien779 Dim 22 Jan 2012 - 16:45
Pas de soucis pour le voile blanc, c'était superflus
Pour le Copyright, il me suffit de mettre <br> ça ira
Merci mille fois encore et encore merci !!
Pour le Copyright, il me suffit de mettre <br> ça ira
Merci mille fois encore et encore merci !!
adrien779- *****
-
Messages : 711
Inscrit(e) le : 26/11/2006 -
Sujets similaires» Affichage des visiteurs sur la page daccueil.
» La page profile.php renvoie une page "hybride" entre un nouvel utilisateur et un ancien
» Problème entre une page html en page d'accueil et l'adresse de base du forum
» Impossibilité d'utiliser page HTML en tant que page d'accueil AwesomeBB
» cadres de réponses dans les rubriques trop larges
» La page profile.php renvoie une page "hybride" entre un nouvel utilisateur et un ancien
» Problème entre une page html en page d'accueil et l'adresse de base du forum
» Impossibilité d'utiliser page HTML en tant que page d'accueil AwesomeBB
» cadres de réponses dans les rubriques trop larges
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 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum