Liens dans le header bloqués

Anonyme

29 janvier 2015 à 12:58:28

Bonjour,

Je suis en stage de deuxième année de BTS et je dois concevoir le webdesign d'un site.

J'ai un problème que je n'arrive pas à résoudre depuis quelques jours, malgré des recherches sur le net je ne trouve aucun sujet qui en parle, je m'explique:

Dans le header de mon site il y a un logo, une barre de navigation, une barre de recherche et un lien pour se connecter. Ma barre de navigation fonctionne sans soucis en revanche tout le reste est non fonctionnel. Je ne peux pas cliquer sur le lien pour me connecter ni sur le logo pour aller à la page d'accueil et je ne peux pas non plus cliquer sur la barre de recherche.

Si quelqu'un connait ce problème je suis à votre écoute, merci beaucoup !

stephweb

29 janvier 2015 à 13:08:35

Bonjour,

il nous faudrait ton code stp

Frogweb

29 janvier 2015 à 14:14:44

Salut,

ça sent le position: absolute...

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Anonyme

29 janvier 2015 à 14:58:54

<body>
		<div id="conteneur">
		
			<header>
				<div id="logo">
					<img src="images/logo.gif" />
				</div> <!-----#logo----->
				
				
				<div class="search">
					<form method="get" action="">
						<input type="text"  class="rounded" placeholder="Rechercher ..." size="20" />
						<input type="submit" value="OK"  class="bouton_ok"/> 
					</form>
				</div> <!-----#search----->
				
				<div class="connexion">
					<a href="connexion.html">Se connecter</a>
				</div>
				
				
				<nav id="menu">
					<ul>
						<li><a href="#" class="bouton">Vie de la collectivité</a>
							<ul>
								<li><a href="presentation.html"><b>Présentation de la collectivité</b></a></li>
								<li><a href="#"><b>L'agenda de la collectivité</b></a></li>
								<li><a href="#"><b>Actes administratifs et officiels</b></a></li>
								<li><a href="#"><b>Organigramme</b></a></li>
								<li><a href="#"><b>Activité des services</b></a></li>
							</ul>
						</li>
				
				
						<li><a href="#" class="bouton">Vie de l'argent</a>
							<ul>
								<li><a href="#"><b>Charte TIC</b></a></li>
								<li><a href="#"><b>Infos</b></a></li>
								<li><a href="#"><b>Les relations sociales</b></a></li>
								<li><a href="#"><b>Associations du personnel</b></a></li>
								<li><a href="#"><b>Mutuelles</b></a></li>
								<li><a href="#"><b>Formations et concours</b></a></li>
								<li><a href="#"><b>Guides RH et règlements</b></a></li>
								<li><a href="#"><b>Mobilité</b></a></li>
							</ul>
						</li>
				
				
						<li><a href="#" class="bouton">Espace pratique</a>
							<ul>
								<li><a href="#"><b>Formulaires et modèles</b></a></li>
								<li><a href="#"><b>Adresses et numéros utiles</b></a></li>
								<li><a href="#"><b>Menu de la cantine</b></a></li>
								<li><a href="#"><b>Liens utiles</b></a></li>
								<li><a href="#"><b>Co-voiturage</b></a></li>
								<li><a href="#"><b>Calendrier des vacances scolaires</b></a></li>
								<li><a href="#"><b>Développement durable</b></a></li>
							</ul>
						</li>
				
				
						<li><a href="#" class="bouton">Espace documentaire</a>
							<ul>
								<li><a href="#"><b>Documentation</b></a></li>
								<li><a href="#"><b>Archives</b></a></li>
								<li><a href="#"><b>Guides et outils informatiques</b></a></li>
							</ul>
						</li>
					</ul>
				</nav> <!-----#menu----->				
			</header>

Et le CSS qui va avec:

/************************************************************************/
/* Basic                                                                */
/************************************************************************/

body
{
	background-color: white;
	width: 100%;
	margin: auto;
}


/************************************************************************/
/* Header                                                               */
/************************************************************************/

header
{
	background-image: url("images/fond-bando.gif");
	width: 1263px;
	height: 144px;
}


#logo
{
	margin: auto;
	z-index: 1;
	margin-bottom: -45px;
	position: relative;
}

.search
{
	float: right;
	margin-top: -65px;
	padding-right: 70px;
	z-index: 1;
}

.rounded { 
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
	padding:6px 15px 6px 30px;
	border:1px solid #d0d0d0;
	background: url("images/search-icon.png") no-repeat 8px 6px;
	background-color: white;
}

input[type=text]
{
	color:#bcbcbc;
}

.bouton_ok
{
	cursor: pointer;
	background-color: white;
	color: gray;
	font-family: Trebuchet MS;
	border:1px solid #adc5cf;
	padding: 5px;
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px;
	z-index: 1;
}

a 
{ 
	text-decoration:none; 
}

.connexion
{
	float: right;
	margin-top: -30px;
	padding-right: 210px;
	z-index: 2;
}

.connexion a
{
	color: white;
	text-decoration: underline;
	font-family: Trebuchet MS;
	letter-spacing: -0.07em;
}


/************************************************************************/
/* NavBar                                                               */
/************************************************************************/
			
#menu 
{ 
	margin-top: 18px;	
}
			
