Page d'accueil

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

Résolu Page d'accueil

Message par adrien779 le 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. Very Happy Thanks


Dernière édition par adrien779 le Dim 22 Jan 2012 - 16:46, édité 1 fois

adrien779
*****

Masculin
Messages : 711
Inscrit(e) le : 26/11/2006

http://divinitas-tenebrae.forumactif.com
adrien779 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par Gorgorbey le Dim 22 Jan 2012 - 0:35

Bonjour,

On va s'attaquer à la "bête" Wink
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
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par adrien779 le 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 Razz


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é Very Happy
Si tu as besoin du code html que j'ai un peu (très peu) modifié, n'hésites pas à me le demander Wink
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 !! Yes

adrien779
*****

Masculin
Messages : 711
Inscrit(e) le : 26/11/2006

http://divinitas-tenebrae.forumactif.com
adrien779 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par Gorgorbey le Dim 22 Jan 2012 - 12:50

Voici le nouvel HTML :
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
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par adrien779 le 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 Very Happy Grace à toi, la PA de mon forum sera toute belle Very Happy Thanks

adrien779
*****

Masculin
Messages : 711
Inscrit(e) le : 26/11/2006

http://divinitas-tenebrae.forumactif.com
adrien779 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par Gorgorbey le Dim 22 Jan 2012 - 15:47

Dans ce cas il me faudrait votre code HTML pour éviter que vous ayez tout à reprendre à chaque fois Wink

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par adrien779 le Dim 22 Jan 2012 - 15:52

Le voici Very Happy

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 Smile

adrien779
*****

Masculin
Messages : 711
Inscrit(e) le : 26/11/2006

http://divinitas-tenebrae.forumactif.com
adrien779 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par Gorgorbey le Dim 22 Jan 2012 - 16:36

HTML :
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
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil

Message par adrien779 le Dim 22 Jan 2012 - 16:45

Pas de soucis pour le voile blanc, c'était superflus Wink
Pour le Copyright, il me suffit de mettre <br> ça ira Very Happy

Merci mille fois encore et encore merci !!

adrien779
*****

Masculin
Messages : 711
Inscrit(e) le : 26/11/2006

http://divinitas-tenebrae.forumactif.com
adrien779 a été remercié(e) par l'auteur de ce sujet.

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


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