28221 sujets

CSS et mise en forme, CSS3

Salut,

J'ai sur une page un div avec une image en bas à droite de ma page, et des articles que je voudrais mettre au centre, par dessus mon premier div.
Pour faire plus simple, deux ptits schémas :

J'ai :
http://sandwichpipo.free.fr/autres/alsacreations1.gif

Et je voudrais :
http://sandwichpipo.free.fr/autres/alsacreations2.gif

Voici mes codes :

CSS :

#page{
	margin:0;
	padding:0;
	float:left;
}
#image{
	background:url(mon_image) no-repeat;
	float:right;
	right:0;
	padding:0;
	position: absolute;
}


HTML :

<div id="page">

	<div id="articles">
               mon article
        </div>

        <div id="image">
        </div>

</div>

(je n'ai pas mis le code CSS de articles car c'est juste un conteneur et que ça ne fera rien avancer)

Donc voila, mon image se place en avant plan des articles, et ça change rien si je mets "<div id="image"></div>" avant "<div id="articles">mon article</div>" dans mon HTML.

Voila, merki, a+
Modifié le 05 Feb 2005 - 15:49
Nan je connaissais pas, merci beaucoup Smiley biggrin
Heu y a encore quelque chose que je comprends pas (désolé lol) : dans l'exemple de Yoyo Design, il met :
.pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }

Et pour définir le niveau d'empilement, il faut mettre dans le html
<div class="pile" style="z-index: 1">objet_a_mettre_au_niveau_1</div>

En utilisant cette méthode, mon article passe bien au premier plan, mais mon image n'est plus positionnée en bas à droite de ma page, je pense que c'est à cause des "2in" dans le css, je sais pas à quoi ils correspondent.

Does someone know ?
Tu peux mettre z-index dans ta class également.
Les in doivent être des inches je crois, tu devrais changer cette unité pour celle que tu utilisais.