Up, please

Salut!

Je viens aux nouvelles, c'est toujours d'actualité? Essaie de upper de temps en temps, idéalement au moins une fois par semaine

c'est bien toujours d'actualité.

Coucou Witm

Je ne viens pas pour prendre en charge la demande, mais pour poser une petite question sur un point que je n'ai pas très bien compris :

witm a écrit:Pour les images du staff, j'aimerai pouvoir placer des petits icons arrondis afin de cacher les coquillages qui seront aussi des liens direct vers les profils des membres du staff.

En fait tu veux mettre à la place des coquillages dans Staff une petite image arrondie pour chaque membre c'est ça ?

Est ce que tu as une version "sans les coquillages" et "sans le texte météo" de l'image ou pas ? Ainsi qu'une image du coquillage découpée ? Le codeur pourra faire sans sinon mais c'est plus simple si tu t'en charges ^^

Hey,
Eh bien, c'est bien ça, tu as bien compris ce que je souhaitais. De simples images arrondies, avec en plus un lien dessus pour pouvoir accéder au profil des membres du staff.
Et, j'ai l'image sans le texte météo, c'est sûr que ça peut aider, ainsi que le coquillage seul, par contre je n'ai pas l'image sans les coquillages directement dessus...
https://www.zupimages.net/up/16/16/qjt3.png
https://www.zupimages.net/up/16/16/vgma.png

Bon bah finalement je prends en charge la demande. Je pense que tu peux éditer le premier message pour préciser (Nihil), comme ça on sait que la demande est prise. :)

Tu peux voir le rendu ici :


Si je ne me trompe pas il reste juste l'histoire de la scrollbar sur contexte, c'est bien ça ?
Pour les liens, tu veux qu'ils s'ouvrent dans la même page (comme le lien "Règlement" actuellement) ou bien dans un nouvel onglet (comme le lien "Amis" quand on clique sur un coquillage) ?

Oh, merci beaucoup. En tout cas c'est vraiment top. Pour ce qui est des liens, j'aime bien l'idées qu'ils s'ouvrent sur une nouvelle page !
Mais sinon tout est parfait pour moi, pour ce qui est de la scrollbar au niveau du contexte, comme c'est pour l'instant ça me va parfaitement.

Bon bah super, je laisse comme ça alors, j'ai juste changé les liens pour qu'ils s'ouvrent dans un nouvel onglet :)

CSS :

Code:

/**
 * CSS POUR LA PA
 * Codé par Never Utopia
 */

.pa-witm {
  background: url("http://www.zupimages.net/up/16/16/qjt3.png");
  width: 800px;
  height: 500px;
  margin: auto;
  font-size: 10px;
  text-align: left;
  position: relative;
}

/* Bloc contexte */
.pa-witm-contexte {
  position: absolute;
  font-size: 10px; /* taille de la police */
  left: 550px;
  top: 250px;
  width: 180px;
  height: 150px;
  overflow: auto;
}

/* Bloc météo */
.pa-witm-meteo {
  position: absolute;
  font-size: 8px; /* taille de la police */
  height: 50px;
  width: 130px;
  left: 370px;
  top: 360px;
  overflow: auto;
}

/* Liens en haut */
.pa-witm-reglement,
.pa-witm-bottin,
.pa-witm-partenariat,
.pa-witm-intrigues {
  position: absolute;
  top: 85px;
  left: 220px;
  width: 100px;
  height: 26px;
  text-indent: 100%; /* Pour masquer le texte */
  overflow: hidden; /* Pour masquer le texte */
}

.pa-witm-bottin { left: 348px; }

.pa-witm-partenariat { left: 475px; }

.pa-witm-intrigues { left: 616px; }

/* Bloc staff*/

.pa-witm-staff {
  position: absolute;
  top: 240px;
  left: 90px;
}

