28111 sujets

CSS et mise en forme, CSS3

[Résolu] Pb de DIV/ID/class

Bonjour,
Je débute dans l'utilisation des DIV en HTML et, après avoir testé le CSS, je rencontre un souci qui doit être assez primaire mais je tourne en rond...
J'ai une page divisée en 3 div (entête, menu, contenu) et je souhaite activer une quatrième div (aperçu) en fonction du clic de l'utilisateur depuis le menu ou d'un contenu.
Pour afficher le contenu souhaité depuis le menu, pas de pb...
Pour ouvrir l'aperçu dans la div souhaitée, ça marche...
Par contre : quand j'ouvre l'aperçu, mon contenu s'efface Smiley decu et si je change de contenu depuis le menu, l'aperçu se ferme Smiley eek
J'ai eu beau séparer le code, changer les id, les class, les attributs des balises... rien n'y fait Smiley sweatdrop !

Le code CSS :
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  <style type="text/css">

  body {
	background-color: #EFEFEF;
	font-family: Roboto Medium;
	font-size: 12px;
}

        		  	.entete {
        		  		background-image: none;
        		  		height: 120px;
        		  		width: 1145px;
        		  		position: absolute;
        		  		left: 100px; 
        		  		top: 10px;
        		  		font-family: Arial Black;
        		  		color: Yellow;
        		  		text-align: left;
        		  		padding-left: 10px;
        		  		background-repeat: no-repeat;
        		  		background-color: Blue;
        		  	}


div.menu {
	background-color: White;
	border-color: Aqua;
	border-width: thin;
box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19);
width: 160px;
height:600px;
position: absolute;
top: 130px;
left: 5px;
}
.menu {
  //font-family: 'Roboto', sans-serif;
	margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
} 

div.contenu {
	background-color: White;
	border-color: Aqua;
	border-width: thin;
	height: 600px;
	width: 835px;
	box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19);
	position:absolute;
	top:130px;
	left:200px;
  margin: 10px;
 }
.contenu {
  //font-family: 'Roboto', sans-serif;
	margin: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
}            
div.contenuA {
	background-color: White;
	border-color: Aqua;
	border-width: thin;
	height: 445px;
	width: 775px;
	position:relative;
  margin: 20px;
  padding-top: -10px;
}
.contenuA {
	margin: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}     
#contenu1 , #contenu2, #apercu, #defaut {
	display:none;
}	


#contenu1:target { 
	display:block 
}
#contenu2:target { 
	display:block 
}

#defaut:target { 
	display:block 
}

a.bouton {
	padding: 1px 3px;
	background: Silver;
	color: #000000;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 3px;
	border: 1px solid Black;
	text-decoration: none;
	background: linear-gradient( #fff, #d0d0d0);
}
a.bouton:hover {
	background: Gray;
	color: Black;
	background: linear-gradient( #fff, #acf);
}


p.bouton {
	padding: 1px 30px;
	background: Silver;
	color: #000000;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 3px;
	border: 1px solid Black;
	text-decoration: none;
	background: linear-gradient( #fff, #d0d0d0);
}
p.bouton:hover {
	background: Gray;
	color: Black;
	background: linear-gradient( #fff, #acf);
}
div.apercu {
  background-color: White;
	border-color: Aqua;
	border-width: thin;
	height: 400px;
	width: 600px;
	box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19);
	position:absolute;
	bottom:10px;
	right:20px;
  margin: 10px;
  padding:10px;
}


#apercu:target {
  display:block
}
 .close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}

</style>
  </head>


... et le HTML :
<body>
 <div id="entete" class="entete"></div>
 <div id="menu" class="menu">
 <p><a href="#defaut" class="bouton">Home</a></p>  
 <p><a href="#contenu1" class="bouton">Contenu 1</a></p>
 <p><a href="#contenu2" class="bouton">Contenu2</a></p>
 <p><a href="#apercu" class="bouton">Aper&ccedil;u</a></p>
 </div>
 <div id="contenu" class="contenu">
 <div id="defaut" class="contenuA"><p>d&eacute;faut</p></div> 
    <div id="contenu1" class="contenuA">
    <!--Contenu1-->
     Ceci est le contenu 1
     <p><a href="#apercu" class="bouton">Aper&ccedil;u</a></p>
    </div>
    <div id="contenu2" class="contenuA">
      Ceci est le contenu2
    </div>
   </div>
   
   <div id="apercu" class="apercu">
         Ceci est un apercu
         <a class="close" href="#close"></a>
   </div>
  </body>


Si quelqu'un peut me dire quelle énormité je rate...
Administrateur
Hello,

#default est le parent de tous les autres contenus et est en display none de base. Il n'apparaît que lorsqu'il est ciblé par une ancre (:target).
Dès qu'une autre ancre est ciblée, #default retrouve son aspect par défaut (display none) et cache donc tous ses enfants.
Bonjour et merci de vous pencher sur mon cas,
Je ne comprends pas la notion de "parent". La balise DIV de défaut est pourtant fermée et l'idée est plutôt qu'elle soit "sœur" des autres contenus...
Dans le doute, j'ai essayé de la déplacer ou de changer son display en "block", mais elle apparaît tout le temps si je fais ça, et en plus, elle déplace tout le reste Smiley eek ...
En fait tout marche comme sur le plan si ce n'est que la div "aperçu" efface systématiquement celle des trois autres qui est affichée et réciproquement... C'est là que je suis perdu.
Administrateur
Au temps pour moi, j'ai mal survolé la structure et ton indentation m'a induit dans l'erreur.

En fait ton problème est celui-ci : un seul élément peut être :target à la fois. Donc quand #apercu est target, les autres ne le sont plus et repassent en display none.

Ce serait réalisable avec de nombreuses bidouilles en CSS (sans doute pas avec :target d'ailleurs, mais plutôt avec des checkbox et l'événement :checked) mais quoi qu'il en soit ce n'est pas vraiment le domaine de CSS de gérer les interactions et les comportements, c'est plutôt le rôle de JavaScript.
Merci infiniment de m'avoir mis sur la piste ! Smiley biggrin
J'ai trouvé une solution avec javascript :
D'abord, dans le style, je désolidarise les div "contenu" de la notion de "target" que je garde seulement pour l'aperçu et je leur affecte un z-index "par défaut" de "2". Le z-index de la div "apercu" est placé à 200 pour lui assurer un niveau de visibilité maxi.
  <style>
    body {
	background-color: #EFEFEF;
	font-family: Roboto Medium;
	font-size: 12px;
}

.entete {
          		  	background-image: url(images/bannbam120.png);
          		  	height: 120px;
          		  	width: 1145px;
          		  	position:absolute;
          		  	left: 100px; 
          		  	top:10px;
          		  	font-family: Arial Black;
          		  	color: Yellow;
          		  	text-align: left;
          		  	padding-left: 10px;
                  background-repeat: no-repeat;
                  

          		  }
  div.menu {
	background-color: White;
	border-color: Aqua;
	border-width: thin;
box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19);
width: 160px;
height:600px;
position: absolute;
top: 130px;
left: 5px;
}
.menu {
  //font-family: 'Roboto', sans-serif;
	margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
} 

