forum sur le coté + infobulle

[LADYQUEEN]

Bonjour , je voudrais savoir est ce que c'est possible de mettre mon forum comme ceci :: (image sur le coté et catégories à droite)

Spoiler:

Et aussi j'aimerais savoir le code pour faire un infobulle . (Je veux que une photo change au passage de la souris .)
Merci à ceux qui répondra !

[kheino]

Bonjour Ladyqueen,

L'image que tu veux sur la gauche, est-ce un render ou bien une image de fond ?
Si c'est une image de fond, il suffirait de placer le forum sur la droite.
Si c'est un render, pareil pour le forum, mais là il faudrait aussi placer le render sur la gauche.

Quant à l'infobulle, tu veux une infobulle, c'est à dire une petite popup qui s'affiche en plus de l'image de base ?
Ou bien, que l'image de base change avec le hover ?
Là tu dis les deux, or ce n'est pas la même chose...

[LADYQUEEN]

bonjours ,
- Un render , c'est quoi ? *désoler pour la question bête*
- Pour l'infobulle , je veux que l'image de base change avec le hover .

[kheino]

- Un render , c'est quoi ? *désoler pour la question bête*

Nenni, je ne désole pas. :-P
Il y a Google ton ami qui te le dirait de suite :
C'est une image sur fond transparent, donc une image que l'on poserait sur un fond par exemple.

- Pour l'infobulle , je veux que l'image de base change avec le hover .

Ainsi, ce n'est pas une infobulle... :-P Mais faisable rien que en HTML et CSS.
Pour les images, il faut deux images de dimensions identiques si possible.
Peux-tu me donner les liens de ces deux images.

[LADYQUEEN]

Pour mon header c'est une image de fond que je veut .
D'accord pour l'infobulle mais pourrais je avoir le code du CSS et HTML ?

[kheino]

Oui, je peux, mais si je dois te faire un tuto il faut que je le mette d'abord en pratique, en outre que j'utilise des images...
Pas trop envie encore d'aller en chercher, la moindre des choses c'est de fournir les liens, tu ne crois pas ?

Bref, dans le HTML, c'est relativement simple :
- Créer un bloc contenant
- Un bloc pour l'image de base
- Un bloc pour ce qui est caché par l'image de base

Code:

<div id="contenant"><div class="imgbase"><img src="http://illiweb.com/fa/pbucket.gif" alt="imgbase" /><p><img src="http://illiweb.com/fa/pbucket.gif" alt="img2" /></p></div></div>

Dans le CSS on détermine le rôle de chacune des images, et surtout, il faut déterminer les dimensions et les bonnes positions :

/*rollover my image
------------------------------*/
#contenant {
width: 300px;
height: 300px;
margin: 100px auto;
}
.imgbase {
position: relative;
float: left;
background: transparent;
width: 160px;
height: 160px;
overflow: hidden;
margin: 10px;
cursor: pointer;
}
.imgbase p {
position: absolute;
width: 160px;
height: 160px;
}
.imgbase img {
position: absolute;
-webkit-transition: left 1.5s linear;
-o-transition: left 1.5s linear;
-moz-transition: left 1.5s linear;
-htm-transition: left 1.5s linear;
transition: left 1.5s linear;
}
.imgbase img:hover {
left: -160px;
}

J'ai ajouter un effet de transition du CSS3 qui n'est absolument pas obligé.

[LADYQUEEN]

Merci pour les codes
et pour mon image de fond que je veux mettre a gauche , tu sais comment faire ?

[kheino]

Pour ton fond à gauche et le forum à droite, il va falloir pratiquer le "float" pour les deux.
Pour ce qui est du forum, dans la feuille de style CSS, ajoute au :

body {
float: right;
}

Si tu veux adapter les marges, tu le fera dans les propriétés du "margin" toujours au même endroit.

Pour ce qui est de l'image de fond, il faut faire l'inverse du float :
float: left;

Pour faire des essais, là il me faut un lien d'image à placer à gauche.

[LADYQUEEN]

alors j'ai trouvée sur un forum comment faire via les template et le css et c'est bon tout est ni quel , le header a gauche et les catégorie a droite (:
merci pour ton aide final-blonde .

[kheino]

Je t'en prie.

Alaroxima volta.

[kheino]

Je t'en prie.

Alaroxima volta.