28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

Voici ma petite question du jour:

Comment puis je faire pour que le dessin de mon petit bonhomme soit à cheval sur mes trois divisions? C'est à dire la tête au niveau de cours d'anglais et les pieds au niveau du menu...

Actuellement il est dans ma div "header" mais ce n'est pas ce que je veux! Merci de votre aide!

En fait, je voudrais faire exactement la meme chose que pour le petit oiseaux "twitter" en bas de base du site de Alsacreation!

ps: mon site est presque fini mais j'aimerai pouvoir faire cela pour que ca soit plus sympa!
upload/19154-exemple.jpg Smiley lol Smiley lol Smiley lol
Salut,

Tu peux mettre ce petit mec dans une div que tu positionnes en absolute, puis après c'est juste du positionnement en px Smiley cligne .
Bonjour,
Le background de ton header pourrait inclure ta barre de menu (une image de 1px de largeur en repeat-x, et la hauteur de ton dégradé plus les 2 barres horizontales de ton menu).
Ensuite, tu mets ton bonhomme en background (positionné par exemble en bottom right) d'un container enfant ... il devrait se voir au dessus du background de son papa.

Ou sinon, un peu plus lourd au niveau de l'image à charger : une seule image pour tout ton header en background ... comme ici: http://www.ilovecolors.com.ar/ moi j'aime bien.
Modifié par loicbcn (26 Jul 2009 - 23:14)
Salut,

la solution de N-J devrait fonctionner en rajoutant un z-index... le seul petit "problème" est qu'il s'agit juste de présentation et que cela devrait donc se trouver dans le CSS.

Sinon il suffit simplement de couper ton bonhomme en trois et de positionner (background-position) le haut de la tête sur ton premier élément ("Cours d'anglais") et de rajouter les pieds sur l'image en background de ton menu ou comme le suggère loicbn de n'avoir qu'une image pour le tout...
Modifié par Heyoan (27 Jul 2009 - 00:16)
Bonsoir rclkop,

Personnellement, je conseillerais d'appliquer la méthode de loicbcn, certes ce sera sans doute plus long et plus long à charger pour les internautes, mais au moins pas besoin de chercher à positionner correctement ton bonhomme.
jQz a écrit :
certes ce sera sans doute plus long et plus long à charger pour les internautes,
Pourquoi cela ?

jQz a écrit :
mais au moins pas besoin de chercher à positionner correctement ton bonhomme.
Bof... ce n'est pas bien compliqué (surtout qu'à priori la largeur semble fixe). Smiley cligne
Modifié par Heyoan (27 Jul 2009 - 07:23)