28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je souhaite créer un menu vertical avec une puce graphique un peu complexe.
Je vais donc la mettre en background pour la positionner à ma guise

Le problème, c'est qu'elle est plus grosse que son conteneur. Est-il possible alors de la faire dépasser du conteneur ?

Merci si vous avez la solution, sinon je crois que je vais m'orienter vers un menu avec des images.


Bye Smiley smile upload/12167-menu.jpg
Merci, mais je ne voudrais pas m'écarter de la boîte d'à côté. Si je mets du padding, je m'écarte automatiquement.

En fait, il faudrait que mon background (puce) déborde par-dessus la boîte d'à côté, mais je ne sais pas si c'est possible...
Salut,

pour faire passer un contenu on ne peut pas utiliser z-index? z-index necessitant une position absolute,fixed ou relative ou flottante si j'ai bien compris.

Mais n'y a-t-il pas d'autre solutions bcp plus simple?
Ce que tu nous montres a l'écran a l'air d'etre facilement reduisible par la droite non? là où c'est juste un fond vert.

et le fait de passer par des images va-t-il vraiment te faire gagner de la place?

enfin, tu nous dis que tu ne veux pas t'écarter de la boite d' a coté. la boite, au singulier donc et de l'autre coté? car un padding peut s'appliquer que d'un seul coté.

Voila fini avec toutes mes questions Smiley confused désolé je suis un programmeur et je me represente tjs difficilement c histoire de design.

pascal.
Salut,

Qu'est ce que tu appelles la boite d'à coté ?

et quest ce que tu appelles débordement ? Sur l'image je n'en vois pas de débordement...

Au fait un peu de code ce serait pas mal.

Et un exemple en ligne encore mieux Smiley cligne
Voilà, c'est un site Joomla! en cours d'intégration

http://tiket.free.fr/

Quand je dis débordement, c'est que la boîte du menu et la boîte du contenu principal (background blanc + bord en dégradé vert) se chevauchent...

Merci pour vos réponses les codeurs couche-tard ! Smiley cligne
Bon je viens de jeter un oeil, t'aimes bien les <table> toi Smiley lol

Ce qui t'a déjà été indiqué semble pertinent en fait. Pour dégager l'espace nécessaire à la puce graphique tu donne un padding-left aux éléments contenant les liens du menu. Et pour avoir la superposition tu déplaces l'ensemble du conteneur qui se trouve à droite vers la gauche avec la même valeur que le padding, mais dans l'autre sens, donc par :

#conteneur_droite {
position:relative;
left:-35px;
}


Tu auras sans doute besoin de faire aussi quelques adaptations pour les éléments de conteneur_droite autres que ceux concernés par les puces.
Non j'aime pas trop les <table>, mais c'était livré avec le template duquel je suis parti. Tu penses que je ferai mieux de les virer ? Ça sert à quoi au juste ?

Le designer a dit ceci : "Also a table has been introduced in the main content area that better constricts layout causing less problems with 'problematic' components. "

Merci, je vais appliquer un padding et un positionnement négatif ! Là où ça se complique, c'est que le bord inférieur mon titre de menu est un trait de 2px qui vient en prolongement de la puce (car les filet horizontaux ne sont pas tous de la même largeur comme tu as pu le voir). Le text-decoration underline est trop fin lui.

Merci pour les conseils ! Je vous tiens au courant
Merci, grâce à vous je m'en suis sorti.
Il me reste à faire le sommaire du dessous qui est dans un module spécifique.
Vive les CMS ! Pas toujours évident de personnaliser le design comme on le souhaite...

Personnellement lequel préférez-vous : Plûme ? Joomla! ? WordPress ?