[Ev'] Une tite PA pour moi merci.

Commande de page d'accueil pour mon tit fo'.

Bonjour chère codeuse ou codeur
je viens passée une tite commande. Bon je suis pas très douée pour les explications alors je vais faire au mieux.

Adresse du forum : http://renders-tutoriels.forumactif.com
Description des éléments : Voici moi petit shéma, je voudrais enfin si c'est possible l'écriture suivante HOSBO SD.



Couleurs ou tons : Pour les couleurs je ne sais pas du tout, car on change le thème casi tous les mois, donc je pense qu'on mettrai le fond en transparent et les bord en blanc ou alors j'essayerai de trouve une image passe partout s'il faut vraiment.
Images : Voici les ptits images

- Pour le premier tableau (Navigation rapide)
- Pour le tableau du milieu (Bienvenue sur Accro's Renders & Tutoriels)
- Pour le tableau 3 (Nous recrutons...)
- Pour le tableau 5 (Mon équipe...)
Âme => Co-Admin => Ocara - Caro - @Aurore => Modératrice => Cathy1968 => animatrice



Pour le tableau 6 (Crédit)

Autres précisions : Pour le tableau 4 je souhaiterais pas des onglets mes une barre de navigation.

- Les News - Le membre du moi - Les votes


- -

L'écriture hobbo sd je la veux juste sur les titres en bleu foncé et le reste en noir.

Je pense que c'est tous

Ah mon forum est a 60% je vous ai mis le lien de mon forum ou sera installé le code mais voici mon fo' http://passioncathy.forumactif.com

Si vous avez besoin d'autre chose dite le moi.

Merci a celle ou celui qui prendra ma commande.

Bonjour,

Je vais prendre ta commande en charge =)

Edit : Voila !

http://forum-test-ev.forum-actif.net/h2-cathy

Qu'en penses tu ? Il manque les liens... Regarde tout et dis moi ce que je change !

Je n'ai pas mis les titres en bleu car en fonction de ton thème ça risque de faire moche =/ Tout le reste est en noir ou blanc/faible opacité du coup ça devrait bien s'adapter. Pour les titres je te noterais l'emplacement ou changer la couleur ! Qu'en dis tu ?

C'est superbe Ev'
mais tu pense que tu pourrais me mettre cette image dans les encadrements en sachant que je doit la changé tous les mois, si c'est possible bien sur?

Spoiler:

Alors si c'est possible aussi j'aimerai enfin de compte enlevée la navigation rapide, je mettrai a la place le membre du moi.
j'enleverai aussi les votes et les news, comme sa l'équiper et les crédits sont l'un a coté de l'autre, mais esque c'est possible aussi d'avoir les encadrement un rien plus petit en largeur pour l'équipe et le crédit. Et esque c'est possible d'avoir un genre de bulle a placer sur l'équipe que quand on passe dessus on peu lire.

Oh j'allais oublié encore une tite chose j'adore l'encadrement de ta signature et sont contour avec les 2 coins et les deux arrondis tu pense que c'est possible de faire sa sur les encadrement de ma pa.

Si sa vas pas dit le moi. Je sais que j'en demande beaucoup.

Merci tous plein.

Pour l'image oui je peux =) Je vais essayer ! Histoire qu'on voit ce que ça donne.

Je peux enlever la navigation et mettre le membre du mois. As tu une image ou un exemple de contenu que tu mettrais dans "le membre du mois" que l'on voit ce que ça va donner ?

Pour la largeur de l'équipe et du crédit je vais voir ce que je peux faire !

Et pour les infobulles oui c'est possible mais tu voudrais quoi dans les infobulles ?

Et pas de soucis pour l'encadrement comme ma signature ! Ca sera sans doute moins prononcé, bref tu vas voir !

Je te fais ça tout de suite =)

Edit : L'image que tu souhaites en fond est trop petite =/ En aurais tu une autre ?

Je te remercie énormément
alors voici l'image



et voici pour le membre du moi



Merci a toi

et voila pour mettre dans les bulles

