Pumpidum



Je ne dirais qu'une chose : A mort le placement

Hawn, on t'as même pas donné notre avis !
Désolée, est-ce que ça t'intéresse toujours @Hush. ?

J'avais essayé ce code hier, elle s'affichait bien dans ma prévisualisation puis tout était cassé quand j'ai validé le message Il faut que je la mette sur un forum test ?

Tu n'es pas obligé de le mettre sous un forum test, mais si ça t'arrange pourquoi pas. De toutes façons on essayera surtout de relire ton code pour t'aider à l'améliorer et te donner des conseils. Le visuel importe moins pour les exercices, c'est surtout pour te donner des pistes afin de t'exercer :)

Pfiou, j'ai fait sur jsbin du coup (super ce site, je ne connaissais pas!)





Prévisualisation (aucune idée si ça marche ou pas )

Coucou :)
Alors déjà, je trouve ton code quand même bien foutu mine de rien, même si y'a quelques problèmes techniques à mon avis (notamment les infobulles et le positionnement des éléments en général)

Tout d'abord, le positionnement. Je te conseille de lire ce tutoriel dans un premier temps et plus particulièrement la partie sur la valeur absolute : http://fr.learnlayout.com/position.html

Comme tu peux le constater, la valeur relative replace les éléments en valeur absolute dans le flux de son bloc s'ils sont à l'intérieur. J'espère que je suis claire, c'est un peu compliqué à expliquer parfois xD
Dans ton cas, comme tu positionnes tes éléments en position absolute, tu vas avoir besoin d'un bloc qui englobe toute ta PA afin que les éléments ne se placent pas en fonction de la page, mais en fonction du bloc d'origine. Donc, il faudrait ajouter un position:relative; à #bg et seulement ça pour que ce soit le cas :)

Maintenant, on va s'attaquer à ton second problème : les infobulles. Je vais te donner un exemple d'infobulle simple, expliquer son fonctionnement et ensuite tu corrigeras ton code, d'accord ? :)



J'ai donc utilisé les position en commencement par une valeur relative afin de modifier le flux dans lequel les prochains blocs seront affectés.
Ensuite j'ai ajouté l'image dans la div #infobulle puis une div dans laquelle je mets les informations que je souhaite. Dans mon CSS, je place la div avec un position:absolute;, ce qui fait que le bloc cache mon image avec le CSS appliqué.

Comme on souhaite que l'image soit affichée et qu'au survol on puisse voir ensuite les informations, on va appliquer un opacity:0; à notre div pour ensuite appliqué un opacity:1; pour que le bloc apparaisse au survol de l'image.

Tu remarqueras cependant que la manière avec laquelle j'applique mon hover est différente de la tienne : #infobulle:hover div. Ce que je fais, c'est que j'applique le hover sur le bloc #infobulle et pas sur la div, car c'est au survol de tout le bloc que les informations vont s'afficher et pas seulement le bloc d'informations. Ainsi, tu peux appliquer l'effet que tu veux sans problème (défilement sur le côté, agrandissement du bloc,...)

Un petit peu de CSS et voilà notre infobulle ! :D
J'espère que mes explications sont assez claires et qu'elles t'auront aidées pour modifier ton code afin qu'il y ait le moins de bugs possibles (c'est aussi parce que tu n'avais peut-être pas mis de position:relative; au premier bloc que la PA devait s'afficher étrangement comme tu l'as signalé je pense).

Bonne soirée :)

Coucou !

Merci beaucoup pour ton explication, je vais essayer de reprendre !

Alors déjà, je trouve ton code quand même bien foutu mine de rien, même si y'a quelques problèmes techniques à mon avis (notamment les infobulles et le positionnement des éléments en général)

Tout d'abord, le positionnement. Je te conseille de lire ce tutoriel dans un premier temps et plus particulièrement la partie sur la valeur absolute : http://fr.learnlayout.com/position.html

Comme tu peux le constater, la valeur relative replace les éléments en valeur absolute dans le flux de son bloc s'ils sont à l'intérieur. J'espère que je suis claire, c'est un peu compliqué à expliquer parfois xD
Dans ton cas, comme tu positionnes tes éléments en position absolute, tu vas avoir besoin d'un bloc qui englobe toute ta PA afin que les éléments ne se placent pas en fonction de la page, mais en fonction du bloc d'origine. Donc, il faudrait ajouter un position:relative; à #bg et seulement ça pour que ce soit le cas :)

