L'annuaire des forums Forumactif
votre référence en terme de référencement et de développement de forums.
 


Aller à la page : 1, 2  Suivant


 [Nocturne] Demande d'aide pour code css complet s'il vous plait.

Kanelavatar
Messages : 48
Bonjour,


Support de mise en page : Menu - PA - Cadre forum - Liens
Résultat en : BBcode (pour feuille de style) et s'il existe des variante pour message en Html, je veux bien Smile
Type de mise en page : Personnalisé
Texte :
Je voudrais dans le PA des infos-bulles qui apparaissent lorsqu'on clic sur l'icon dans la partie "L'equipe" ;
Lorsque je souhaite un effet particulier au passage de la souris, j'ai mis le 1er dans l'effet souhaiter et le reste en normal. (ex: Pour navigation rapide. "Réglement" est différent des autres car c'est l'effet que je souhaite au passage de la souris. Valable pour le reste du texte a chaque fois.) Wink
Pour le menu je souhaite qu'il reste "coller" au haut de page ou alors en bas (pourquoi pas innover) ^^
Si possible aussi (ce n'est pas dans les montages), je voudrais un bouton [#Top/#Bottom] à droite de l'écran pour que si l'on est en bas, en puisse monter d'un clic et vis-versa.
Je voudrais aussi un cadre d'environ 3px comme sur les montages si possible Smile
Image(s)
----------------------------------------------------
Plan : Voici un apercu global et précis du résultats souhaite. Pareil, lorsqu'un element est différent du reste, c'est que je veux cet effet aussi sur le reste au passage de la souris Wink

-- Le PA
Spoiler:
 


Voilà, si il faut plus de détailles dite-le s'il vous plait ; Merci d'avoir lu
ThreaxV.I.P.avatar
Messages : 7332
Bonjour,

Ces demandes sont 3 demandes différentes, elles nécessitent donc de créer 3 sujets différents. Wink
(il faut bien voir que ceci nécessite pas mal de travail) Wink

Kanelavatar
Messages : 48
Oui, j'en suis consciente. Ça devait etre fait petit a petit, jusqu'a janvier, avec un codeur mais il ne me répond plus

edit: Voila, j'ai ouvert deux autres sujet Smile
NilanaV.I.P.avatar
Messages : 3612
Coucou Wink

Pour pouvoir accéder aux services de l'annuaire,
merci de référencer votre forum Wink

Ceci, afin de garder le but premier de notre forum qui est la publicité Wink

Cordialement,
Nilana.
Kanelavatar
Messages : 48
OK, merci Smile
Kanelavatar
Messages : 48
Nocturneavatar
Messages : 118
Bonjour,

Cette demande est-elle toujours d'actualité ?
Je constate des différences entre les captures et le forum (en ce qui concerne la page d'accueil).

En attendant, je peux travailler sur les boutons #top,#bottom, mais je ne les fournis pas.
Kanelavatar
Messages : 48
Oui c'est toujours d'actualité. Ce ne sont pas des captures d'écran mais des ''schéma'' fais sur photoshop Wink
Pour les bouton top/bottom, c'est déjà fais Wink
Il me manque le PA et le menu
Nocturneavatar
Messages : 118
Je comprends bien la situation, mais je ne fais pas de miracles. Je ne peux pas produire le contenu de la page d'accueil car je ne peux pas deviner le texte que tu souhaites mettre en infobulle, ni les couleurs à utiliser, les liens à insérer...
Kanelavatar
Messages : 48
Et ta besoin de quoi pour le faire ?
La j'ai pas mon pc, je suis sur mon iPod.
Pour les couleur prend l'image et utilise un sélecteur Wink
Pour les infos bulles, c'est le même texte que sur l'img.
Nocturneavatar
Messages : 118
Je ne lis pas dans les pensées, j'ai besoin de tout : textes en brut, couleurs, images, liens...
Les images dans l'info-bulle, où vais-je les trouver ?
Il n'y a qu'une info-bulle à faire ?

Il me faut absolument tous les éléments qui sont touchés par les modifications à faire. Je ne suis pas là pour les créer ou les inventer mais pour les mettre en place et là, j'ai des trous dans les codes qu'il faudrait que je comble pour savoir si ça marche et te rendrai ainsi au plus vite quelque chose qui fonctionnera.

Si je te demande tout cela c'est simplement pour aller plus vite.
Kanelavatar
Messages : 48
Tous les textes est en BlairMdITC TT

Bienvenue { U S E R N A M E }
Voici pour 2011 un forum tout neuf qui
en est a sa 3e Version, plus attractive.
Dans une bonne ambiance, tu pourra
Progresser ou débuter en Graphisme,
illustration et stylisme en étant actif.

Top Partenaires
Spoiler:
 
Love Graph' :: lovegraph.keuf.net :: http://img252.imageshack.us/img252/690/bbouton1.png
Elegance Design :: elegance-design.forumactif.com :: http://s2.noelshack.com/uploads/images/1841008350753_13348445791923_100035.png
Exentric :: exentric.forumactif.fr :: http://i63.servimg.com/u/f63/16/03/74/29/bouton10.png
Add us (Juste en dessous) :: http://i69.servimg.com/u/f69/15/49/25/18/mini_b10.png
Et vous ? :: http://fashion-graph.bbactif.com/t24-nos-partenaires?sid=361cc59e3e02a5388f3a555cb3ed2406


Votez pour NOUS !
Weetix :: http://www.weetix.fr/membres/blog_top/form.php?cc=16249&document=80305&id_affil= :: http://i39.servimg.com/u/f39/15/49/25/18/etoile12.png
Neutre :: http://i39.servimg.com/u/f39/15/49/25/18/etoile13.png

Coup De Coeur (défile horizontalement)
Lutheen Illustration // :: www.lutheen.com
Maelis // :: maelis.net
Diglee-Blog d’illustratrice // :: diglee.com
Margaux Motin // :: margauxmotin.typepad.fr
Ki-Mi-Tsu :: ki-mi-tsu.exsay.fr

News & Events
Je voudrais que ça défile verticalement. Pour qu'a chaque fois je puisse mettre les 5 dernière news ou évènement + la date et un lien.

Navigation Rapide un " >> " et un contour bleu(#323652) + ombre s'affiche au passage de la souris
Règlement :: http://fashion-graph.bbactif.com/t53-le-reglementchangement-apporte-les-avatars?sid=361cc59e3e02a5388f3a555cb3ed2406
Le Boulevard :: http://fashion-graph.bbactif.com/c3-page?sid=361cc59e3e02a5388f3a555cb3ed2406
Parlons Créas !! :: http://fashion-graph.bbactif.com/c1-page?sid=361cc59e3e02a5388f3a555cb3ed2406
La Place Public :: http://fashion-graph.bbactif.com/c4-page?sid=361cc59e3e02a5388f3a555cb3ed2406
Extras :: http://fashion-graph.bbactif.com/c2-page?sid=361cc59e3e02a5388f3a555cb3ed2406

Suivez-nous
FACEBOOK :: http://www.facebook.com/pages/Fashion-Graph/155654711142088 :: http://cdn1.iconfinder.com/data/icons/web2/Icons/FaceBook_24x24.png
TWITTER :: http://twitter.com/FashionGRAPH :: http://cdn2.iconfinder.com/data/icons/web2/Icons/Twitter_24x24.png

L'équipe est entrain de changer. Je posterai les avatars après.

Info-Bulle
MP :: http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/mail.png
Profil :: http://cdn1.iconfinder.com/data/icons/pixelo/32/id-card.png
[i](il y a une déférence de taille avec les deux. Elle n'est pas énorme mais si sa coince, dis moi.)[i]
Couleur fond:
#7fb5af-#f6f1dd
contour : #8cb4b1


Thanks Very Happy
Nocturneavatar
Messages : 118
Merci pour les informations.

J'ai commencé à travailler dessus. Néanmoins, j'ai changé la police de caractères car je ne la possède pas (et je ne l'ai pas trouvée sur Dafont). Il est recommandé d'utiliser une police de caractères que tout le monde possède donc, j'ai fait le choix de prendre la police Verdana et je l'ai mise en petites majuscules. C'est moins beau que l'original mais tout le monde peut l'afficher.

J'ai remarqué qu'il y avait une image de fond sur tes captures retouchées. Est-ce que je dois l'incorporer ? Si oui, il me faut l'adresse.

Il ne me reste plus qu'à faire les info-bulles et à paramétrer le Javascript pour les partenaires.

Pour les infobulles, il me faudrait au moins deux images à la taille souhaitée (tant pis si ce ne sont pas celles des membres de l'équipe de ton forum, c'est pour paramétrer le code, je te dirai quoi remplacer par la suite).
Dois-je faire un effet sur l'image au passage de la souris en plus de l'info-bulle ?

EDIT : En attendant le reste des données, voici un aperçu de ce que j'ai fait. Merci de me signaler s'il y a des modifications à effectuer.
Kanelavatar
Messages : 48
OK, voici l'image en arriere plan :
Spoiler:
 
et celle de l'info bulle tu veux un avatar ou une bulle ? (j'ai pas compris ):
Spoiler:
 

Oui, oui ^^ y'a une effet comme sur la capture Smile

Waaaaaw *w*
Ça fait tout drole de voir un truc que j'ai imaginer se réaliser ^^
Les seuls bémols c'est l'ombre sous les cadres, c'est trop foncé.
Y'a-t-il un moyen de faire à 46/50% d'opacité ? ou alors une couleur
plus clair px être ; genre #4a4732
Pour la navigu' rapide quand ça deviens bleu essaie de mettre l'écriture
dans une couleur claire (car sur le montage, c'est un effet de 'toshop)
#f2e3c5 et quand c'est en normal, tu met de la couleur du contour s'il
te plait Wink
Et pour les info-bulle le dégrader est de l'autre sens ^^ et tu as oublier le contour.
Le "Votez pour NOUS" est-ce que tu peux plus le center et mettre le "NOUS" au milieu, comme sur le montage.
Et dernier truc, l'ombre sous les titre des cadre : moins décalé par
rapport au texte stp ; vraiment au ras du texte ou alors moins flou
(comme sur le montage) ^^ MERCII

A oui et en faite a la base je voulais une dimenssion de 700x400 car là
je vois que ça fait un trou à droite mais si on peut pas, c'est pas
grave Smile

Edit : Voici pour remplacer l'image MP trop petite :: http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png
peut-tu les espacer un peu aussi stp
Nocturneavatar
Messages : 118
Est-ce mieux comme ça ?
Kanelavatar
Messages : 48
Yeahhh Wink
Les liens, tu peux enlever les traits en dessous ?
Et les News&Events, le a:hover peu être en gras ; Et heu, les info-bulle, on peut pas faire que ça aille vers la droite, comme sur le montage stp
Si non, apres ces modifs, c'est OK Very Happy
Merci
Nocturneavatar
Messages : 118
Kanelavatar
Messages : 48
Yeahhhh ! Very Happy
J'ai fais ça pour combler le vide :
: http://i39.servimg.com/u/f39/15/49/25/18/firefo10.png
Rajoute-le dans un cadre et la ce sera plus que OK !
Nocturneavatar
Messages : 118
Voici le résultat final.

Si je comprend bien, nous pouvons considérer la demande comme étant satisfaite et je vais pouvoir fournir les codes.

Le Javascript
Nous allons commencer par la partie la plus délicate : l'incorporation des fichiers Javascript. Ce sont ces fichiers qui permettent l'animation des boutons dans la partie "Top Partenaires".

- Téléchargement des fichiers :
Pour commencer il faut télécharger les fichiers suivants :
jquery-1.2.6.min.js
jquery.easing.1.3.js
jquery.kwicks-1.5.1.pack.js

- Mise sur serveur des fichiers :
Pour pouvoir incorporer ces fichiers sur Forumactif, il faut préalablement les héberger sur un serveur distant.
Pour cela, il faut aller sur TooFiles (libre à toi de t'inscrire ou non. La création d'un compte permet la gestion des fichiers.).
Il faut bien veiller à ce que l'adresse (URL) soit publique.

Après le chargement des fichiers sur serveur, tu devrais obtenir de nouvelles adresses de type
Citation :
http://www.toofiles.com/fr/oip/documents/js/jquery-1.2.6.min.js
http://www.toofiles.com/fr/oip/documents/js/jquery.easing.1.3.js
http://www.toofiles.com/fr/oip/documents/js/jquery.kwicks-1.5.1.pack.js

Il n'est pas certain que cela soit les adresses que tu auras obtenues après la manipulation.
Prends bien note des adresses obtenues, elles seront très utiles.
Je tiens à ce que tu le fasses. Cela pourra servir de nouveau par la suite.

- Incorporation du Javascript dans Forumactif :
Pour incorporer le Javascript dans Forumactif, nous avons deux solutions :
- soit on va charger un fichier .js ;
- soit on modifie le template overall_header.
Ton forum est sous phpBB2 donc on va choisir la facilité et modifier directement le template overall_header.

Dans ce template, il faut chercher
Code:
</head>
Et placer juste avant
Code:
<script src="http://www.toofiles.net/.../jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.toofiles.net/.../jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.toofiles.net/.../jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
   $().ready(function() {
      $('.kwicks').kwicks({
         max: 100,
         spacing: 2,
         duration: 1500,
         easing: 'easeOutBounce'
      });
   });
</script>

Ensuite, il faut repérer
Code:
<script src="http://www.toofiles.net/.../jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.toofiles.net/.../jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.toofiles.net/.../jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>

Et remplacer les adresses par celles que tu as notées. Il suffira d'enregistrer et valider le template. Nous en avons fini pour la partie Javascript. Avant de procéder à la suite, assure-toi qu'aucun changement graphique n'a été fait sur le forum à ce stade la manipulation. Normalement, il ne devrait pas y en avoir.

Le CSS
Je n'ai pas grand-chose à ajouter sur le CSS, à moins que tu aies des questions. Voici le code à entrer :
Code:
#accueil {
   width:700px;
   height:510px;
   margin:auto;
   font-family:Verdana, Geneva, sans-serif;
   font-variant:small-caps;
   padding:20px 10px 10px 10px;
   line-height:1.2em;
   letter-spacing:1px;
   background:url(http://i39.servimg.com/u/f39/15/49/25/18/img_tr10.png) no-repeat center center #FCF7E1;
}

a {
   color:#635E58;
   line-height:1.2em;
}

#accueil a img {
   border:none;
}

#accueil a {
   text-decoration:none;
}

.accueilh2 {
   color:#323652;
   text-shadow:1px 0px 1px #ffffff, 2px 0px 1px#ffffff, -1px 0px 1px#ffffff, -2px 0px 1px#ffffff, 0px 1px 1px#ffffff, 0px 2px 1px#ffffff, 0px -1px 1px#ffffff, 0px -2px 1px#ffffff, 1px 1px 1px#ffffff, 2px 1px 1px#ffffff, -1px 1px 1px#ffffff, -2px 1px 1px#ffffff, 1px 1px 1px#ffffff, 1px 2px 1px#ffffff, 1px -1px 1px#ffffff, 1px -2px 1px#ffffff, 1px 2px 1px#ffffff, 2px 2px 1px#ffffff, -1px 2px 1px#ffffff, -2px 2px 1px#ffffff, 2px 1px 1px#ffffff, 2px 2px 1px#ffffff, 2px -1px 1px#ffffff, 2px -2px 1px#ffffff, 1px -1px 1px#ffffff, 2px -1px 1px#ffffff, -1px -1px 1px#ffffff, -2px -1px 1px#ffffff,-1px 1px 1px#ffffff, -1px 2px 1px#ffffff, -1px -1px 1px#ffffff, -1px -2px 1px#ffffff, 1px -2px 1px#ffffff, 2px -2px 1px#ffffff, -1px -2px 1px#ffffff, -2px -2px 1px#ffffff, -2px 1px 1px#ffffff, -2px 2px 1px#ffffff, -2px -1px 1px#ffffff, -2px -2px 1px#ffffff, 2px 3px 12px #000000;
   font-size:12px;
   margin:-35px 0px 10px 10px;
   display:inline-block;
   padding:5px 10px 5px 10px;
}

.accueiltexte {
   color:#665F4C;
   font-size:14px;
   text-align:justify;
   padding:10px 5px 5px 5px;
   line-height:1.2em;
}

.bienvenue {
   padding:5px;
   width:50%;
   margin:auto;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:left;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 15px 15px 50px;
}

.navigation {
   padding:5px;
   width:26%;
   margin:auto;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:right;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 50px 15px 15px;
}

.navigationtexte {
   text-align:center;
   color:#665F4C;
   font-size:14px;
   padding:10px 5px 5px 5px;
}

.navigationtexte a {
   line-height:30px;
}

.navigationlien:hover {
   text-shadow:1px 0px 1px #323652, -1px 0px 1px #323652, 0px 1px 1px #323652, 0px -1px 1px #323652, 1px 1px 1px #323652, -1px 1px 1px #323652, 1px 1px 1px #323652, 1px -1px 1px #323652, 1px -1px 1px #323652, -1px -1px 1px #323652, -1px 1px 1px #323652, -1px -1px 1px #323652, 2px 5px 12px #000000;
}

.navigationlien a:hover {
   color:#f2e3c5;
}

.navigationlien:hover:before {
   content:">> ";
   text-shadow:none;
   font-size:10px;
}

.suiveznous {
   border-top:2px dotted #8E8B7C;
   margin-top:20px;
}

.suiveznoush2 {
   color:#323652;
   text-shadow:1px 0px 1px #ffffff, 2px 0px 1px#ffffff, -1px 0px 1px#ffffff, -2px 0px 1px#ffffff, 0px 1px 1px#ffffff, 0px 2px 1px#ffffff, 0px -1px 1px#ffffff, 0px -2px 1px#ffffff, 1px 1px 1px#ffffff, 2px 1px 1px#ffffff, -1px 1px 1px#ffffff, -2px 1px 1px#ffffff, 1px 1px 1px#ffffff, 1px 2px 1px#ffffff, 1px -1px 1px#ffffff, 1px -2px 1px#ffffff, 1px 2px 1px#ffffff, 2px 2px 1px#ffffff, -1px 2px 1px#ffffff, -2px 2px 1px#ffffff, 2px 1px 1px#ffffff, 2px 2px 1px#ffffff, 2px -1px 1px#ffffff, 2px -2px 1px#ffffff, 1px -1px 1px#ffffff, 2px -1px 1px#ffffff, -1px -1px 1px#ffffff, -2px -1px 1px#ffffff,-1px 1px 1px#ffffff, -1px 2px 1px#ffffff, -1px -1px 1px#ffffff, -1px -2px 1px#ffffff, 1px -2px 1px#ffffff, 2px -2px 1px#ffffff, -1px -2px 1px#ffffff, -2px -2px 1px#ffffff, -2px 1px 1px#ffffff, -2px 2px 1px#ffffff, -2px -1px 1px#ffffff, -2px -2px 1px#ffffff, 2px 5px 12px #000000;   font-size:12px;
   margin:-35px 0px 10px 10px;
   display:inline-block;
   padding:5px 10px 5px 10px;
}

.suiveznoustexte {
   float:right;
   padding:5px;
   line-height:1.2em;
}

.partenaires {
   padding:5px;
   width:50%;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:left;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 15px 15px 50px;
}

.partenairestexte {
   color:#665F4C;
   font-size:14px;
   text-align:justify;
   padding:10px 5px 5px 5px;
   line-height:1.2em;
   width:52%;
}

.kwicks {
   list-style:none;
   position:relative;
   margin:0;
   padding:0;
   margin-bottom:5px;
   width:100%;
}

.kwicks li { 
   width:40px;
   height:35px;
   display:block;
   overflow:hidden;
   padding:0;
   float:left;
}

.kwicks.horizontal li {
   margin-right:5px;   
   float:left;
}

.kwicks.vertical  li{
   margin-bottom: 5px;
}

.kwicks.horizontal #kwick_3 {
   margin-right: none;
}

.kwicks.vertical #kwick_3 {
   margin-bottom: none;
}

