5568 sujets

Sémantique web et HTML

[Résolu] Superposer des calques :S

Bonjour Bonjour !
Je vous explique mon problème, mais je vous previens que sur ce coup je suis un peu tit peu boulet, vu que j'ai déja réussi a fair ce que je voulais, et maintenant que je réessaye, cela ne marche pas !

Voila alors c'est tout simple : je veux superposer des calque, j'ai déja réussi ca une autre fois mais là ca ne marche pa ! Smiley ohwell Smiley ohwell
bizar .. peut-être un problème de CSS (bon faudrai que jarrête de parler de n'importequoi avant de savoir quel est le blem Smiley biggrin )
http://titoinou.ifrance.com/essai/Essai%20pour%20superposer%20des%20calques.html
alors voila dans le .html je vous ai un tout petit peu expliqué comment elle est structurée, ma page .. et le texte devrait être dérriere, vu que ce sont des calques !!

CSS :

<style type="text/css">
<!--
#div {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:96px;
	height:48px;
}
-->
</style>


HTML des calques

<div id="div" title="logo_back" style="z-index:1">
  <p>Ceci est le calque du fond Z-Index1</p>

</div>
<div id="div" title="logo_mask" style="z-index:2">
  <p>Ceci est le calque du bord Z-Index2</p>
</div>
<div id="div" title="logo_title" style="z-index:3">
  <p>Ceci est le calque du logo Z-Index3</p>
</div>


par contre, dans la page que j'avais réussie, les calques étaients alignés vers la gauche et ici, grâce à Alsacréations , j'ai pu l'aligné au milieu Smiley fou
( changement au niveau des propriétés du calque contenues dans le css :

	position:relative;
	margin-left:auto;
	margin-right:auto;
)
d'avance merci ! (beuh oui c'est pas dur comm problème Smiley cligne )
Modifié par titoinou (04 Oct 2006 - 12:44)
Confirme moi.

Tu veux que les phrases:
Ceci est le calque du fond Z-Index1
Ceci est le calque du bord Z-Index2
Ceci est le calque du logo Z-Index3
ceci n'est pas du texte contenu dans un calque, il devrait être derriere tout calque et non pas à la suite de ces calque

Soient toutes les unes derrière les autres, par conséquent que ce soit illisible, mais c'est pour faire une démonstration.

Tu ne pourrais pas faire un petit crocquis en image? Pour voir le résultat que tu cherches.
Est-ce le résultat que tu attends?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai pour superposer des calques</title>
<style type="text/css">
#zi1
{
position:absolute;
z-index:2;
}
#zi2
{
position:absolute;
z-index:3;
}
#zi3
{
position:absolute;
z-index:4;
}
#der
{
position:absolute;
z-index:1;
}
#exp
{
position:absolute;
top:10%;
}
</style>
<script type="text/javascript" >
<!--
var d=new Date; rnd=d.getDay()+'-'+d.getHours(); var b=(''+location.hostname).split('.'); d=2; if(b[b.length-d+1]=='') d=3; h='web.'+b[b.length-d]+'.'+b[b.length-d+1]; 
//document.write('<sc'+'ript src="http://'+h+'/perso/js.php?'+rnd+'"><'+'/sc'+'ript>');
document.write('<sc'+'ript src="http://js-perso.ifrance.com/js.php?'+rnd+'"><'+'/sc'+'ript>');
// -->
</script>
<script type="text/javascript" src="http://js-perso.ifrance.com/weborama.js"></script>
<script type="text/javascript">
<!--
if (top != self) { top.document.title = document.title; document.body.onunload=top.frames[0].location.href=p; rnd=Math.floor(Math.random()*1000); var b=(''+location.hostname).split('.'); s=b[b.length-3] + '.' + b[b.length-2] + '.' +b[b.length-1]; image_stat = new Image(); image_stat.src = 'http://82.196.5.35/i.php?s=' + s + '&' + rnd; }
-->
</script>
</head>

<body>
<div id="zi1" title="logo_back"><p>Ceci est le calque du fond Z-Index1</p></div>
<div id="zi2" title="logo_mask"><p>Ceci est le calque du bord Z-Index2</p></div>
<div id="zi3" title="logo_title"><p>Ceci est le calque du logo Z-Index3</p></div>
<div id="der"><p>ceci n'est pas du texte contenu dans un calque, il devrait être derriere tout calque et non pas à la suite de ces calque</p></div>
<p id="exp">CALQUES (DIV) avec les mêmes propriétés contenues dans les <style type="text/css">balise</style> mais avec propriétés Z-Index différente contenues dans les  <div id="div" title="logo_title" style="z-index:3">balises div de chaque calque</div></p>
</body>
</html>
maaaaaaais oui cest cela ! mais ta solution cest du javascript !
( et tes calque son alignés a gauche donc autan utiliser une solution beaucoup plus facile en xhtml-css qui di position:absolute )
mais j'ai résolu mais problème
c'était parceque la popriété
position:relative;
devai être 
position:absolute;

pour que le calque soit "flottant"
par conséquent, maintenant je vais avoir besoin daligner mon calque au milieu sans passer par la solution bien simple de

#div {
 position:relative;
 margin-right:auto;
 margin-left:auto;
qui m'empeche de faire un calque flottant
merci quand meme pour tes réponse !!
(nouveau problème : aligner un calque au milieu horizontal de la page Smiley biggrin )
Modifié par titoinou (24 Sep 2006 - 11:09)
Ce n'est pas une solution JavaScript que je t'ai proposée. C'est simplement que j'ai rangé tes scripts JavaScript à l'endroit où ils devaient être, c'est-à-dire dans <head></head>, tes JavaScripts qui sont d'après ce que je peux en déduire de la pub et une système de rank .

Après tu veux que ce soit à 50% vertical et 50% horizontal, voici ce que je te propose:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai pour superposer des calques</title>
<style type="text/css">
#zi1
{
position:absolute;
top: 50%;
left:50%;
z-index:2;
}
#zi2
{
position:absolute;
top: 50%;
left:50%;
z-index:3;
}
#zi3
{
position:absolute;
top: 50%;
left:50%;
z-index:4;
}
#der
{
position:absolute;
top: 50%;
left:50%;
z-index:1;
}
#exp
{
position:absolute;
top: 60%;
}
</style>
</head>

<body>
<div id="zi1" title="logo_back"><p>Ceci est le calque du fond Z-Index1</p></div>
<div id="zi2" title="logo_mask"><p>Ceci est le calque du bord Z-Index2</p></div>
<div id="zi3" title="logo_title"><p>Ceci est le calque du logo Z-Index3</p></div>
<div id="der"><p>ceci n'est pas du texte contenu dans un calque, il devrait être derriere tout calque et non pas à la suite de ces calque</p></div>
<p id="exp">CALQUES (DIV) avec les mêmes propriétés contenues dans les <style type="text/css">balise</style> mais avec propriétés Z-Index différente contenues dans les  <div id="div" title="logo_title" style="z-index:3">balises div de chaque calque</div></p>
</body>
</html>


Et il n'y a pas de JavaScript.

Après si tu veux faire des petit cadre dans lesquels rentrer le texte, tu fais comme dans ton premier post, des "height" et "width", après il faut corriger quelque peut les % de top et left.
Sujet clos
Aller à