28172 sujets

CSS et mise en forme, CSS3

Lien qui ne fonctionne pas dans une div=fixed

Bonjour,
Je rencontre un problème dans la création d'un site, je suis encore débutant (étudiant en licence dans ce domaine) et j'espère que vous pourrez m'aider.
Je crée un site onepage (avec fullpage.js) et sur la première page je veux créer un lien avec un icone qui renvoie à la page suivante.
Pour cela j'ai créé une div en position fixed (pour le positionner en bas de la page) avec mon lien à l'intérieur. Seulement, ce lien ne fonctionne pas lorsque la div est en position fixed ou absolute. J'ai essayé d'ajouter des propriétés z-index pur que le lien se trouve bien au dessus mais rien à faire.

Pouvez vous m'aider ? Voici mon code :
<div id="fleche">
		<a href="#page2"> <i class="fa fa-angle-double-down"> </i></a>
		</div>


 #fleche{
	position:fixed;
	bottom: 20px;
	left: 50%;
	background-color: #1C170C;
	width: 5%;
	text-align: center;
	z-index:1;
}
#fleche a {
	font-size:3em;
	color: #FFFFFF;
	text-decoration:none;
	z-index:999;
}


Merci !
upload/60797-Capture.JPG
Modérateur
Hello,

Ce serait mieux d'assigner ta position fixed sur le lien (#flèche a) et pas le conteneur #flèche. L'habillage va se faire directement sur le lien. Voici un exemple.

Pour les prochaines fois, il serait bien d'avoir un exemple en ligne de ton site pcq le code que tu nous as fourni n'illustre pas grand chose.
Merci à tous pour votre aide,

Yordi, j'ai essayé avec ton code, ça ne marche pas mieux, le lien est toujours inactif.
Voici le code en entier, il y a 2 fois une navbar (pour chaque section) normalement intégrées en php.
Je n'ai mis que les style css principal, simplement pour que vous ayez une idée, pas la peine d'essayer de visualiser..

J'essaye de mettre mon site sur Zymic pour que vous puissiez le voir, pour l'instant ça ne marche pas, je réessaie dès que possible.

Merci,
Re-bonjour à tous,

J'ai fini par trouver c'était une erreur stupide, j'ai créé un menu vertical qui prenait toute la largeur (sans que cela ne se voit, les autres éléments étant correctement alignés) et se superposait donc au lien.
En modifiant le z-index, cela a réglé le problème :

<div class="section"id="slide" >
	<header >
		<div class="barreverticale">
			<a class="titre" href="index.html">
			       <img src="img/phare.png" alt="phare"/>
			</a>
			<nav id="navbar">
			</nav>
		</div>
		<div id="logo">
			<img src="img/logo.png" alt="logo" />	
		</div>
		<div id="fleche">
		<a href="#page2"> <i class="fa fa-angle-double-down"> </i></a>
		</div>
	</header>
</div>


.barreverticale {
	margin-left : 10px;
	position:absolute;
	top:0px;
	z-index:10;
	height:100%;
	width:100%;
}
#fleche{
	position:fixed;
	bottom: 20px;
	left: 50%;
	background-color: #1C170C;
	width: 5%;
	text-align: center;
	z-index:15;

}
#fleche a {
	font-size:3em;
		color: #FFFFFF;
	text-decoration:none;

}


Pour info, vous trouverez mon site ici.

Merci pour votre aide et vos conseils !
Modifié par PMino (23 Dec 2015 - 16:54)
Sujet clos
Aller à