[Résolu] Pied de page cache - cache

Bonjour,
Je suis un petit débutant en html css!
En fait, j'ai parcouru les tutos qui parle de transition et meme les forums. Mais aucune solution à mon problème.
Voila j'ai vu une solution mais elle va de gauche à droite et non de bas en haut puis de haut en bas !
Voici la page en question :
http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html

Je voudrais juste faire la meme chose mais de bas en haut puis de haut en bas !

SVP ! j'en ai vraiment besoin et
MERCI à tous ceux qui prendront la peine de penser à mon problème
Modifié par akad1070 (18 Apr 2012 - 18:40)

Bonsoir,

Le principe est exactement le même que dans le tutoriel cité, sauf qu'on joue sur la propriété top (et plus left) afin de cacher le menu verticalement.
Agrémenté de quelques déclarations propres au positionnement des éléments, on obtient un code de ce type :

HTML :

<div id="volet_clos">
	<div id="volet">
		<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
		<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
		<a class="ouvrir" href="#volet" aria-hidden="true">Ouvrir !</a>
		<a class="fermer" href="#volet_clos" aria-hidden="true">fermer !</a>
	</div>
</div>

CSS :

body, p {
	margin: 0;
	padding: 0;
}

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 18px;
	line-height: 18px;
	color: #fff;
}

#volet {
	position: relative;
	top: -200px;
	right: 0;
	left: 0;
	height: 150px;
	padding: 25px;
	background-color: #6b9a49;
	-moz-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
	transition: all .5s ease-in;
}

#volet > a.ouvrir, #volet > a.fermer {
	position: absolute;
	bottom: -50px;
	left: 50%;
	width: 150px;
	height: 50px;
	margin-left: -75px;
	background-color: #555;
	font-size: 25px;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	-moz-border-radius: 0 0 15px 15px;
	-webkit-border-radius: 0 0 15px 15px;
	border-radius: 0 0 15px 15px;
}

#volet > a.fermer {
	display: none;
}

#volet:target {
	top: 0;
}

#volet:target > a.ouvrir {
	display: none;
}

#volet:target > a.fermer {
	display: block;
}

#volet_clos:target > #volet {
	top: -200px;
}

Oui c'est ca mais vous l'avez placé en haut.

Mais je veux que le footer) parte du bas vers le haut. Dites moi juste quelle propriété changer et je passe en résolu .

En tout cas, Merci de votre réponse !
Modifié par 6l20 (19 Apr 2012 - 10:03)

Autant pour moi, je n'avais pas remarqué votre phrase qui précisait "de bas en haut puis de haut en bas".

Pour cela, la solution la plus simple est d'utiliser un positionnement fixe (position: fixed;) sur l'élément d'ID "volet". Par ce biais, on peut masquer l'élément en bas de la fenêtre du navigateur, sans qu'une barre de scroll n'apparaisse à cause du décalage négatif de l'élément. Par contre si on utilise ce positionnement, l'élément suivra le scroll de la page ; il sera visible de façon permanente.

Voici les seules déclarations CSS ayant subi un changement par rapport à mon post précédent. Changez les valeurs de ces propriétés et laissez le reste intact.

CSS :

#volet {
	position: fixed;
	top: -200px; /* À supprimer */
	bottom: -200px;
}

#volet > a.ouvrir, #volet > a.fermer {
	top: -50px;
	bottom: -50px; /* À supprimer */
	-moz-border-radius: 15px 15px 0 0;
	-webkit-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
}

#volet:target {
	top: 0; /* À supprimer */
	bottom: 0;
}

#volet_clos:target > #volet {
	top: -200px; /* À supprimer */
	bottom: -200px;
}

Si le comportement "fixe" du menu ne convient pas, une autre solution à base de overflow: hidden; doit être possible...
Modifié par jeremy-p (18 Apr 2012 - 21:45)

Merci BEAUCOUP

Mais le con que je suis, j'ai remplacé le contenu HTML par mon footer et pop, il n'apparait plus.
Soit il est trop décalé soit trop bas !
Modifié par 6l20 (19 Apr 2012 - 10:05)

J'ai su adapté la taille par rapport au contenu !
En tout cas, merci d'avoir répondu aussi vite !
Modifié par akad1070 (19 Apr 2012 - 17:40)