A voir également:
- Logo canada goose gauche ou droite
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Windows 11 barre des taches a gauche - Guide
- Logo .net - Télécharger - Études & Formations
- Logo jeu - Télécharger - Jeux vidéo
- Barre droite clavier - Forum Excel
2 réponses
Bonjour
Sans voir le code... Impossible de t'aider.
Nb: a lire AVANT de poster ton code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Sans voir le code... Impossible de t'aider.
Nb: a lire AVANT de poster ton code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
bjr Jordane voila mon code
la page header.php
la page index.php
la page footer.php est encore vide, elle n'a pas de problème
la page main.css (contenant une partie de la mise en forme)
Le problème, le code fonctionne bien (je suis en locale) mais dès que je clique sur le menu langue, video, exercices...le header décale vers la droite et revient à sa position quand je clique sur home. je ne comprends pas ce qui se passe.
Merci d'avance
la page header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ndameyong</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<!-- Slick -->
<link type="text/css" rel="stylesheet" href="css/slick.css"/>
<link type="text/css" rel="stylesheet" href="css/slick-theme.css"/>
<!-- nouislider -->
<link type="text/css" rel="stylesheet" href="css/nouislider.min.css"/>
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Custom stlylesheet -->
<link rel="stylesheet" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header>
<!-- TOP HEADER -->
<div id="top-header">
<div class="container">
<ul class="header-links pull-left">
<li><a href="#"><i class="fa fa-hotel"></i> Trouver un hotel</a></li>
<li><a href="#"><i class="fa fa-car"></i> Voiture de location</a></li>
<li><a href="#"><i class="fa fa-heart-o"></i> Faire une rencontre</
a></li>
<li><a href="#"><i class="fa fa-car"></i> Voiture de location</a></li>
<li><a href="#"><i class="fa fa-heart-o"></i> Faire une rencontre</
a></li>
</ul>
<ul class="header-links pull-right">
<?php if (isset($_SESSION['user'])): ?>
<li><a href="profil.php">Bienvenue, <?php echo $_SESSION['user']['nom'] ?></a></li>
<?php if (Auth::isadmin($DB)): ?>
<li><a href="admin/">Administration</a></li>
<?php endif ?>
<li><a href="login.php?logout">logout</a></li>
<?php else: ?>
<li><a href="signup.php"><i class="fa fa-dollar"></i> S'inscrire</a></li>
<li><a href="login.php"><i class="fa fa-user"></i> Se connecter</a>
</li>
<?php endif?>
</ul>
</div>
</div>
<!-- /TOP HEADER -->
<!-- MAIN HEADER -->
<div id="header">
<!-- container -->
<div class="container">
<!-- row -->
<div class="row">
<!-- LOGO -->
<div class="col-md-3">
<div class="header-logo">
<a href="produits.php" class="logo">
<img src="./img/logo.png" alt="">
</a>
</div>
</div>
<!-- /LOGO -->
<!-- SEARCH BAR -->
<div class="col-md-6">
<div class="header-search">
<form>
<select class="input-select">
<option value="0">Les langues</option>
<option value="1">Category 01</option>
<option value="1">Category 02</option>
</select>
<input class="input" placeholder="Search here">
<button class="search-btn">Search</button>
</form>
</div>
</div>
<!-- /SEARCH BAR -->
<!-- ACCOUNT -->
<div class="col-md-3 clearfix">
<div class="header-ctn">
<!-- Wishlist -->
<!-- /Wishlist -->
<!-- Cart -->
<div class="dropdown">
<div>
<ul class="header-links1 pull-right">
<li><a href="https//www.facebook.com"><i class="fa fa-facebook"></i> </a></li>
<li><a href="#"><i class="fa fa-twitter"></i> </a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<!-- /Cart -->
<!-- Menu Toogle -->
<div class="menu-toggle">
<a href="#">
<i class="fa fa-bars"></i>
<span>Menu</span>
</a>
</div>
<!-- /Menu Toogle -->
</div>
</div>
<!-- /ACCOUNT -->
<!-- /MAIN HEADER -->
</div>
</header>
<!-- /HEADER -->
<!-- NAVIGATION -->
<nav id="navigation" >
<!-- container -->
<div class="container">
<!-- responsive-nav -->
<div id="responsive-nav">
<!-- NAV -->
<ul class="main-nav nav navbar-nav">
<li><a href="index.php"><strong>HOME</strong></a></li>
<li><a href="langues.php">Langues<br />
<li><a href="videos.php">Videos</a></li>
<li><a href="exercices.php">Exercices</a></li>
<li><a href="histoire.php">Histoire et Culture</a></li>
<li><a href="proverbes.php">Proverbes</a></li>
<li><a href="objectifs.php">Objectifs</a></li>
<li><a href="cuisine.php">Cours de cuisine</a></li>
<li><a href="partenaires.php">Nos partenaires</a></li>
<li><a href="don.php">sante</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<!-- /NAV -->
</div>
<!-- /responsive-nav -->
</div>
<!-- /container -->
</nav>
<!-- /NAVIGATION -->
<div class="main">
<div class="container">
la page index.php
<?php require 'includes/includes.php'; ?>
<?php require 'includes/header.php'; ?>
<!-- message de session -->
<?php if (isset($_SESSION['message'])): ?>
<div class="message"> <?php echo $_SESSION['message']; ?></div>
<?php unset($_SESSION['message']) ?>
<?php endif ?>
<?php if (isset($_SESSION['erreur'])): ?>
<div class="errorMessage"> <?php echo $_SESSION['erreur']; ?></div>
<?php unset($_SESSION['erreur']) ?>
<?php endif ?>
<h1>Bienvenue chez Ndameyong ...</h1>
<p>Ndameyong est un espace de formation en langues Camerounaises 100 % gratuit.
L’objectif : apprendre les langues Camerounaises et les faire revivre grâce à des cours
concis et personnalisés. Le tout dans une ambiance fun pour un apprentissage rapide et adapté
au niveau de chacun. <br />Avec Ndameyong, parler devient facile.
</p>
<?php endforeach ?>
<div class="clearfix"></div>
<?php require 'includes/footer.php'; ?>
la page footer.php est encore vide, elle n'a pas de problème
la page main.css (contenant une partie de la mise en forme)
/*----------------------------*\
Typography
\*----------------------------*/
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #333; }
h1, h2, h3, h4, h5, h6 {
color: #2B2D42;
font-weight: 700;
margin: 0 0 10px; }
a {
color: #fff;
font-weight: 500;
-webkit-transition: 0.2s color;
transition: 0.2s color; }
a:hover, a:focus {
color: #D10024;
text-decoration: none;
outline: none; }
ul, ol {
margin: 0;
padding: 0;
list-style: none; }
/*----------------------------*\
Inputs
\*----------------------------*/
/*-- Text input --*/
.input {
height: 40px;
padding: 0px 15px;
border: 1px solid #E4E7ED;
background-color: #FFF;
width: 100%; }
/*-- Select input --*/
.input-select {
padding: 0px 15px;
background: #FFF;
border: 1px solid #E4E7ED;
height: 40px; }
/*=========================================================
02 -> HEADER
===========================================================*/
/*----------------------------*\
Top header
\*----------------------------*/
#top-header {
padding-top: 2px;
padding-bottom: 3px;
margin-right: 0px;
margin-left: 0px;
background-color: #48a44f; }
.header-links li {
display: inline-block;
margin-right: 15px;
font-size: 13px; }
.header-links li:last-child {
margin-right: 0px; }
.header-links li a {
color: #FFF; }
.header-links li a:hover {
color: #000; }
.header-links li i {
color: #000;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 3px; }
.header-links1 li i {
display: inline-block;
color: yellow;
margin-right: 15px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 18px; }
/*----------------------------*\
Logo #D10024
\*----------------------------*/
#header {
padding-top: 5px;
padding-bottom: 5px;
border-top: none;
background: url(../img/banner.png) center no-repeat; }
.header-logo {
float: left;
display: block;
padding-top: 5px; }
/*----------------------------*\
Search
\*----------------------------*/
.header-search {
padding-top: 22px; }
.header-search form {
position: relative; }
.header-search form .input-select {
margin-right: -3px;
margin-left: 15px;
border-radius: 40px 0px 0px 40px; }
.header-search form .input {
width: calc(100% - 260px);
margin-right: -5px; }
.header-search form .search-btn {
height: 40px;
width: 100px;
background: #FFFF00;
color: #000;
font-weight: 700;
border: none;
border-radius: 0px 40px 40px 0px; }
/*----------------------------*\
Cart
\*----------------------------*/
.header-ctn {
float: right;
padding: 15px 0px; }
.header-ctn > div {
display: inline-block; }
.header-ctn > div > a {
display: block;
padding-top: 15px;
position: relative;
width: 25px;
text-align: none;
color: #FFFF00; }
.header-ctn .menu-toggle {
display: none; }
.menu-toggle {
float: right;
padding: 5px 0px;
margin-left: 15px;
padding-bottom: 0px; }
/*=========================================================
03 -> Navigation
===========================================================*/
#navigation {
background: #619497;
border-bottom: 2px solid #fff;
border-top: 4px solid #ffff00;
padding-top: 0;
padding-bottom: -3px; }
/*----------------------------*\
Main nav #619497
\*----------------------------*/
.main-nav > li + li {
margin-left: 25px; }
.main-nav > li > a {
padding: 8px 0px; }
.main-nav > li > a:hover, .main-nav > li > a:focus, .main-nav > li.active > a {
color: #FFFF00;
background-color: transparent; }
.main-nav > li > a:after {
content: "";
display: block;
width: 0%;
height: 2px;
background-color: #FFFF00;
-webkit-transition: 0.2s all;
transition: 0.2s all; }
.main-nav > li > a:hover:after, .main-nav > li > a:focus:after, .main-nav > li.active > a:after {
width: 100%; }
.header-ctn li.nav-toggle {
display: none; }
/*----------------------------*\
sous_menu
\*----------------------------*/
.sous_menu {
color: green;
display: inline-block; }
/*----------------------------*\
responsive nav
\*----------------------------*/
@media only screen and (max-width: 991px) {
.header-ctn .menu-toggle {
display: inline-block; }
#responsive-nav {
position: fixed;
left: 0;
top: 0;
background: #000;
height: 100vh;
max-width: 250px;
width: 0%;
overflow: hidden;
z-index: 22;
padding-top: 60px;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: 0.2s all;
transition: 0.2s all; }
#responsive-nav.active {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
width: 100%; }
.main-nav {
margin: 0px;
float: none; }
.main-nav > li {
display: block;
float: none; }
.main-nav > li + li {
margin-left: 0px; }
.main-nav > li > a {
padding: 15px;
color: #FFF; } }
/*=========================================================
RESPONSIVE
===========================================================*/
@media only screen and (max-width: 991px) {
#top-header .header-links.pull-left {
float: none !important; }
#top-header .header-links.pull-right {
float: none !important;
margin-top: 5px; }
.header-logo {
float: none;
text-align: right; }
.header-logo .logo {
display: inline-block; }
#product-imgs {
margin-bottom: 60px;
margin-top: 15px; }
#rating {
text-align: center; }
#reviews {
margin-top: 30px;
margin-bottom: 30px; } }
@media only screen and (max-width: 767px) {
.section-title .section-nav {
float: none;
margin-top: 10px; }
.section-tab-nav li {
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
[class*='col-xs'] {
width: 100%; }
.store-grid {
float: none;
margin-top: 10px; }
.store-pagination {
float: none;
margin-top: 10px; } }
/*# sourceMappingURL=main.css.map */
Le problème, le code fonctionne bien (je suis en locale) mais dès que je clique sur le menu langue, video, exercices...le header décale vers la droite et revient à sa position quand je clique sur home. je ne comprends pas ce qui se passe.
Merci d'avance
