28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en place d'un bouton dans un design

Bonjour à vous !

J'ai créé un menu dont voici une partie : Extrait du menu

Ce menu est destiné à être ouvert ou fermé en cliquant à l'aide d'un bouton que l'on me demande de placer à droite du titre de la "boite".

Voici à quoi il devrait ressembler : upload/14342-menu.png

La petite image (non définitive) à superposer se trouve ici : Image

J'ai essayé un positionnement relatif de l'image, ça fonctionne quasiment bien mais le soucis c'est que le comportement de ce type de positionnement laisse un espace à l'endroit où l'image aurait dû être si elle n'avait pas positionnée...

Si quelqu'un a une idée, ça m'intéresse ! Merci d'avance Smiley cligne
Modifié par Alphonse (09 Apr 2009 - 11:08)
Bonjour,

Si tout le titre (texte + image) peut être cliquable comme tu l'as fait dans ton essai, alors pourquoi ne pas faire tout simplement :

.menuBox {
[...]
background:transparent url(images/plus.gif) no-repeat 95% center; }
Heu... ta solution est tellement simple que je ne sais pas te répondre pourquoi je n'ai pas fait comme ça...

J'ai juste modifié ton "transparent" par "#ffffff" sinon j'ai la bordure supérieur du cadre qui passe derrière le titre.

En fait, ta solution place l'image dans la classe CSS "menuBox" qui ne devrait contenir que le titre normalement. Tandis que moi j'essayais de placer l'image juste à droite du titre c'est-à-dire en dehors de la classe "menuBox" afin que l'image se place par-dessus une partie de la bordure supérieure du cadre.

Merci en tout cas. Je vais voir si je peux un tout petit peu optimisé tout ça.
Salut,

Autrement, pour revenir sur ton idée originale, c'est pas du positionnement relatif qu'il fallait mais de l'absolu. Là tu aurais eu l'effet attendu.
Alphonse a écrit :
Tandis que moi j'essayais de placer l'image juste à droite du titre c'est-à-dire en dehors de la classe "menuBox" afin que l'image se place par-dessus une partie de la bordure supérieure du cadre.

Dans ce cas, pourquoi ne pas ajouter une <div class="bouton"></div> dans #menu (au dessus de #titre par exemple), et :
div.bouton {
width:...px; /*largeur bouton*/
height:...px; /*hauteur bouton*/
position:absolute;
top:...px;
right:...px;
background:transparent url(images/plus.gif) no-repeat; }

Ou alors même principe, mais avec un <span> pour l'image dans .menuBox (+ positionnement absolu avec valeur négative).
Modifié par BeliG (09 Apr 2009 - 10:20)
Dans cet exemple, je n'ai mis qu'un seul cadre alors qu'en réalité j'en ai plusieurs les uns en dessous des autres. Du coup, l'idée du div au dessus de #titre (qui fonctionne très bien) ne peut pas être appliqué dans mon cas.

Je vais essayer le span en absolu avec des valeurs négatives et je vous tiens au courant ! Smiley smile

edit: corrections orthographiques
Modifié par Alphonse (09 Apr 2009 - 10:36)
Alphonse a écrit :
Dans cet exemple, je n'ai mis qu'un seul cadre alors qu'en réalité j'en ai plusieurs les uns en dessous des autres. Du coup, l'idée du div au dessus de #titre (qui fonctionne très bien) ne peut pas être appliqué dans mon cas.
Ok, alors tu peux mettre <div class="bouton"></div> dans .contentBoxOpen au lieu de #menu (+ positionnement absolu avec valeurs négatives).
[...]
<div class="contentBoxOpen">
     [b]<div class="bouton"></div>[/b]
     <div class="slideBox">
          [...]
     </div>
</div>
[...]

Alphonse a écrit :
Mmmh... je n'ai pas mis de valeurs négatives mais voilà ce que ça donne :
Non, pas comme ça. Là c'est normal que les images se superposent, puisque le conteneur référent est toujours #menu. Je pensais plutôt à :
<div class="menuBox">Titre 1<span class="bouton"></span></div>
Par contre il faudra virer le overflow:hidden sur "menuBox".
Modifié par BeliG (09 Apr 2009 - 10:45)
Je suis désolé, je ne comprends pas les valeurs négatives à mettre.

J'ai fait comme tu m'as dit, j'ai essayé d'adapter un peu mais rien n'y fait... Je pense que je vais revenir à ta toute première solution.

Voici quand même les dernières modifications : Exemple en ligne
Voici ce que tu dois ajouter / modifier pour que cela fonctionne :
.contentBoxClose, .contentBoxOpen {
[...]
position:relative; /*pour servir de référence au bouton positionné absolument*/
/*z-index:4; Mettre le z-index en commentaire, pour éviter que cette boite passe par dessus le titre*/ }

.contentBoxOpen div.bouton {
[...]
top:-4px;
right:3px; }
Et voici ce que ça donne avec le div.class dans le "contentBoxOpen" : Exmple final

Un très très grand merci à toi BeliG, tu m'as été d'une aide précieuse Smiley smile
Les bordures dans ".slideContentBox", mets-les plutôt dans ".contentBoxClose, .contentBoxOpen". Smiley cligne
Et voilà, j'ai appliqué un top à valeur négative dans la classe "slideContentBox", du coup j'ai augmenté mon padding-top. J'imagine que le top à valeur négative a été possible grâce au positionnement de la classe qui était en relatif.
En fait, comme j'ai plusieurs blocs, il y en aura qui seront ouverts et d'autres fermés.

Les blocs ouverts sont comme ceux que tu as vu dans mon exemple. Ceux qui seront fermés contiendront uniquement le titre ainsi que la bordure supérieure (que l'on apercevra à droite et à gauche du titre) avec l'image qui permettra d'ouvrir/fermer un bloc.

Tu vois ce que je veux dire ?
Ouep.

Apparemment le décalage sur IE est dû au line-height:2em sur ".slideBox div". C'est risqué toutes ses tailles fixées en em...

Pour les deux techniques (<span> et <div>), un overflow:hidden sur ".slideContentBox" corrige le problème.
Modifié par BeliG (09 Apr 2009 - 11:47)
Sujet clos
Aller à