CtrlAltSuppr.com / [xHTML/CSS] Les vilains z-index qui ne marchent pas...

rockboy214 · 03/11/06 19:14:11

Hi,

J'suis entrain de créer un p'tit truc sympa en php, pis comme j'ai l'intention de la balancer sur le web, j'suis entrain de refaire la couche qui concerne le design...

Mais le grand problème, c'est que j'aurais besoin de glisser la div "header" sous la div "sidebar" pour avoir un effet de supperposition...

J'ai essayé avec "z-index" mais ça ne change rien...

Une p'tite aide serait la bienvenue biggrin

Code xhtml:

Code:

<!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" xml:lang="fr" lang="fr">
<head>
    <title>Flux</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="./style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

    <div id="sidebar">
        <a href="./index.php" title="Accueil" id="home"><img src="img/txt_sidebar.gif" alt="Flux214" /></a>
    </div>
    <div id="header">
    </div>
</body>
</html>

Code CSS:

Code:

/*======Mise en forme GENERAL======*/
body{
    margin:0;
    padding:0;
    background:#FFF url("./img/bg.gif") center repeat-y;
}
#sidebar{
    display:block;
    width:100%;
    height:119px;
    background:url("./img/bg_sidebar.png") repeat-x 5px; !important
    background:#FFF url("./img/bg_sidebar.gif") repeat-x 5px;
    z-index:500;
}
#sidebar #home{
    margin:auto;
    display:block;
    width:170px;
    height:103px;
    background:url("./img/txt_sidebar.gif") no-repeat;
}
#header{
    margin:auto;
    margin-top:-10px;
    display:block;
    height:119px;
    width:566px;
    background:#FFF url("./img/bg_header.gif") no-repeat center;
    z-index:-2;
}
/*======GENERAL======*/
img{
    border:0;
}

Le résultat "en live"

Merci de votre aide wink

tatice · 03/11/06 19:32:52

Précise un position:absolute; à tes deux éléments pour voir.

rockboy214 · 03/11/06 20:04:44

tatice a écrit:
Précise un position:absolute; à tes deux éléments pour voir.

Héhé !

ça marche !!! biggrin

Merci tatice love

C'est donc pour ça que je n'arrivais jamais à appliquer ce fameu z-index.. il faut une position absolute! biggrin

tatice · 03/11/06 20:26:23

De rien et bonne chance pour le reste du projet. wink

Ju · 04/11/06 10:39:23

Au passage, définir des blocks en absolute munis de z-index, on appelle ça communément des calques.
Et les calques, très appréciés des WYSIWYG, ne représentent pas vraiment la meilleure façon de concevoir un site.

tatice · 04/11/06 12:36:42

Et c'est quoi le mieux alors ? eek

Malcolm · 04/11/06 13:28:46

Ju a écrit:
Au passage, définir des blocks en absolute munis de z-index, on appelle ça communément des calques.
Et les calques, très appréciés des WYSIWYG, ne représentent pas vraiment la meilleure façon de concevoir un site.

ça dépend si tu conçois le site textuellement ou purement graphiquement...

Mistic Warrior · 17/11/06 20:07:57

y'a moyen de développer un peu la notion ? ça m'intéresse pas mal... genre on peut faire avec des calques, y'a les tableaux aussi, et sinon ? Et c'est quoi les avantages/inconvénients de chacun ?

Ju · 17/11/06 20:48:21

Si on résume la chose en novembre 2006, les calques et les tableaux font partis du passé et bienvenue au CSS utilisé intelligemment. Soient des sites construit avec des éléments de type block (souvent <div>) et utilisés de manières sémantique (genre <ul> et pas autre chose si on veut lister qqch). Les calques proviennent surtout des WYSIWYG et sont représentatifs de sites construits uniquement pour le visuel, sans se soucier de l'apparence pour un robot ou un malvoyant. Et les tableaux quant à eux sont les grands conquérants du web avant la révolution XHTML qui tend à promouvoir au maximum la sémantique et le CSS (plus de tableaux imbriqués pour construire une page).

Quelques bons liens provenant tous d'un bon site :
* Quelle est la différence entre un DIV et un "calque"
* Tableaux ou Div, petite comparaison concrète
* Construire un site sans tableaux

Mistic Warrior · 17/11/06 20:51:55

merci bien pour ta réponse biggrin

Je vais aller voir tout ça

Mistic Warrior · 17/11/06 21:15:51

Alors je suis allé lire... il s'avère qu'en fait, j'utilise depuis bien longtemps ce que j'appelais des "pseudo-frames", qu'on m'a fait appeler des "calques" récemment d'ailleurs. Et je sais plus trop quoi penser biggrin

Genre sur le principe, j'ai une page d'accueil sur laquelle j'inclus tout. Donc j'inclus le haut de la page, une page de configuration qui contient les fonctions etc, le menu, et le bas de la page.

Dans le menu, ben ça inclus suivant l'adresse (http://site.ext/page.ext?page=variable) la page au milieu de tout ça... et y'a une feuille de style qui gère la mise en page.

Il m'est arrivé parfois que mes différents "blocs" se chevauchent... genre j'ai mon menu qui dépasse un peu sur le bloc principal etc...

Donc ma question : Ce que j'ai pour habitude de faire, c'est des calques ou c'est une mise en page avec des <div> mais pas des calques ? xD Car là ils définissent un calque par la création : WYSIWYG = calques ; Manuel = blocs.

Salutations

Ju · 17/11/06 21:59:07

Comment as-tu fait le rapprochement entre calques et pseudo-frames :s ? Ca n'a pas grand chose à voir ^^
Pour la différence entre un calque et un div, mon premier lien y répond parfaitement (ça tient surtout dans le z-index).

Mistic Warrior · 17/11/06 22:16:03

Ju a écrit:
Comment as-tu fait le rapprochement entre calques et pseudo-frames :s ? Ca n'a pas grand chose à voir ^^

Ben c'est peut-être simplement le fait qu'à la base on m'a donné les noms faux ^^ du coup je suis un peu perdu au niveau des noms, mais je me rend compte que mes codes ressemblent pas mal à ce que je peux trouver sur les liens... mais bon ils sont moins bons mes codes, bien sûr smile .

Donc maintenant j'essaie de savoir à quoi correspond ce que je fais... c'est toujours bien d'avoir un peu de vocabulaire tongue

Ju a écrit:
Pour la différence entre un calque et un div, mon premier lien y répond parfaitement (ça tient surtout dans le z-index).

Ouais donc c'est assez subtil comme différence... on peut comprendre que les gens confondent cool

EDIT: excuse moi des questions un peu stupides mais c'est vrai que j'avais jamais vraiment fait attention au nom de ce que je faisais... en plus ces temps je me remets au webmastering après un bon moment où j'avais lâché entre autre pour les études, alors je me remet dans le bain ^^

Annonces

#1 03/11/06 19:14:11

[xHTML/CSS] Les vilains z-index qui ne marchent pas...

Code:

Code:

#2 03/11/06 19:32:52

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#3 03/11/06 20:04:44

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

tatice a écrit:

#4 03/11/06 20:26:23

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#5 04/11/06 10:39:23

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#6 04/11/06 12:36:42

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#7 04/11/06 13:28:46

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

Ju a écrit:

#8 17/11/06 20:07:57

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#9 17/11/06 20:48:21

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#10 17/11/06 20:51:55

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#11 17/11/06 21:15:51

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#12 17/11/06 21:59:07

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

#13 17/11/06 22:16:03

Re: [xHTML/CSS] Les vilains z-index qui ne marchent pas...

Ju a écrit:

Ju a écrit:

Pied de page du Forum