.partenaire1 {
   left:0px;
   margin:0px;
   width:50px;
   overflow:hidden;
   display:block;
   position:absolute;
}

.partenaire2 {
   left:52px;
   margin:0px;
   width:50px;
   overflow:hidden;
   display:block;
   position:absolute;
}

.partenaire3 {
   right:0px;
   margin:0px;
   width:50px;
   overflow:hidden;
   display:block;
   position:absolute;
}

.addusetvous {
   margin:0px 0px 0px 0px;
   clear:both;
   float:left;
   border-top:1px dotted #8E8B7C;
   display:block;
   width:100%;
}

.addus {
   width:50%;
   display:block;
}

.addush2 {
   color:#323652;
   text-shadow:1px 0px 1px #ffffff, 2px 0px 1px#ffffff, -1px 0px 1px#ffffff, -2px 0px 1px#ffffff, 0px 1px 1px#ffffff, 0px 2px 1px#ffffff, 0px -1px 1px#ffffff, 0px -2px 1px#ffffff, 1px 1px 1px#ffffff, 2px 1px 1px#ffffff, -1px 1px 1px#ffffff, -2px 1px 1px#ffffff, 1px 1px 1px#ffffff, 1px 2px 1px#ffffff, 1px -1px 1px#ffffff, 1px -2px 1px#ffffff, 1px 2px 1px#ffffff, 2px 2px 1px#ffffff, -1px 2px 1px#ffffff, -2px 2px 1px#ffffff, 2px 1px 1px#ffffff, 2px 2px 1px#ffffff, 2px -1px 1px#ffffff, 2px -2px 1px#ffffff, 1px -1px 1px#ffffff, 2px -1px 1px#ffffff, -1px -1px 1px#ffffff, -2px -1px 1px#ffffff,-1px 1px 1px#ffffff, -1px 2px 1px#ffffff, -1px -1px 1px#ffffff, -1px -2px 1px#ffffff, 1px -2px 1px#ffffff, 2px -2px 1px#ffffff, -1px -2px 1px#ffffff, -2px -2px 1px#ffffff, -2px 1px 1px#ffffff, -2px 2px 1px#ffffff, -2px -1px 1px#ffffff, -2px -2px 1px#ffffff, 2px 5px 12px #000000;   font-size:12px;
   text-align:center;
   margin:2px 0px 2px 0px;
}