div.contenu {
	background-color: White;
	border-color: Aqua;
	border-width: thin;
	height: 600px;
	width: 835px;
	box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19);
	position:absolute;
	top:130px;
	left:200px;
  margin: 10px;
  /*z-index: 500;*/
 }
.contenu {
  //font-family: 'Roboto', sans-serif;
	margin: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
} 

div.contenuA {
	background-color: White;
	border-color: Aqua;
	border-width: thin;
	height: 445px;
	width: 775px;
	/*box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19); */
	position:absolute;
	/*top:170px;
	left:272px; */
  margin: 20px;
  padding-top: -10px;
}
.contenuA {
  //font-family: 'Roboto', sans-serif;
	margin: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}     

a.bouton {
	padding: 1px 3px;
	background: Silver;
	color: #000000;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 3px;
	border: 1px solid Black;
	text-decoration: none;
	background: linear-gradient( #fff, #d0d0d0);
}
a.bouton:hover {
	background: Gray;
	color: Black;
	background: linear-gradient( #fff, #acf);
}
 #contenu1 , #contenu2, #defaut {
	z-index: 2;
	/*par défaut tout est au même niveau assez bas*/
}	

p.bouton {
	padding: 1px 30px;
	background: Silver;
	color: #000000;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 3px;
	border: 1px solid Black;
	text-decoration: none;
	background: linear-gradient( #fff, #d0d0d0);
}
p.bouton:hover {
	background: Gray;
	color: Black;
	background: linear-gradient( #fff, #acf);
}
div.apercu {
  background-color: White;
	border-color: Aqua;
	border-width: thin;
	height: 400px;
	width: 600px;
	box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.2), 0 6px 20px 0 rgba(1, 1, 1, 0.19);
	position:absolute;
	bottom:10px;
	right:20px;
  margin: 10px;
  padding:10px;
}
 #apercu{
 display:none;
 }

#apercu:target {
  display:block;
  z-index:200;
  /*s'affiche et passe devant*/
}
 .close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
           
  </style>

Le javascript :
<script>
  var oldiv="defaut";
  function affiche(madiv){
             //alert('madiv : '+madiv+' oldiv : '+oldiv);
            document.getElementById(oldiv).style.zIndex="2";
            document.getElementById(madiv).style.zIndex="100";
            oldiv=madiv;
         //passe la div active au niveau 100 et la précédente à son niveau d'origine
         //puis se positionne comme l'ancienne pour que la suivante puisse prendre sa place la prochaine fois...   
         }
  </script>

Lancé en onload de la page avec la div "défaut" comme paramètre, le script place la div défaut au dessus des autres (z-index : 100) et s'enregistre en "oldiv" (pour connaître la div en cours d'affichage). De cette manière, on arrive sur un affichage "par defaut".
<body onload="affiche('defaut')">
  <div id="entete" class="entete"></div>
 <div id="menu" class="menu">
 <p><button onclick="affiche('defaut')" class="bouton">Home</button></p>  
 <p><button onclick="affiche('contenu1')" class="bouton">Contenu1</button></p> 
 <p><button onclick="affiche('contenu2')" class="bouton">Contenu2</button></p> 
 <p><a href="#apercu" class="bouton">Aper&ccedil;u</a></p>
 </div>
 <div id="contenu" class="contenu">
 <div id="defaut" class="contenuA"><p>d&eacute;faut</p></div> 
    <div id="contenu1" class="contenuA">
    <!--Contenu1-->
     Ceci est le contenu 1
     <p><a href="#apercu" class="bouton">Aper&ccedil;u</a></p>
    </div>
    <div id="contenu2" class="contenuA">
      Ceci est le contenu2
    </div>
   </div>
   
   <div id="apercu" class="apercu">
         Ceci est un apercu
         <a class="close" href="#close"></a>
   </div>

  </body>

Chaque bouton du menu appelle le script avec le nom de sa div de référence en paramètre, ce qui la place au dessus et "rétrograde" la précédente. Et ainsi de suite...
"Aperçu" garde son comportement indépendant et reste affiché tant qu'on ne lui demande pas de se fermer Smiley lol
Sans cette excellente suggestion d'aller voir du côté de javascript, je tournerais encore en bourrique. Encore merci et belle fin de journée.
Modifié par Laurent3522 (26 Aug 2019 - 18:05)
Sujet clos
Aller à