[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Div et z-index > Lecture du sujet

Div et z-index

Vous devez être inscrit pour pouvoir poster des messages

Résolu Le problème de ce sujet a été résolu

Page : 1

Auteur

Message

1 visiteur sur ce sujet (1 anonyme)

Page : 1

Marus

# Posté le 14/05/2008 à 20:53:48

Groupe : Membres

Bonjour à tous, je suis en train de réaliser un merveilleux site

mais j'ai un petit souci, comment pourrait il en etre autrement :-°

?
J'ai un certain nombre de div imbriqués les uns dans les autres du genre :
Code : HTML

<div id="premier">
     <div id="second">
     </div>
</div>
<div id="troisieme">
</div>

Mon proleme vient du fait que le div second passe toujours sous le div troisieme malgré le changement de z-index dans le css.
Quelque'un pourrait il m'expliquer s'il vous plait ?

Merci d'avance

selen

# Posté le 14/05/2008 à 21:26:28

Groupe : Membres

décris-nous le résultat que tu voudrais obtenir et met le CSS, sans ça on ne peut pas dire grand chose

Marus

# Posté le 14/05/2008 à 21:50:43

Groupe : Membres

En gros ce que je souhaite faire, le troisieme div est un gros rectangle qui contient tout le site, le premier div est juste une bande au dessus du troisieme dans lequel je veux un rectangle qui devra passer sur le troisieme visuellemenet.

Code : CSS

#premier
{
	width:904px;
	height:20px;
	margin:auto;
	z-index:99;
}

#deuxieme
{
	width:300px;
	height:150px;
	z-index:99;
}

#troisieme
{
	margin:auto;
	width:900px;
	height:500px;
}

En gros le css donne ça.

Yano

# Posté le 14/05/2008 à 22:07:06

Groupe : Membres

Bonjour,

Le z-index est souvent inutile.
C'est la cas.

Habituellement, je conseille plutôt des couleurs d'arrière-plan différentes, mais dans ton cas, ajoute plutôt des border différentes à chaque bloc.
Il ne manque rien ?

Avant de vouloir faire ce que tu décris, relis-toi.
Bien.

Regarde

Code : HTML

1
2
3

<div id="premier">
<div id="second">
<div id="troisieme">

Code : CSS

1
2
3

#premier
#deuxieme
#troisieme

Et puis, tu places un bloc de height:150px; dans un autre de height:20px;
Quel doit être le résultat ?

Édité le 14/05/2008 à 22:08:04 par Yano

Marus

# Posté le 14/05/2008 à 22:19:49

Groupe : Membres

Excusez moi les petites fautes telles que la nomination des id, je n'ai pas copié collé mon code étant trop complexe dans sa globalité.
Dans le cas de ce que je souhaite faire le z-index était indispensable, il ne me manquait que la propriété

Code : CSS

1	position:absolute;

Pour ce qui est des deux blocs je sais absolument ce que je fais.
En tout cas merci quand même, même si ça ne m'a pas beaucoup aidé

Yano

# Posté le 14/05/2008 à 22:22:27

Groupe : Membres

Non, non.
Citation : Yano

Le z-index est souvent inutile.
C'est la cas.

Bis.

Cadeau (pas fini).
Code : HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #eee;
      color : #fff;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 900px;
      border : 1px solid #fff;
      background-color: #ffd;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }

#premier {
  width:900px;
  height:20px;
  margin:auto;
  background-color : #58813e;
  }
#deuxieme {
  position : absolute;
  top : 0;
  left : 0;
  width:300px;
  height:150px;
  background-color : #f5d361;
  }
#troisieme {
  width:900px;
  height:500px;
  background-color : #971910;
  }
    </style>
</head>
<body>
  <div id="conteneur">
    <div id="premier">premier</div>
    <div id="troisieme">troisieme</div>
    <div id="deuxieme">deuxieme</div>
  </div>
</body>
</html>

Et je doute que tu saches ce que tu fais (-;

Cependant, si le problème est résolu, indique-le.
Merci.

Édité le 15/05/2008 à 00:27:21 par Yano

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Div et z-index