Superposition images/texte sans créer d'espaces non désirés

Bonjour à tous.
Voilà un bon moment que je cherche une solution à mon problème. J'ai lu de nombreux tutos, cours...mais là je bloque, j'ai besoin de votre aide.

Voilà la structure voulue:
- un fond avec une image répétée (en rouge)
- 3 images qui forment la structure: bandeau, menu, corps (en gris)
- 5 zones de textes pour le menu (qui doivent être fixent en fonction du menu)
- 1 image sur le corps (bleu) (qui doit être fixe en fonction du corps)
- 1 zone de texte sur le corps (qui doit être fixe en fonction du corps)



Mon problème est que lorsque j'utilise un positionnement relatif, des écarts entre chacune de mes images ou zones de texte apparaissent.

En fait, j'aimerai savoir quelle est la méthode à utiliser pour superposer image, texte en spécifiant une position précise sans que ça décale tout?

Merci par avance.

A priori, une CSS devrait faire l'affaire... Mais bon, les parties textes seront gérées différemment selon les butineurs utilisés... Il va falloir faire preuve de souplesse, malgré tout.

Oui c'est ce qui me semblait. Mais lesquelles?
Sinon je pensais tout faire en absolut mais là niveau souplesse selon utilisateurs ça me parait limité, non?

Bonsoir,

almux a écrit :
A priori, une CSS devrait faire l'affaire...

Hmm... c'est un peu de l'enfonçage de porte ouverte ça, non? Je veux dire, sur un forum intitulé «CSS et Standards Web»...

almux a écrit :
les parties textes seront gérées différemment selon les butineurs utilisés...

Heu... non, pas forcément (et à priori plutôt non, pas du tout). Je vois pas trop ce qui permet de l'affirmer à l'avance.

shyshy a écrit :
lorsque j'utilise un positionnement relatif

Perdu. Essaie encore.

shyshy a écrit :
Sinon je pensais tout faire en absolut

Re-perdu. Tu n'as vraiment pas de chance.

Bon, et si on apprenait à se servir du positionnement CSS, avant de partir d'emblée dans de mauvaises directions?

Hop, ça se passe par là: Comment positionner les éléments en CSS ?

Et sur Openweb:
1. flux et position relative
2. position float
3. position absolue et fixe

Et voilà. Une fois ces lectures faites (ça fait jamais de mal), on pourra passer à l'intégration du design réalisé. En gros, niveau positionnement, on va avoir besoin:
- d'utiliser le centrage horizontal via la technique des marges automatiques;
- de rester en position: static (valeur par défaut, pas besoin de la déclarer) pour la quasi-totalité des éléments de la page);
- d'utiliser un peu les marges (propriété margin) à l'occasion;
- d'utiliser, pour le menu, un peu de display: inline ou de float: left (ça reste à préciser selon le rendu exact à obtenir).
Modifié par Florent V. (06 Feb 2008 - 21:25)

Ok, je fais tout ça et si je suis perdue je cris à l'aide.
Merci

bon alors j'ai lu tout ça et j'avoue que je sais pas par où commencer....
Pouvez vous me dire par quoi je débute? En plus il y a énormément de possibilités différentes....Alors comment commencer sans se perdre?

Hé bien tu peux commencer par lire Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?, mais c'est sans garantie. Chaque cas est particulier, et cet article ne donne donc pas de méthode miracle mais juste des indications générales.

Vu la maquette que tu présentes, il me semble que tu n'as pas besoin du positionnement absolu ou relatif, et à priori pas besoin de la propriété float non plus. Il te suffit d'avoir tes contenus, avec parfois des éléments div pour les grandes zones, et d'utiliser les couleurs et images de fond, bordures, marges, padding, et à la rigueur du centrage horizontal avec une margeur fixe et des marges latérales ayant la valeur "auto".

shyshy a écrit :
Alors comment commencer sans se perdre?

En général, on commence par construire une page avec des éléments simples comme des titres, des paragraphes, des listes, des div peut-être. Et on teste les propriétés CSS sur ces éléments. Au final on n'arrive pas à grand chose d'exploitable, mais ça s'appelle l'apprentissage. On ne peut pas passer directement à l'intégration d'une maquette graphique complète, ou bien on risque fort de s'y casser les dents.

Merci beaucoup, j'ai presque finis!!!

Il me reste un problème: je n'arrive pas à positionner ma dernière image (en bleu sur mon shéma du début), sachant que la zone grise du corps est une image aussi.C'est donc une superposition d'image.

En fait, quand je mets une nouvelle div pour placer cette photo, ça décalle tout...

Merci encore

shyshy a écrit :
C'est donc une superposition d'image.

Le genre de superposition qu'on aurait avec une image de contenu (élément HTML img) dessus et une image de fond (propriété CSS background) dessous?

Je n'en dis pas plus, là c'est le b.a.-ba d'HTML et CSS.

Oui c'est bon...en effet...

Merci de ton aide en tout cas et pour l'article j'ai pu enfin finir!