Soucis Z-index et image en premier plan

Bonjour,

Je me permets de créer un sujet car vraiment là je bloque
J'ai beau chercher un peu partout sur le net, je ne trouve pas de solution...

Je vais essayer d'être le plus précis possible histoire de bien me faire comprendre.

Alors voilà, avant tout je tiens à préciser que je débute, et que j'apprends tout seul depuis un petit moment.
Bref, je suis entrain de faire un site, tout mon contenu se trouve dans une div de 1024px de large.
Derrière tout ça j'ai un Background de 2000px (mon contenu est au centre).

Entre mon fond de 2000px et mon contenu de 1024px, il y a 488px de chaque cotés. (car 2000-1024= 976 divisé en 2 parties de chaque cotés, donc 488)

Dans mon background j'ai mis une image en .png totalement vide avec juste une photo sur la gauche, visible grace au 488px affichés, mais j'aimerai qu'elle déborde sur mon contenu et que tout se qui si trouve passe en dessous, le problème c'est que je n'y arrive paaaas

Voilà, J'espère avoir été clair et que la réponse n'était pas facile à trouver sur le forum car j'ai cherché partout sans résultats

Merci d'avance pour votre aide.

Bonjour,

Si c'est une image de fond. Impossible de la mettre à l'avant plan.

Pour que l'image passe par dessus le contenu (pas forcément d'idée du siècle en terme d'ergonomie) il faut qu'elle soit placée par dessus (assez logique en soit). Donc positionnée par rapport au contenu et "sur-élevée" grace au z-index.

Laurie-Anne a écrit :
Bonjour,

Si c'est une image de fond. Impossible de la mettre à l'avant plan.

Pour que l'image passe par dessus le contenu (pas forcément l'idée du siècle en terme d'ergonomie) il faut qu'elle soit placée par dessus (assez logique en soit). Donc positionnée par rapport au contenu et "sur-élevée" grace au z-index.

Oui oui ça je l'ai bien compris.
Le truc c'est que je ne veux pas qu'elle recouvre mon contenu mais juste une petite partie.
Donc je cherche un moyen pour que mon image soit en dehors de ma div de contenu, et que visuellement cela donne l'impression d'une photo par dessus le background & le contenu...

Edit : je viens de faire un petit montage pour vous montrer



Donc la partie blanche avec le texte est ma div de contenu de largeur 1024px, la partie noire est mon background de 2000px, et j'aimerai y rajouter une image fixe comme la ptite grenouille afin que mon texte défile sous ses ptites pattes
Modifié par Baxter (11 Jul 2011 - 11:38)

personne ne sait ?

salut,

par ex.

#texte {
position: relative;
... / ...
}

#grenouille {
position: absolute;
left: -Xpx;
top: Ypx;
}

en partant du principe que #texte soit un div ou un paragraphe et #grenouille soit "contenu" dedans.

A+

Ton contenu est tellement pourri que tu veux pas qu'on puisse le lire ?

Bonjour à toutes et à tous,

pour répondre à ta demande, il aurait fallu nous donner, la grenouille, en image séparée.

Et en conséquence de quoi, tu aurais eu un bout de code répondant à ta demande !

@+
Modifié par Artemus24 (11 Jul 2011 - 16:21)

Ah mais en fait je vais pas du tout faire un site avec une grenouille

C'etait juste en guise d'exemple, pour bien montrer ce que je n'arrive pas à faire...

D'ailleurs je n'y arrive toujours pas

o06 a écrit :
salut,

par ex.

#texte {
position: relative;
... / ...
}

#grenouille {
position: absolute;
left: -Xpx;
top: Ypx;
}

en partant du principe que #texte soit un div ou un paragraphe et #grenouille soit "contenu" dedans.

A+

Ouch! J'comprend rien du tout...

Salutation @tous

Rien de mieux qu'un : tutoriel ~ non ?

La partie 2 est importante puisque ce tuto nous amène aussi vers openweb. Je te suggère fortement d'étudier et exercer tout ce que tu trouveras à partir de ce lien.

Seul le positionnement en CSS nous permettra un chevauchement des DIV's, ou si tu préfère, le chevauchement d'objets visuels (*.png). Faits tous les exercices jusqu'à une profonde compréhension des flux. Tu n'en sera que satisfait.

Oubli le z-index car ce sont les flux qui comptent. Si tu ne sort pas du flux normal (voir les suggestions de o06 avec absolute, relative ou les float), le z-index est d'aucune utilité.

N'as-tu pas dit » Ouch ! j'comprend rien du tout. Alors và, et suis le lien ci-haut mentionné. C'est le temps des études et des exercices.

Définir la réponse ici est trop simpliste : mais ce n'est pas la solution, pas dans ton cas.

Bonne chance

..
Modifié par zardoz (12 Jul 2011 - 00:28)