Je m'étais posé la question, mais il me semblait que j'avais lu qu'absolute était par rapport au contenant (même s'il n'est pas positionné) mais c'était il y a longtemps, erreur facile à corriger !

Merci pour les infobulles, je vais essayer de modifier cela !

edit: waaaaaah merci merci c'est beaucoup plus simple (et efficace!) que tous les bidouillages que je faisais !

Du coup avec les modifications ça devient vraiment pas mal niveau code. Bien joué, t'as bien compris mes explications sur les infobulles :D
J'ai rien à rajouter niveau technique, mais par rapport à l'optimisation du code c'est pas encore tout à fait ça. Tu aurais pu utiliser seulement une classe dans ton CSS pour les infobulles du staff, comme ceci


Comme tu peux le voir, j'ai ajouté la propriété display:inline-block; afin d'aligner les infobulles les unes à côté des autres. Comme la div est une balises de type bloc, elle ramène les blocs qui la suivent à la ligne. Avec cette propriété, on modifie la valeur de base de la balise div afin qu'elle s'aligne avec d'autres blocs.
Donc en gros, au lieu de faire à chaque fois une ligne pour une infobulle tu pourrais tout simplement toutes les mettre dans un bloc principal pour ensuite les aligner en une classe dans ton CSS :D

D'accord je me suis toujours demandé comment utiliser cette propriété (j'ai appris toute seule du coup j'ai pas mal de lacunes huhu)

Merci beaucoup

'tain j'suis trop nulle du coup j'ai mis mon iframe entre des balises codes :')
J'étais trop crevée xD
Du coup voilà l'exemple @Luinil. :3

ça rend bien Merci !

Super ! C'est tant mieux alors ! :D

Bonjour J'ai fais mon petit essai, j'y ai glissé plein d'effets que je voulais travailler, j'espère que ça ira

Hello ! Perso je suis assez contente, pour le code je sais pas ce que vous en pensez ? Ah et sinon j'ai codé le triangle plutôt que de prendre l'image, sinon c'est pas drôle

Hello vous deux ! Je vais "corriger" vos exercices !

@Tetsu

Ton code est bien =) Mais je suis là pour pointé tout les petit "défaut" afin de t'aider à progresser dans la programmation. La première chose que je voie c'est l'utilisation de la balise style à l'intérieur de ta PA. Normalement soit on met le CSS à l'extérieur du HTML soit on le met à l'intérieur. Pas un peux des deux ;)

Dans le cas d'un PA il est préférable de séparé le CSS du HTMl comme tu là fait. J'ai l'impression que c'était presque à chaque fois pour positionner ton élément dans ta PA. Il existe des façon plus simple de positionner tout ça. Par exemple, pour tes lien, je les aurais tous mis dans une Div que j'aurais positionner en absolute. Ensuite, j'aurais appliquer un display:block; sur mon lien (comme tu là fait sur la span) Le Display aurais eu pour effet de crée un saut de ligne entre chaque lien. Du coup ils se serais positionner un à la suite de l'autre sans plus d'effort et de ligne ;) J'aurais également mis tout mon style sur mon lien et ainsi évité d'utiliser un span pour "rien".

En programmation on essaie de faire plus avec moins. Oui, oui nous sommes paresseux xD Voici comment j'aurais coder la section lien :

Code:

<div id="lien">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</div>

Code:

#lien{
position:absolute;
top: px;
left: px;
}

#lien a{
  display: block;
  background-color: #F1A95C;
  border: 2px solid #645955;
  width: 100px;
  height: 25px;
  text-align: center;
  color: #645955;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

Tu ne connais surement pas les sélecteurs, mais comme tu peux le voir dans mon exemple grâce à eux on peux réduire considérablement les ligne de codes. Ici mon sélecteur était le "a" dans l'expression #lien a{}. Cette ligne de code veux dire "tout les lien (a) dans le bloc qui porte le ID lien vont avoir ce style là" Je ne sais pas si je suis claire mais je te laisse aller lire le tuto ici : Les sélecteurs.

Tu peux utiliser les sélecteur partout ! Par exemple dans ton code tu aurais pue l'utiliser sur ton staff. Au lieu d'avoir la class .cadrestaff et .textestaff tu aurais pue écrire .cadrestaff div et pour les partenaires aussi.

Ensuite ce que je remarque aussi c'est que tu utilise beaucoup de balise "pour rien". La span dans tes liens est un exemple, mais également dans ton contexte où tu à utiliser une div #textecontexte alors que tout ce style aurais pue être mis dans #cadrecontexte. Même chose pour le cadre info.

