Accueil2 résultats trouvés pour bg
- le Mar 28 Mar 2017 - 0:53
- Rechercher dans: Les pages d'accueil
- Sujet: [Intermédiaire] Page d'accueil #4 - Batty
- Réponses: 18
- Vues: 2173
[Intermédiaire] Page d'accueil #4 - Batty
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 !
- le Lun 27 Mar 2017 - 19:50
- Rechercher dans: Les pages d'accueil
- Sujet: [Intermédiaire] Page d'accueil #4 - Batty
- Réponses: 18
- Vues: 2173
[Intermédiaire] Page d'accueil #4 - Batty
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 :)
|
|
|