.etvous {
   float:right;
   margin:-30px 2px 2px 2px;
   width:45%;
   display:block;
   text-align:right;
}

.votez {
   float:right;
   width:40%;
   display:block;
   border-left:2px dotted #8E8B7C;
   margin:-45px 15px 0px 0px;
}

.votezh2 {
   color:#323652;
   text-shadow:1px 0px 1px #ffffff, 2px 0px 1px#ffffff, -1px 0px 1px#ffffff, -2px 0px 1px#ffffff, 0px 1px1px#ffffff, 0px 2px 1px#ffffff, 0px -1px 1px#ffffff, 0px -2px 1px#ffffff, 1px 1px 1px#ffffff, 2px 1px 1px#ffffff, -1px 1px 1px#ffffff, -2px 1px 1px#ffffff, 1px 1px 1px#ffffff, 1px 2px 1px#ffffff, 1px -1px 1px#ffffff, 1px -2px 1px#ffffff, 1px 2px 1px#ffffff, 2px 2px 1px#ffffff, -1px 2px 1px#ffffff, -2px 2px 1px#ffffff, 2px 1px 1px#ffffff, 2px 2px 1px#ffffff, 2px -1px 1px#ffffff, 2px -2px 1px#ffffff, 1px -1px 1px#ffffff, 2px -1px 1px#ffffff, -1px -1px 1px#ffffff, -2px -1px 1px#ffffff,-1px 1px 1px#ffffff, -1px 2px 1px#ffffff, -1px -1px 1px#ffffff, -1px -2px 1px#ffffff, 1px -2px 1px#ffffff, 2px -2px 1px#ffffff, -1px -2px 1px#ffffff, -2px -2px 1px#ffffff, -2px 1px 1px#ffffff, -2px 2px 1px#ffffff, -2px -1px 1px#ffffff, -2px -2px 1px#ffffff, 2px 5px 12px #000000;
   font-size:12px;
   display:inline-block;
}

