28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai fais des recherches, mais n'ayant pas trouvé vraiment ce que je voulais, je vous expose mon problème. En effet, j'aimerai bien superposer deux images pour rendre le tout un peu plus "stylé".

Le squelette se présente sous la forme de cinq div (header,footer,body,menu gauche et menu droite). Ce problème se situe pour certaines div, mais reste le même.

Prenons donc un exemple:
J'ai une image qui sert de fond à la div header(image placée dans l'HTML) et je veux superposer une deuxième image(qui sert un peu de "logo") dessus, mais un peu décalé sur la gauche("effet stylé"). J'ai donc la div de l'header en position relative et mes deux images en position absolute (avec le z-index toussa). Sur ma résolution(1920x1080), mon souhait fonctionne parfaitement.
Bien sûr, avec les autres résolutions, la deuxième image(le "logo") ne reste pas en place.
J'ai essayé avec des pourcentages, mais cela ne m'aide pas plus.

D'où ma question, comment adapter ceci pour toute les résolutions ?

J'ai aussi lu que les positionnement relatif et absolu étaient mauvais et qu'il fallait les évités.
Dans ce cas, comment faire ? Avec des margin ?

Merci d'avance,

Alasthyr
Oui, avec les margin et padding. Et comme il ne s'agit pas d'images de contenu (sauf le logo éventuellement) vous pouvez les appeler via le CSS.
Modifié par Olivier C (10 Jul 2013 - 15:01)
Merci de la réponse.

J'ai mis les images de fond via le CSS et les images a superposer dans les div respectives, seulement, pour les positionnements avec les margin et padding, rien ne ne déplace...

Je pense que c'est normal, vu que le contenu de la div ne peut sortir.

Mais si je sort l'image de la div, elle se positionne au dessus de celle-ci et n'est donc plus superposée.


Merci,

Alasthyr
Modifié par Alasthyr (10 Jul 2013 - 16:06)
Mouais... Désormais je code tout en full css, mais je vais vous donner un exemple de site issu de mon thème avec des images : Saint Jean des Quatre Couronnés.

Vous n'aurez plus qu'à fouiller dans le code source pour savoir comment vous y prendre, si cela vous intéresse.