28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai suivi le tuto

https://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html

et bien sûr, je me retrouve avec ce problème du scroll de la page si le contenu est plus grand que la hauteur de mon écran.

J'ai trouvé une solution

http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap2

Mais je n'arrive pas du tout à l'adapter sur le code du tuto (que vous pouvez trouver ici :

https://www.w3schools.com/code/tryit.asp?filename=FNVDVZALM5FP

J'ai cherché des infos, j'ai testé plein de chose sur ce code, mais je bloque complètement.
Il faut appliqué le target à un élément non visible..ok . mais je n'y arrive pas du tout.

Pourriez vous m'aider?
Avez-vous réussi à trouver ou a comprendre la solution ci-dessus ?

merci beaucoup par avance
Timama
me revoici...

Alors, j'ajoute donc des balises <a> qui ne sont pas visible et qui serviront de target....
Mon ancien code était donc :




                <div id="volet_clos" >
                    <div id="volet" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p> Bla bla dans fenêtre  </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#volet_clos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 




#volet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}

#volet a.ouvrir,
#volet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#volet {
	position: absolute;
	left: -410px;  /* test fixed + scroll, on retire la position top */
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#volet a.ouvrir,
#volet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;

text-align: center;
}
#volet a.fermer {
	display: none;
}
#volet:target {
	left: 0px;
}

/* code pour la fermeture */
#volet:target a.fermer {
	display: block;
}
#volet:target a.ouvrir {
	display: none;
}
#volet_clos:target #volet {
	left: -410px;
}

 /* test fixed + scroll */
#volet_clos {
	position: absolute; 
	top:0px;
	right: 0px;
}




Et voici mon nouveau code
(la différence avec le tuto c'est que j'ai la fenêtre à droite, qui est ouverte par défaut)


                <a id="voletclos" class="ancre"></a>
                <a id="volet" class="ancre"></a>
                <div id="blocvoletclos" >
                    <div id="blocvolet" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p> Bla bla dasn fenêtre  </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#voletclos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 



.ancre{display:none}

#blocvolet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}

#blocvolet a.ouvrir,
#blocvolet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#blocvolet {
	position: absolute;
	left: -410px;  /* test fixed + scroll, on retire la position top */
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;
	text-align: center;
}

#blocvolet a.fermer {
	display: none;
}

#volet:target ~ #blocvolet{
	left: 0px;
}

/* code pour la fermeture */
#volet:target ~ #blocvolet a.fermer {
	display: block;
}
#volet:target ~ #blocvolet a.ouvrir {
	display: none;
}
#blocvolet:target #voletclos {
	left: -410px;
}

 /* test fixed + scroll */
#blocvoletclos {
	position: absolute; 
	top:0px;
	right: 0px;
}



Alors, je suis en train de travailler encore dessus car ma fenêtre ne se ferme plus....
Elle reste ouverte... j'ai du faire une bêtise quelque part.....

je reviens avec la solution
alors me revoilà, après plusieurs tests, ma fenêtre ne se ferme toujours pas mais je pense que c'est la partie suivante qui ne fonctionne pas


/* code pour la fermeture */
#volet:target a.fermer ~ #blocvolet  {
	display: block;
}
#volet:target a.ouvrir  ~ #blocvolet {
	display: none;
}
#voletclos:target #blocvolet ~ #blocvoletclos  {
	left: -410px;
}


j'ai encore testé pas mal de chose un peu dans tous les sens...
j'ai l'impression que le target non visible ne fonctionne pas pour les balise a.ouvir et a.fermer

avez vous des remarques sur ce point?
merci beaucoup par avance pour votre aide
Timama
J'ai réussi à fermer ma fenêtre, c'est juste le mouvement de transition qui ne se fait plus lentement (enfin, il se fait d'un coup)

https://codepen.io/Timama/pen/mKmXqJ


Mon code avant, quand la fenêtre ne se ferme plus est 4 posts au dessus.
Voici le code où la fenêtre se ferme (avec vitesse transition rapide)


                <a id="voletclos" class="ancre"></a>
                <a id="volet" class="ancre"></a>
                <div id="blocvolet" >
                    <div id="blocvoletclos" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p>
                            <b>Leistungsphasen nach HOAI: </b><br/><?php echo $leistungsphasen; ?> <br/><br/>
                            <b>Bearbeitungszeitraum :  </b><br/><?php echo $bauzeit; ?> <br/><br/>
                            <b>Bauherr :  </b><br/><?php echo $Bauherr_projekt; ?> <br/><br/><br/>
                            <b>Beschreibung :  </b><br/><?php echo $beschreibung_projekt; ?> <br/><br/>
                            </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#voletclos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 




/*le volet sans pb de saut à la fermeture */
.ancre{display:none}

#blocvolet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#blocvolet {
	right: 0px;
	top: 0px;
	position: absolute;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;
	text-align: center;
}
#blocvolet a.fermer {
	display: none;
}
#volet:target ~ #blocvolet{
	left: 100%;
}


/* code pour la fermeture */

#volet:target ~ #blocvolet a.fermer {
	display: block;
}
#volet:target ~ #blocvolet a.ouvrir {
	display: none;
}
#voletclos:target #blocvolet ~ #blocvoletclos  {
	left: -410px;
}

#blocvoletclos {
}
/* fin volet sans problème */



donc il me reste à régler le problème de vitesse de transition et c'est bon.
Il faut que je trouve pourquoi la transition ne se fait plus comme demandée

Si vous voyez pourquoi , n'hesitez pas à me le dire !
merci beaucoup par avance
Bonjour,

Voici le code, avec donc la fenêtre à droite, qui ne "saute" pas et qui se ferme, avec une bonne vitesse de transition

                
<a id="voletclos" class="ancre"></a>
                <a id="volet" class="ancre"></a>
                <div id="blocvolet" >
                    <div id="blocvoletclos" >
                        <h3><?php echo $title; ?> </h3><br />
                        <div>
                            <p>
                            <b>Leistungsphasen nach HOAI: </b><br/><?php echo $leistungsphasen; ?> <br/><br/>
                            <b>Bearbeitungszeitraum :  </b><br/><?php echo $bauzeit; ?> <br/><br/>
                            <b>Bauherr :  </b><br/><?php echo $Bauherr_projekt; ?> <br/><br/><br/>
                            <b>Beschreibung :  </b><br/><?php echo $beschreibung_projekt; ?> <br/><br/>
                            </p> 
                        </div>
                        <a href="#volet" class="ouvrir " aria-hidden="true"> Details ausblenden</a>
                        <a href="#voletclos" class="fermer" aria-hidden="true">Details anzeigen  </a>
                    </div>
                </div> 



.ancre{display:none}

#blocvolet {
	width: 390px;
	height:580px;
	padding: 10px;
	background:rgba(230,230,230,0.55); 
	color: #000;	
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#blocvolet {
	right: 0px;
	top: 0px;
	position: absolute;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#blocvolet a.ouvrir,
#blocvolet a.fermer {
	position: absolute;
	right: 330px;
	top: 150px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 8px 8px 0 0 ;
	width: 150px;
	text-align: center;
}
#blocvolet a.fermer {
	display: none;
}
#volet:target ~ #blocvolet{
	right:-410px;
}


/* code pour la fermeture */

#volet:target ~ #blocvolet a.fermer {
	display: block;
}
#volet:target ~ #blocvolet a.ouvrir {
	display: none;
}
#voletclos:target #blocvolet ~ #blocvoletclos  {
	left: -410px;
}



et ça fonctionne bien !

Merci pour l'aide !

Timama