Superposer deux div ou deux images en css/html ?!

Bonjour , je suis enfin alsanaute , mais cela fait quand même un petit bout de temps que je vous lit et que j'apprend grace à vous

J'ai donc franchis le cap car j'ai un petit probleme

Aujourd'hui je me lance dans la création du site a mon pére , je vous laisse admirer et critiquer mon travail , j'aimerais déjà savoir ce que vous en pensez :http://img832.imageshack.us/img832/8288/webdesin.jpg

J'aimerez donc créer ceci :
http://img291.imageshack.us/img291/4620/sanstitre5copie.jpg

Pour cela je comptait créer un bloc de la taille de la photo en arriere plan et y insérer la photo en question , car je compte changer assez souvent de photo ; pour cela pas vraiment de probleme je suis arrivé a ceci donc :
http://img412.imageshack.us/img412/4488/promotiony.jpg

Maintenant je voudrais pouvoir écrire sur la photo du texte j'ai donc créer un rectangle noir pour pouvoir lire le texte sans trop de probleme , et je comptais le superposer à la photo , mais la big probleme je ne sais plus comment faire , le rectangle noir serais le background d'une div pour que je puisse écrire dessus , je cherche donc la solution , voici le rectangle :
http://img710.imageshack.us/img710/7795/calquenoir.png

Et voici le résultat que j'aimerais obtenir :
http://img291.imageshack.us/img291/4620/sanstitre5copie.jpg

Désolé si j'ai du mal à me faire comprendre je débute

voici une partie de mon code css :

#Promotion  {
	width:701px;
	height:239px;
	background-color:#ffffff;
	background-position:top;
	background-repeat:no-repeat;
	}
	
#CalqueNoir  {
	width:375px;
	height: 94px;
	background-image: url("Theme/CalqueNoir.png");
	background-position: absolute; 
	z-index:1;
	margin-top:-70px;
	}

#Promotion correspond au bloc dans lequel j'ai ajouté la photo

#CalqueNoir correspond aux rectangle noir que je veux placer

le site esst actuellement ici si vous voulez voir : http://psg62.free.fr/siteweb/2/

Voila donc si vous avez une autre méthode , pour que cela marche sur IE comme sur les autres , je vous serais reconnaissant ...
Modifié par remif (28 Jul 2010 - 15:11)

Hello,

Si tu veux positionner un élément en absolu au sein d'un autre, il faut que ce dernier soit lui-même positionné.

Je te suggère la piste suivante :
- #Promotion en position relative
- #CalqueNoir en position absolute avec un left : 0 et bottom : 0 (surtout pas de marges négatives comme dans ton code).

Bonne chance

EDIT : inutile d'indiquer "[PROBLEME]" dans le titre de ton sujet, tu te doutes que 90% des sujets ici parlent de problèmes
Modifié par Raphael (28 Jul 2010 - 09:45)

Raphael a écrit :
Hello,

Si tu veux positionner un élément en absolu au sein d'un autre, il faut que ce dernier soit lui-même positionné.

Je te suggère la piste suivante :
- #Promotion en position relative
- #CalqueNoir en position absolute avec un left : 0 et bottom : 0 (surtout pas de marges négatives comme dans ton code).

Bonne chance

EDIT : inutile d'indiquer "[PROBLEME]" dans le titre de ton sujet, tu te doutes que 90% des sujets ici parlent de problèmes

Merci , je vais tester , pour le titre , peux tu me dire comment le modifier ?

remif a écrit :

Merci , je vais tester , pour le titre , peux tu me dire comment le modifier ?

En passant par le bouton "éditer"

Merci c'était bien ça , je donne mon code css pour ceux qui ont ou auront un probleme équivalent :

#Promotion  {
	position:relative;
	width:701px;
	height:239px;
	background-color:#ffffff;
	background-position:top;
	background-repeat:no-repeat;
	}
	
#CalqueNoir  {
	position:absolute;
	left:6px;
	bottom:10px;
	width:375px;
	height: 94px;
	background-image: url("Theme/CalqueNoir.png");
	background-position: absolute; 
	z-index:1;
	margin-top:-70px;
	}

Encore un petit truc , a quoi sert :

z-index:1;

??

Et aussi , pour éviter certains probleme avec IE j'ai voulu créer un Reset.css mais comment mettre 2 stylesheet ? pour le moment j'ai mis ça :

<link rel="stylesheet" media="screen" type="text/css" title="style" href="CSS/reset.css" /> 
 
  
  <link rel="stylesheet" media="screen" type="text/css" title="style" href="CSS/style.css" /> 

Modifié par remif (28 Jul 2010 - 10:26)

remif a écrit :

Encore un petit truc , a quoi sert :

z-index:1;

??

Dans ton cas : à rien

Sinon, c'est pour gérer les niveaux de profondeur des éléments positionnés (un peu comme des calques).

Merci mais j'ai (encore) une autre question :

Et aussi , pour éviter certains probleme avec IE j'ai voulu créer un Reset.css mais comment mettre 2 stylesheet ? pour le moment j'ai mis ça :

<link rel="stylesheet" media="screen" type="text/css" title="style" href="CSS/reset.css" />  
  
   
  <link rel="stylesheet" media="screen" type="text/css" title="style" href="CSS/style.css" /> 

remif a écrit :
pour le moment j'ai mis ça :

Euh... OK

c'est bon c'est ça ?

remif a écrit :
c'est bon c'est ça ?

En fait tu disais avoir une question... mais il n'y a pas de question dans ton dernier message.
Si c'est pour savoir si c'est bon : oui, on peut très bien faire comme tu as fait.

Merci mais j'ai encore un probleme du meme style :

Je voudrais faire ceci :
http://img243.imageshack.us/img243/8746/sanstitre10e.jpg

C'est mon footer , je voudrais que ceci soit centré par rapport a mon contenu (partie blanche) et que les extrémités ce répètent , voici le code que j'ai mis au point

#Footer  {
	position:relative;
	height:300px;
	background-image:url("Theme/Footer.jpg");
	background-repeat:repeat-x;
	margin:auto;
	}
	
#Fin {
	
	position:absolute;
	top:0px;

	height:300px;
	width:1024px;
	background-image:url("Theme/Fin.jpg");
	margin:auto;
	
	}

Footer étant une image d'1px de l'extrimité , pour que l'image soit rallongée en fonction de la résolution du visiteur ...

Fin étant l'image du dessus

J'ai donc mis la div #Fin dans la div #Footer avec la méthode que vous m'avez conseillé tout a l'heure , cependant je ne sais pas comment centrer (la div #Fin) automatiquement...

Pouvez vous m'aider ?
Modifié par remif (28 Jul 2010 - 15:11)

Personne ?

Raphael a écrit :
Hello,

Si tu veux positionner un élément en absolu au sein d'un autre, il faut que ce dernier soit lui-même positionné.

Je te suggère la piste suivante :
- #Promotion en position relative
- #CalqueNoir en position absolute avec un left : 0 et bottom : 0 (surtout pas de marges négatives comme dans ton code).

Bonne chance

EDIT : inutile d'indiquer "[PROBLEME]" dans le titre de ton sujet, tu te doutes que 90% des sujets ici parlent de problèmes

Pourquoi, surtout pas de marge négative ?