/* État par défaut */
#menu ul 
{ 
	margin:0; 
	padding:0; 
	list-style:none; 
	text-align:center; 
	font-size:.1em; 
	letter-spacing:-2px;
		
}

#menu li 
{ 
	display:inline-block; 
	position:relative; 
	z-index: 2;
}

#menu li a.bouton
{
	background-image: url("images/onglet.gif");
	font-family: Trebuchet MS;
	font-size: 15px;	
	font-weight: bold;
	width: 200px;
	height: 24px;
	margin-left: 5px;
	padding: 0;
	letter-spacing: -0.01em;
}

#menu li a.bouton:hover
{
	background-image: url("images/onglet-selectionne.gif");
}

#menu li li 
{ 
	display:block; 
}

#menu a 
{ 
	display:block; 
	width:200px; 
	height:40px; 
	margin-left: 5px;
	font-size:12px;
	line-height:25px; 
	color:#fff; 
	background:#87CEEB;
	padding: 10px 0 10px 0;
}

#menu li * a:before
{
	content:" ■ "; /*Petite puce carrée placée avant le lien */
	color: #DC143C;	
}

#menu li * a
{
	text-align: justify;
	color: black;
	letter-spacing: normal;
	font-family: Trebuchet MS;
}

#menu li:hover > a
{
	color: white;
}

#menu li ul 
{ 
	left:-4000px; 
	position:absolute; 
	margin-top: 2px;
}
			
/* Survol d'un lien racine */
#menu a:hover 
{ 
	color: black; 
}

#menu li:hover  > ul 
{ 
	left: 0;
}

#menu li * a:hover:before
{
	content:" ■ " /*Petite puce carrée placée avant le lien */
}

Merci pour votre aide

Anonyme

29 janvier 2015 à 20:56:11

Salut,

Pour le logo, tu n'as tout simplement pas mis de lien Le reste je laisse quelqu'un d'autre s'en occuper, j'en ai aucune idée.

Peut-être dû aux float et z-index utilisés à mauvais escient ?

Anonyme

30 janvier 2015 à 11:52:38

Oui pour le logo j'avais essayé et comme ca marchait pas j'ai enlevé x)

Pour le z-index je me suis dis peut etre que la div du logo empietait sur les div de connexion et de recherche donc je l'ai mise a 1

Et les float cest pour que mes div se placent en ligne horizontalement

Je me base sur ma barre de navigation qui elle est fonctionnelle (grace au z-index) malgré qu'elle soit dans le header

Anonyme

30 janvier 2015 à 17:29:58

Alors ... A ce que je vois tes liens se trouvent en dehors de la page (c'est peut-être normal, je n'ai pas ton logo).

J'ai ajouté de la marge en mettant 100px au lieu de -30 et -45, les connexions et search deviennent visibles et cliquables ! Donc je ne vois pas en quoi ils ne sont pas cliquables ... vu que je peux cliquer dessus.

Je te conseille de suivre le cours sur le positionnement, parce que float n'est pas faite pour la mise en page bien que la majorité des sites l'utilisent

PS: Tes liens sont en blanc, donc tu ne peux pas voir le lien de connexion

-
Edité par Anonyme 30 janvier 2015 à 17:49:58

Anonyme

2 février 2015 à 9:28:18

Dans mon header j'ai mon logo et j'ai une image de fond qui est bleu c'est pour ca que mes liens sont en blanc, je les vois moi, quand on met 100px c'est normal qu'ils deviennent cliquable puisqu'ils ne se trouvent plus sur le dit fond bleu.

C'est pour ca que pour moi le problème venait de la superposition je ne vois pas autre chose, seulement en jouant sur les z-index rien ne change

Anonyme

5 février 2015 à 13:32:12

Bonjour,

J'édite pas pour UP le sujet car à force de me creuser la tête la dessus j'ai trouvé quel était le soucis. Je poste alors la solution si jamais cela peut aider d'autres personnes passant dans le coin:

J'ai donc dans mon header:

- Une div #logo

- Une div .search

- Une div .connexion

Le tout positionné en float pour qu'elles soient les unes à coté des autres.

Ma barre de recherche et mon lien de connexion étaient inutilisables, "incliquables". Après beaucoup de test avec des z-index je me suis demandée si le problème ne venait pas de la div #logo. Je suis alors allée ré-éxaminer celle ci dans mon CSS et j'ai vu qu'elle n'avait pas de width. Je lui ai donc attribué un width de 500px et magie ma barre de recherche et mon lien sont maintenant utilisables. Ils étaient tout simplement "coincés" dans la div #logo et malgré les z-index rien ne changeait.

Voila c'est tout, je vois que personne ne s'est vraiment penché sur mon code c'est malheureux m'enfin tant pis, merci à moi

philiga

5 février 2015 à 14:15:53

Bonjour,

Je ne me suis pas trop penché sur ton code (pas facile sans images), mais deux remarques simplement:

Il manque le </div> de clôture de <div id="conteneur"> en fin de ton code html
Pour les z-index, ils doivent toujours être associés pour pouvoir fonctionner à un élément positionné (donc nécessité d'ajouter position:relative; au besoin, ce qui n'apparaît pas dans ton code).

-
Edité par philiga 5 février 2015 à 14:16:19

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)