28172 sujets

CSS et mise en forme, CSS3

Page incluse empêche lien hypertext

Bonjour,
je suis débutante
j'ai créer une page d'accueil dans laquelle j'ai inséré mon fichier header.php contenant le header.
ensuite j'ai ajouté une image et en dessous je voudrais créer un menu déroulant. pour cela j'ai créer une liste avec des liens hypertext seulement ils ne sont cliquables que lorsque j'enlève le header.php. Peut-être que la structure d'une page incluse doit être différente?
merci d'avance pour votre aide.

html de la p. accueil:


<!DOCTYPE html>
<html lang="fr">
<head>
<title>accueil</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/index.css">
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon"/>
</head>
<body>
<header>
<?php require 'header.php';?>
</header>
<div class="image"></div>
<p>
<nav>
<ul class="list">
<li><a class="categories" href="exempl.php"> catégorie 1</a></li>
<li><a class="categories" href="trio.php"> Catégorie 2</a></li>
</ul>
</nav>
</body>
</html>

css p.accueil:

body{
margin: 0;
padding: 0;
}

.image{
width: 100%;
height: 100vh;
background: url("https://cdn.pixabay.com/photo/2016/02/10/17/49/gloves-1192164_960_720.jpg")
no-repeat;
background-size: cover;
}

.categories{
text-decoration: none;
color: green;
font-size: 18px;
}

html du header.php:

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Locanord</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/header.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<header>
<nav id="nav">
<a href="index.php">
<img src="img/logo.png" class="unlogo" alt="Logo "/>
</a>
<div class="menu">
<ul id="ul">
<li class="li"><a class="lien" href="nosagences.html"> Nos agences </a></li>
<li class="li"><a class="lien" href="moncompte.php"> Mon compte </a></li>
</ul>
</div>
</nav>
<script>
$(window).on("scroll", function(){
if($(window).scrollTop()){
$('nav').addClass('scroll');
}else {
$('nav').removeClass('scroll');
}
})
</script>
</header>
</body>
</html>

css header.php

body{
margin: 0;
padding: 0;
}

#nav{
width: 100%;
height: 100vh;
position: fixed;
}

#ul{
padding: 0;
text-align: right;
margin: 0;
transition: 1s;
}

.li{
display: inline-block;
margin: 20px;
}

.lien{
text-decoration: none;
color: #ffffff;
font-size: 18px;
}

.unlogo{
position: fixed;
float: left;
margin-left: 20px;
width: 100px;
height: 65px;
}
#nav.scroll #ul{
background: #333333;
}
Salut

Dans ton header PHP tu ne devrais avoir que le <header>.
Actuellement le problème c'est que tu as ton <doctype><html> de partout... il doit y avoir confusion pour ton serveur.

à la limite tu devrais avoir ton index.php avec le doctype et le <head> pour inclure tes fichiers css/jquery

Et ensuite dans ton header.php tu devrais avoir uniquement 

<nav id="nav">
<a href="index.php">
<img src="img/logo.png" class="unlogo" alt="Logo "/>
</a>
<div class="menu">
<ul id="ul">
<li class="li"><a class="lien" href="nosagences.html"> Nos agences </a></li>
<li class="li"><a class="lien" href="moncompte.php"> Mon compte </a></li>
</ul>
</div>
</nav>
Sujet clos
Aller à