.voteztexte {
   padding:10px 5px 5px 5px;
   line-height:1.2em;
   width:100%;
   height:55px;
   margin-top:-15px;
}

.coupdecoeur {
   padding:5px;
   width:50%;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:left;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 15px 15px 50px;
}

.news {
   padding:5px;
   width:50%;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:left;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 15px 15px 50px;
   height:80px;
}

.newstexte, .newstexte a {
   color:#665F4C;
   font-size:14px;
   text-align:justify;
   padding:10px 5px 5px 5px;
   line-height:1.2em;
   height:100%;
}

.newstexte a:hover {
   font-weight:bold;
}

marquee.vertical {
   height:70px;   
}

.equipe {
   padding:5px;
   width:26%;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:right;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 50px 15px 15px;
   clear:right;
}

img.avatar {
   opacity:0.3;
   -moz-opacity:0.3;
   -ms-filter:"alpha(opacity=30)";
   filter:alpha(opacity=30);
}

img.avatar:hover {
   opacity:1;
   -moz-opacity:1;
   -ms-filter:"alpha(opacity=100)";
   filter:alpha(opacity=100);
}

.infobulle {
   position:relative;
   display:inline;
}

.infobulle span {
   display:none;
}

.infobulle:hover {
    z-index:500;
}

.infobulle:hover span {
   margin:auto;
   text-align:center;
   display:inline;
   position:absolute;
   white-space:nowrap;
   top:-160px;
   left:-25px;
   padding:15px;
   margin:1em 0 3em;
   background-color:#f6f1dd;
   border:1px solid #7fb5af;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-webkit-gradient(linear, left top, left bottom, from(#f6f1dd), to(#7fb5af));
   background:-moz-linear-gradient(top, #f6f1dd, #7fb5af);
   background:-o-linear-gradient(top, #f6f1dd, #7fb5af);
}

.infobulle:hover span:before {
   content:"";
   display:block;
   position:absolute;
   bottom:-20px;
   left:60px;
   width:0;
   height:0;
   border:0;
   border-left-width:30px;
   border-bottom-width:20px;
   border-style:solid;
   border-color:transparent #7fb5af;
}

.infobulle:hover span:after {
   content:"";
   display:block;
   position:absolute;
   bottom:-20px;
   left:80px;
   width:0;
   height:0;
   border-width:0;
   border-left-width:10px;
   border-bottom-width:20px;
   border-style:solid;
   border-color:transparent;
}

.rangadmin {
   color:#ff5c33;
}

.rangmodo {
   color:#A734AD;
}

.mail, .profil {
   display:inline;
   margin:5px;
}

.firefox {
   width:26%;
   border:1px solid #8E8B7C;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   float:right;
   -moz-box-shadow:4px 4px 12px #888888;
   -webkit-box-shadow:4px 4px 12px #888888;
   margin:15px 50px 15px 15px;
   clear:right;
}

Valider.

Le HTML
Pour finir, voici le code HTML de la page d'accueil. Si tu as des questions, il ne faut pas hésiter.
Code:
<div id="accueil">

   <div class="bienvenue">
      <h2 class="accueilh2">Bienvenue {USERNAME}</h2>
         <div class="accueiltexte">Voici pour 2011 un forum tout neuf qui en est a sa 3e Version, plus attractive. Dans une bonne ambiance, tu pourras progresser ou débuter en Graphisme, illustrations et stylisme en étant actif.
         </div>
   </div>

   <div class="navigation">
      <h2 class="accueilh2">Navigation rapide</h2>
      <div class="navigationtexte">
         <span class="navigationlien"><a href="http://fashion-graph.bbactif.com/t53-le-reglementchangement-apporte-les-avatars">Le Règlement</a></span><br />
         <span class="navigationlien"><a href="http://fashion-graph.bbactif.com/c3-page">Le Boulevard</a></span><br />
         <span class="navigationlien"><a href="http://fashion-graph.bbactif.com/c1-page">Parlons Créas !!</a></span><br />
         <span class="navigationlien"><a href="http://fashion-graph.bbactif.com/c4-page">La Place Publique</a></span><br />
         <span class="navigationlien"><a href="http://fashion-graph.bbactif.com/c2-page">Extras</a></span>
      </div>
      <div class="suiveznous">
         <h2 class="suiveznoush2">Suivez-nous</h2>
         <div class="suiveznoustexte"><a href="http://www.facebook.com/pages/Fashion-Graph/155654711142088" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/web2/Icons/FaceBook_24x24.png" alt="Facebook" /></a><a href="http://twitter.com/FashionGRAPH" target="_blank"><img src="http://cdn2.iconfinder.com/data/icons/web2/Icons/Twitter_24x24.png" alt="Twitter" /></a>
         </div>
           </div>
   </div>

   <div class="partenaires">
      <h2 class="accueilh2">Top Partenaires</h2>
      <div class="partenairestexte">
         <ul class="kwicks horizontal">
            <li id="kwick_1" class="partenaire1"><a href="http://lovegraph.keuf.net" target="_blank"><img src="http://img252.imageshack.us/img252/690/bbouton1.png" /></a></li> 
            <li id="kwick_2" class="partenaire2"><a href="http://elegance-design.forumactif.com" target="_blank"><img src="http://s2.noelshack.com/uploads/images/1841008350753_13348445791923_100035.png" /></a></li> 
            <li id="kwick_3" class="partenaire3"><a href="http://exentric.forumactif.fr" target="_blank"><img src="http://i63.servimg.com/u/f63/16/03/74/29/bouton10.png" /></a></li>
         </ul>
         <div class="addusetvous">
            <div class="addus">
               <h2 class="addush2">Add Us</h2>
               <div class="addustexte"><a href="http://fashion-graph.bbactif.com"><img src="http://i69.servimg.com/u/f69/15/49/25/18/mini_b10.png" /></a>
               </div>
            </div>
            <span class="etvous"><a href="http://fashion-graph.bbactif.com/t24-nos-partenaires">Et vous ?</a></span>
         </div>
      </div>
      <div class="votez">
         <h2 class="accueilh2" style="text-align:center;">Votez pour nous</h2>
         <div class="voteztexte"><a href="http://www.weetix.fr/membres/blog_top/form.php?cc=16249&document=80305&id_affil=" target="_blank"><img src="http://i39.servimg.com/u/f39/15/49/25/18/etoile12.png" /></a><img src="http://i39.servimg.com/u/f39/15/49/25/18/etoile13.png" />
          </div>
      </div>
   </div>

   <div class="equipe">
      <h2 class="accueilh2">L'équipe</h2>
      <div class="accueiltexte">
         <div class="infobulle"><img src="http://i39.servimg.com/u/f39/15/49/25/18/bulle_10.png" class="avatar"/><span><div class="pseudo">Kanel-972</div>
            <div class="rangadmin">Administrateur</div><div class="mail"><a href="LIEN" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png" /></a></div><div class="profil"><a href="LIEN" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/pixelo/32/id-card.png" /></a></div></span></div>
         <div class="infobulle"><img src="http://i39.servimg.com/u/f39/15/49/25/18/bulle_10.png" class="avatar" /><span><div class="pseudo">Modo</div>
            <div class="rangmodo">Modérateur</div><div class="mail"><a href="LIEN" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-32/mail.png" /></a></div><div class="profil"><a href="LIEN" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/pixelo/32/id-card.png" /></a></div></span></div>
      </div>
   </div>
   
   <div class="coupdecoeur">
      <h2 class="accueilh2">Coups de coeur</h2>
      <div class="accueiltexte"><marquee scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://www.lutheen.com" target="_blank">Lutheen Illustration</a> // <a href="http://www.maelis.net" target="_blank">Maelis</a> // <a href="http://www.diglee.com" target="_blank">Diglee-Blog d'illustratrice</a> // <a href="http://margauxmotin.typad.fr" target="_blank">Margaux Motin</a> // <a href="http://ki-mi-tsu.exsay.fr" target="_blank">Ki-Mi-Tsu</a></marquee>
      </div>
   </div>

   <div class="equipe">
      <h2 class="accueilh2">L'équipe</h2>
      <div class="accueiltexte">
           <img src="http://i39.servimg.com/u/f39/15/49/25/18/firefo10.png" alt="Forum optimisé pour Firefox" />
       </div>
   </div>

   <div class="news">
      <h2 class="accueilh2">News & Events</h2>
      <div class="newstexte"><marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();" height="70px">
         <a href="">Le 01.01.11 - C'est le jour de l'an.</a><br />
         <a href="">Le 02.01.11 - C'est la Saint Basile.</a><br />
         <a href="">Le 03.01.11 - C'est la fête à Geneviève.</a><br />
         <a href="">Le 04.01.11 - Nous fêtons les Odile.</a><br />
         <a href="">Le 05.01.11 - Célébrons le jour d'Edouard.</a></marquee>
      </div>
   </div>
</div>

Il n'y a plus qu'à valider et normalement, tu devrais avoir la page d'accueil comme tu le souhaites.
Kanelavatar
Messages : 48
Quand je clic sur les fichier ça ne me demande pas de les télécharger. Comment je fais pour héberger alors :s
et dans le overall_header j'ai déja :
Code:

J'ai mis ton code en dessous. C''est bon ?
Voila c'est bon j'ai mis le HTML mais y'a juste le java qui fonctionne pas .


et aussi le a:hover de coup de coeur est "normal" mais celui des news, le trait en pointillé se met comme même, pareil pour la navigation; J'ai modifier un peu mais ça fais tjr :s
que faut-il faire stp?
Nocturneavatar
Messages : 118
Pour les télécharger, il faut faire clic droit sur les liens et "Enregistrer la cible du lien sous...".

Il n'y a rien entre les balises de code. Tant que le code est avant , ça va marcher.
Kanelavatar
Messages : 48
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}>
c'est ça qu'il y a.
ok merci
Nocturneavatar
Messages : 118
Quand tu es sur le template, fais Ctrl+F et tu auras une barre de recherche. Dedans, tu tapes
Code:
</head>
Et il te repèreras où ce trouve la première occurrence associée à la recherche (pour ce cas-là, il ne devrait y en avoir qu'une.).
Il suffit de copier le code juste avant
Code:
</head>
.
Kanelavatar
Messages : 48
mais avant le y'a le code
Code:
<!DOCTYPE ...
donc je met le java avant ce code la aussi ou entre les deux ?
Kanelavatar
Messages : 48
Contenu sponsorisé

Aller à la page : 1, 2  Suivant,
 Sujets similaires
-
» [Nocturne] Demande d'aide pour code css complet s'il vous plait.
» Aide pour code
» Demande d'aide pour un générateur de présentation
» Demande d'aide pour un tableau dans le message d'accueil
» Demande d'aide pour un Qui est en ligne.

Répondre au sujet


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

Modérer

Trames

  • Nos services
  • Prés. obligatoire
  • Référencé
  • Prérelance
  • 1ère relance
  • 2ème relance
  • Recherche (relance)
  • Recherche (corbeille)
  • Formulaire manquant
  • Formulaire incomplet
  • 1
  • 2
  • 3
  • 4
  • 5
  • Eval - Basique
  • Eval - RPG