CSS : Problème de chevauchement...

faire passer un texte sur une image...

Sujet résolu

23 décembre 2005 à 16:45:24

Bonjour à tous, je commence un nouveau site. Le design est assez basique et j'ai problème avec le texte qui passe en dessous d'une image...

Voici mon code CSS :

#menu1
{
position:absolute;
right:20px;
top:40px;
}
#menu2
{
position:absolute;
left:15px;
top:50px;
}
#menu3
{
position:absolute;
left:10px;
bottom:20px;
}
#menu4
{
position:absolute;
right:25px;
bottom:35px;
}
#menu5
{
position:absolute;
left:0px;
top:170px;
}
#menu6
{
position:absolute;
right:0px;
top:140px;
}
img
{
border:none;
}
#corps
{
width:450px;
height:800px;
position:absolute;
left:175px;
background-image:url('../images/fond.jpg');
background-repeat:repeat-y;
padding:10px;
padding-top:30px;
padding-bottom:30px;
}
.fond
{
position:absolute;
top:104px;
left:95px;
}

Voici l'adresse d'une page d'essai (ne faites pas attention aux erreurs php, c'est ma base de données qui n'est pas encore créée !) :
cliquez ici
Pouvez-vous m'aider ? merci d'avance

yöm

23 décembre 2005 à 17:00:58

Pourquoi autant de positionnement en absolute ?

Ton problème viens de là ... place ton image avant le texte dans le code.

saxocoltrane

23 décembre 2005 à 17:06:11

Je crois ne pas avoir compris ta réponse...
J'ai mis le texte après l'image mais cela ne change rien...
Merci quand même...

Quant aux absolute, ils sont là pour placer les menus des deux cotés du texte (tu comprendras mieux en allant sur la page indiquée...)

:euh:

yöm

23 décembre 2005 à 17:32:08

Oui mais pourquoi le corps est-il lui aussi en position absolue ?

Je ne comprends pas bien ce que tu comptes faire de l'image ... tu veux quelle soit placée de cette façon, encerclée par le texte ?

Raccourci CSS :

#menu1,
#menu2,
#menu3,
#menu4,
#menu5,
#menu6,
{
position:absolute;
}

saxocoltrane

23 décembre 2005 à 17:40:30

J'aimerais que le texte soit au dessus du citron bleu (le logo)

, qu'il 'repasse par dessus'...

Exca

23 décembre 2005 à 17:43:15

Peut-être en mettant l'image en background non... ?

saxocoltrane

24 décembre 2005 à 12:00:34

Non, j'ai essayé hier mais ça n'a pas fonctionné... :lol:

Merci quand même.

jp949

24 décembre 2005 à 12:10:49

mets #corps {
padding-top:110px;}

Julien78480

24 décembre 2005 à 12:47:32

Ca sert a quoi d'écrire par dessu ton logo?!!!
Et ensuite quand on met une image en background je suis désolé mais le texte s'écris par dessus! tu as du te tromper quelque part!

Yok38

24 décembre 2005 à 14:59:08

Je pense que le code suivant devrait marcher :

img
{
z-index : -1;
}

Bonne continuation,
Bon noël et Ciao.
Yok38

saxocoltrane

24 décembre 2005 à 15:27:02

Merci à tous, j'essayerais cette semaine !

Joyeux Noël à tous

saxocoltrane

25 décembre 2005 à 20:48:24

Le z-index ne marche pas, il me met mon image derrière le corps et je ne la vois pas du tout...

saxocoltrane

26 décembre 2005 à 21:43:23

Personne ne peut plus m'aider ?

Yok38

2 janvier 2006 à 10:20:57

Euh... Essaie ça :

#menu1
{
position:absolute;
right:20px;
top:40px;
}
#menu2
{
position:absolute;
left:15px;
top:50px;
}
#menu3
{
position:absolute;
left:10px;
bottom:20px;
}
#menu4
{
position:absolute;
right:25px;
bottom:35px;
}
#menu5
{
position:absolute;
left:0px;
top:170px;
}
#menu6
{
position:absolute;
right:0px;
top:140px;
}
img
{
border:none;
z-index : -5;
}
#corps
{
width:450px;
height:800px;
position:absolute;
left:175px;
background-image:url('../images/fond.jpg');
background-repeat:repeat-y;
padding:10px;
padding-top:30px;
padding-bottom:30px;
z-index : -10;
}
.fond
{
position:absolute;
top:104px;
left:95px;
}

Bonne chance et bone année,
Yok38

TimeSplitters

2 janvier 2006 à 13:17:28

Il est où ton logo citron? :euh:

saxocoltrane

7 janvier 2006 à 22:19:54

Eh bien je n'arrive plus à l'avoir...
Je ferais autrement pour ce logo, merci à tous pour votre aide...

saxocoltrane

10 janvier 2006 à 19:16:57

Voilà, abandon de ce problème et je vais faire ca d'une autre façon...

Voilà, à ++