Âme => Co-Admin => (sur l'image oeil de cheval)
Ocara - Caro - @Aurore => Modératrice => (sur l'image de l'ours, du clown et de la fille)
Cathy1968 => animatrice => (sur l'image du chat)

c'est superbe j'adore
encore juste une petite chose
tu pourrais me mettre un bord un peu plus épais de 2px?

Regarde :

http://forum-test-ev.forum-actif.net/h2-cathy

Qu'en penses tu ? J'ai fais des bordures d'épaisseur différente.

c'est parfait
j'adore faut plus rien changé
et merci de ta rapidité.

Je suis vraiment contente que ça te plaise !

Alors il faut que je nettoie un peu le code et que je rajoute deux trois trucs pour que ça soit lisible...

Je te donne le code d'ici quelques minutes !

le css

Code:

.cellule_normale
{
   background : url('http://www.scenicreflections.com/files/Abstact_Cool_Wallpaper_mknnw.jpg') fixed top center;  // C'est ce lien que tu dois modifier pour changer l'image de fond.
   padding : 5px;
   -moz-border-radius : 60px 0px 60px 0px;
   -webkit-border-radius : 60px 0px 60px 0px;
   border-radius : 60px 0px 60px 0px;
   opacity : 0.6;
   -moz-transition-property:opacity,-moz-border-radius;
   -moz-transition-duration: 2s;
   -webkit-transition-property:opacity,-moz-border-radius;
   -webkit-transition-duration: 2s;
   transition-property:opacity,-moz-border-radius;
   transition-duration: 2s;
   box-shadow : 0px 0px 8px white;
   border-top : 4px solid white;
   border-bottom : 4px solid white;
   border-left : 2px solid white;
   border-right : 2px solid white;
}

.cellule_normale:hover, .cellule_normale:focus
{
   opacity:0.9;
   -moz-border-radius : 0px 60px 0px 60px;
   -webkit-border-radius : 0px 60px 0px 60px;
   border-radius : 0px 60px 0px 60px;
}

.titre_pa
{
   text-align : center;
   font-family : "Hobo Std";
   font-size : 18px;
   color : #AC71E1;    // C'est ici que tu peux changer la couleur des titres.
   text-shadow : 1px 1px 1px black;
}

.ligne_pa
{
border-top : none;
border-left : none;
border-right : none;
border-bottom : dotted 2px black;
}

.paragraphe_pa
{
   text-align : justify;
}

.tableau_pa
{
   margin : auto;
   border-spacing: 25px;
}

.liste_pa
{
   list-style-image :url('http://images.imagehotel.net/yc1pxq4ung.png');
}

.lien_pa
{
   text-decoration:none;
   color : gray;
   text-shadow : 1px 1px 1px white;
}

.lien_pa:hover
{
   text-decoration:none;
   color : grey;
   text-shadow : 1px 1px 1px white;
}

.infobulle
{
    position: relative;
    z-index: 0;
}
       
.infobulle:hover
{
    background-color: transparent;
    z-index: 50;
}
       
.infobulle span
{
    position: absolute;
    background-color: white;
   -moz-border-radius : 20px 0px 20px 0px;
   -webkit-border-radius : 20px 0px 20px 0px;
   border-radius : 20px 0px 20px 0px;
   opacity : 0.6;
   box-shadow : 0px 0px 3px white;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: black;
}
       
.infobulle:hover span
{
    visibility: visible;
    top: 10px;
    left: 35px;
    width: 75px ;
    color:black;
    border: 2px solid #9999a0;
}

.image_pa
{
   -moz-border-radius : 20px 0px 20px 0px;
   webkit-border-radius : 20px 0px 20px 0px;
   border-radius : 20px 0px 20px 0px;
   opacity : 0.6;
   border : 1px solid white;
   box-shadow : 0px 0px 3px white;
}

.image_pa:hover
{
   -moz-border-radius : 0px 20px 0px 20px;
   -webkit-border-radius : 0px 20px 0px 20px;
   border-radius : 0px 20px 0px 20px;   
   border : 1px solid white;
   opacity : 1;
   box-shadow : 0px 0px 3px white;
}


et le code html :

Code:

<table class="tableau_pa">
         
         <tr>
            <td width="10%"></td>
            <td width="10%"></td>
            <td width="30%"></td>
            <td width="30%"></td>
            <td width="10%"></td>
            <td width="10%"></td>
         </tr>
         <tr>   
            <td class="cellule_normale" width="20%" colspan="2">
               <div class="titre_pa">Le membre du mois</div><hr class="ligne_pa"/>
               
               <center>Félicitation à Machin !<br /><br /><br /><br />
               <img src="http://i43.servimg.com/u/f43/15/33/43/35/an_24210.png" /></center>
            </td>
            
            <td class="cellule_normale" colspan="2" width="60%">
            <div class="titre_pa">Bienvenue sur Accro's Renders & Tutoriels</div><hr class="ligne_pa"/>
               <p class="paragraphe_pa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, erat a sodales laoreet, ante erat commodo ligula, vel fermentum nunc tortor a enim. Nulla gravida pellentesque tortor, eget consectetur dolor consequat ac. Nam semper neque mollis enim mollis aliquam. Pellentesque at odio orci, ut porta mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, erat a sodales laoreet, ante erat commodo ligula, vel fermentum nunc tortor a enim. Nulla gravida pellentesque tortor, eget consectetur dolor consequat ac. Nam semper neque mollis enim mollis aliquam. Pellentesque at odio orci, ut porta mauris.</p><center><img src="http://i43.servimg.com/u/f43/15/33/43/35/8mzh5611.png" /></center>
            </td>
            
            <td class="cellule_normale" width="20%" colspan="2">
            <div class="titre_pa">On recrute ! </div><hr class="ligne_pa"/>
               <ul class="liste_pa">
                  <li><a class="lien_pa" href="#">Lien</a></li>
                  <li><a class="lien_pa" href="#">Lien</a></li>
                  <li><a class="lien_pa" href="#">Lien</a></li>
                  <li><a class="lien_pa" href="#">Lien</a></li>
                  <li><a class="lien_pa" href="#">Lien</a></li>
                  <li><a class="lien_pa" href="#">Lien</a></li>
               </ul>
               <center><img src="http://i43.servimg.com/u/f43/15/33/43/35/icone-11.png" /></center>
            </td>
         </tr>
         
         <tr>
            <td width="10%">
            </td>
            <td class="cellule_normale" colspan="2" width="40%">
               <div class="titre_pa">Les crédits</div><hr class="ligne_pa"/>
               <center>
               Le forum appartient à CathyCréation.<br /> La page d'accueil a été crée par Ev' sur <a class="lien_pa" href="http://www.never-utopia.com/">Never Utopia</a>.
               </center>
            </td>

            <td class="cellule_normale"colspan="2" width="40%">
            <div class="titre_pa">Mon Équipe !</div><hr class="ligne_pa"/>
               <center>
                  <span class="infobulle">
                     <img class="image_pa" src="http://i43.servimg.com/u/f43/15/33/43/35/ame11.jpg">
                     <span>Âme<br /><hr />Co-Admin</span>
                     
                  </span>
                  <span class="infobulle">
                     <img class="image_pa" src="http://i43.servimg.com/u/f43/15/33/43/35/ocara10.jpg">
                     <span>Ocara<br /><hr />Modératrice</span>
                  </span>
                  <span class="infobulle">
                     <img class="image_pa" src="http://i43.servimg.com/u/f43/15/33/43/35/cqro11.jpg">
                     <span>Caro<br /><hr />Modératrice</span>
                  </span>
                  <span class="infobulle">
                     <img class="image_pa" src="http://i43.servimg.com/u/f43/15/33/43/35/aurore10.jpg">
                     <span>@Aurore<br /><hr />Modératrice</span>
                  </span>
                  <span class="infobulle">
                     <img class="image_pa" src="http://i43.servimg.com/u/f43/15/33/43/35/cqthy110.jpg">
                     <span>Cathy1968<br /><hr />Animatrice</span>
                  </span>
               </center>
            
            </td>
            <td width="10%">
            </td>
         </tr>
         
      
      </table>

c'est superbe je l'ai place sur mon forum de test et sa donne super bien

J'ai encore juste une tite question a te posée, voila je voudrais savoir cmt on fait pour redimensionné les encadrement en largeur? c'est juste quand je mettrai mon texte demain pour moi savoir si mon encadrement du milieu sera assez grand ou pas lol.

merci beaucoup en tous cas tu as fait du superbe boulot.

Coucou !

Alors te répondre les tailles sont en pourcentage donc ce sont des proportions. Si tu mets plus ou moins de contenu que ce que j'ai mis en test alors les cellules rétréciront ou s'agrandiront en fonction des autres cellules =)

Donc normalement ça devrait être bon ! Au pire, quand ça sera installé et bien tu pourras me montrer le soucis ici ! Mais vraiment, il ne devrait y en avoir...

Voilou !

ok super merci beaucoup
allez je passe a mon autre commande alors lol

Bonsoir Ev
dit j'ai un soucis, j'arrive pas a retrecir les encadré du haut (ben oui suis un peu blonde) mdr
et je viens de voir que sur explorer il ne passe pas comme sur moz
tu penses qu'il y a moyent qu'il passe aussi sur explorer?

Excuse moi je n'avais pas vu ton message.

Je ne comprends pas ta première question... Rétrécir les encadrés du haut ?

Ce n'est pas grave,
j'ai réussi a recadre l'encadre du milieu et ceux du bas, mais j'arrive pas a rétrécir un tit peu ceux de gauche et de droite pour qu'il soit moin large regarde
http://passioncathy.forumactif.com/forum

Et si tu pouvais me dire aussi pour que tout puisse etre lisible de la meme facon sur explorer ce serai super aussi car sur explorer j'ai tous qui est carré lol

Coucou !

Pour la taille vu que c'est proportionnel... Hum tu pourrais réduire la taille de la PA avec

Code:

<table class="tableau_pa" width="80%">

C'est ça que tu souhaites ?

Pour IE ça devrait marcher sur la dernière version. Je ne peux pas vérifier actuellement, je le ferai ce soir.

merci tous plein c'est bien sa
c'est quoi la nouvelle version de IE?

Internet Explorer 9 :o

Super pour la largeur !

merci encore
je vais voir si j'ai la version 9 je te tien au courent

bon ben j'ai installé le ie9 mais c'est pareil
mais c'est pas grave on regardera a sa plus tard je te remercie dejas mille fois
bise