/* Bulle pour chaque membre du staff */
.pa-witm-staff a {
  display: inline-block;
  width: 40px; /* largeur */
  height: 40px; /* hauteur */
  background: #B8D0CD; /* couleur de fond */
  border-radius: 50%; /* arrondi */
  margin-right: 3px; /* marge entre les ronds */
  overflow: hidden; /* empeche les depassements */
  transition: all 300ms;
}

.pa-witm-staff img {
  width: 100%;
}

.pa-witm-staff a:hover {
  transform: scale(1.1); /* grossissement au survol*/
}

/* Bloc amis */

.pa-witm-amis {
  position: absolute;
  top: 340px;
  left: 90px;
  width: 200px;
}

.pa-witm-amis a {
  display: inline-block;
  width: 36px;
  height: 37px;
  margin-right: 8px;
  margin-bottom: 6px;
  overflow: hidden; /* pour cacher le texte */
  text-indent: 100%; /* pour cacher le texte */
  white-space: nowrap; /* pour cacher le texte */
}

/**
 * FIN PA
 * Codé par Never Utopia
 */


HTML :

Code:

<div class="pa-witm">
 
 <a class="pa-witm-reglement" title="Lire le règlement" href="http://www.never-utopia.com/" target="_blank">Règlement</a>
 <a class="pa-witm-bottin" title="Consulter le bottin" href="http://www.never-utopia.com/" target="_blank">Bottin</a>
 <a class="pa-witm-partenariat" title="Voir les partenaires" href="http://www.never-utopia.com/" target="_blank">Partenariat</a>
 <a class="pa-witm-intrigues" title="Découvrir les intrigue" href="http://www.never-utopia.com/" target="_blank">Intrigues</a>
 <div class="pa-witm-staff">
 <a href="http://www.never-utopia.com/" target="_blank"><img alt="Pseudo" src="http://i39.servimg.com/u/f39/18/82/38/87/211.png" /></a>
 <a href="http://www.never-utopia.com/" target="_blank"><img alt="Pseudo" src="http://img11.hostingpics.net/pics/308548Caffeine2.png" /></a>
 <a href="http://www.never-utopia.com/" target="_blank"><img alt="Pseudo" src="http://img11.hostingpics.net/pics/511804PLEC1.png" /></a>
 <a href="http://www.never-utopia.com/" target="_blank"><img alt="Pseudo" src="http://img11.hostingpics.net/pics/400287PETITEBLONDASSE.png" /></a>
 </div>

 <div class="pa-witm-amis">
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 <a target="_blank" href="http://www.never-utopia.com/">Nom du partenaire</a>
 </div>

 <div class="pa-witm-contexte">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis libero, amet aperiam, aspernatur velit saepe eius, voluptates earum excepturi temporibus et id! Quibusdam velit distinctio quos deserunt repellat, praesentium quidem. ipsum dolor sit
 amet, consectetur adipisicing elit. Natus voluptatem fuga molestias voluptates tenetur quidem magni repellendus, corporis doloremque dolores, cumque ullam ad ipsum illum est amet expedita perferendis ducimus Lorem ipsum dolor sit amet, consectetur adipisicing
 elit. Reprehenderit suscipit esse sit eum molestiae fugiat in quo est sequi officia provident quidem asperiores impedit consequuntur animi, illo iure ea, maiores??
 </div>

 <div class="pa-witm-meteo">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad sapiente in molestias sit quae ullam nostrum reprehenderit dolores
 </div>
</div>

Je te laisse tester sur ton forum et me dire si ça te convient bien, si tu vois comment modifier le contenu pour mettre les bons liens / images. ♡

Je ne te demande pas de crédit pour moi (ça ne m'a pas pris longtemps et puis c'est surtout ton graph, là en codage il n'y a pas grand chose), simplement un petit lien vers Never Utopia quelque part sur le forum en remerciement :)

Tout est parfait, tout est bien clair donc merci beaucoup à toi pour ton temps et pour ce résultat

Suuuper
N’hésite pas à éditer ton premier message pour cocher l’icône « Terminé » si tout est bon