D’ailleurs pour ce cadre tu à utiliser une span que tu à modifier en bloc pour intégré un texte à l'intérieur. Il aurais été plus judicieux de choisir un balise de bloc comme une DIV ou P. Il est en effet possible transformer une balise "inline" en balise "block" mais il faut être réaliste et respecté le rôle de chacune. Dans une balise "inline" normalement il n'y a pas beaucoup de texte, sont rôle est de mettre en évidence une section de texte, contrairement au balise de type "block" =)

Voilà j'ai fait le tour, j'espère ne pas t'avoir fait peur x)

Je n'est pas parler de tout les élément de ta PA puisque les "erreurs" ce répétait. Ce que j'ai dit pour les lien pourrais s’appliquer pour les tops site.

@Sun

Hello toi ! Bravo pour l'utilisation des sélecteurs =)

La première chose que je vois dans ton code c'est l'utilisation de plusieurs positionnement différent sur un même élément. Il n'est pas vraiment mal d'en choisir une où l'autre... mais il faut choisir ;) Soit on positionne avec les display, soit avec le positionnement relative/absolute.

L'avantage du positionnement absolute c'est qu'il est possible de mettre notre élément exactement là où on le souhaite. Par contre il faut l'utiliser convenablement. Ce n'est pas toujours facile de comprendre comment ça fonctionne.

En gros, l'élément qu'on positionne avec le top/bottom/left/right c'est celui qui porte l’attribut "absolute". Celui qui auras l’attribut relative c'est le parent/conteneur. EN gros il délimite le carré dans lequel les autre élément vont être positionner.

Par exemple dans ta PA ton "parent/conteneur" aurais pue être .pa_gauche (voir même .pa_gdbloc et ainsi suprimer la div droite et gauche)

Ton CSS aurais resemblez à ceci :

Code:

.pa_gauche{
position:relative;
    width: 320px;
    height: 450px;
}

.pa_gauche img{
porition:absolute;
top: px;
left: px;
}

.pa_gauche_liens{
porition:absolute;
top: px;
left: px;
}

Ensuite, je trouve que tu utilise des balise pour rien. Tu était bien partie avec les sélecteur qui élimine des balise, mais pourquoi en avoir utiliser au temps dans ton contexte ?

.pa_contexte est pour positionner ton bloc contexte. Ok, mais avec un bon positionnement relative/absolute on aurais peu simplement positionner .pa_cadre-contexte. Ensuite, pourquoi avoir utiliser une balise paragraphe ? Tout les attribut aurais pue être ajouter aus CSS de la Div .pa_cadre-contexte.

J'ai le même commentaire pour ton staff et le bloc texte au côté des news.

En parlent des News tu aurais pue transformer des span en bloc pour éviter de mettre des BR dans ton html =) mais là c'Est du chipotage xD

Finalement, où on met les images du staff ?

Voilà ! J'espère ne pas vous avoir fait peur avec mon analyse =) Si vous avez des questions n'hésitez pas

Merci beaucoup pour ta réponse @Batty !
Pour le fait de choisir entre display et relative/absolute, je ne savais même pas, donc merci x) Je pensais qu'il fallait d'office mettre le display et puis régler, bref, merci beaucoup pour cette info.
Pour le contexte et le p inutile, effectivement, j'ai tendance à vouloir toujours utiliser une balise par type d'éléments, et mettre des p pour rien :rip: J'essayerai d'y penser plus à l'avenir.
Quant aux news, ils sont en span et en display: block; :rip: Mais j'avais mis des br à la base parce que j'étais partie sur du p ou du h je sais plus, avant de me rappeler qu'un span serait plus pertinent pour ça, et j'ai oublié de les retirer. Ah làlà, la relecture encore xD
Les images du staff, c'est en haut à gauche dans les cadres là, et elles sont dans le css Du coup ç'aurait été mieux de les placer dans la partie HTML ? Comment tu les aurais mises alors, sans utiliser de style ?
Merci encore pour ta réponse x)

Hello Sun !

Ah oui j'avais pas remarquer les image dans le CSS ... mais du coup ton membre du staff #1 et #3 trois devrons avoir la même image ?

Moi j'aurais tout simplement mi mon image en HTML :

Code:

<div class="conteneur">
  <img src="URL" alt="satff 1" />
  <div class="contenue">Pseudo/rang/mp/profil</div>
</div>

Ah oui effectivement s'ils ont la même image c'est bizarre xD
Ok, merci beaucoup, j'y penserai. Encore merci pour ta correction