Garder ma navbar en blanc

20 janvier 2020 à 11:37:53

Bonjour,

Je suis débutant et j'aimerai garder ma Navbar en blanc tout en gardant l'image de fond en dessous d'elle mais je ne sais pas comment faire. Merci pour votre aide.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Carrera2000</title>
		<link rel="stylesheet" href="connexion.css">
	</head>
	<body>
		<header>
			<h1>Carrera 2000</h1>
			<nav>
				<a href="#" class="active">ACCUEIL</a>
				<a href="#contact">CONTACT</a>
				<a href="./connexion.php">CONNEXION</a>
            </nav>
        </header>

<?php
session_start();

$bdd = new PDO('mysql:host=127.0.0.1;dbname=carrera 2000', 'root', '');

if(isset($_POST['formconnexion'])) {
   $mailconnect = htmlspecialchars($_POST['mailconnect']);
   $mdpconnect = sha1($_POST['mdpconnect']);
   if(!empty($mailconnect) AND !empty($mdpconnect)) {
      $requser = $bdd->prepare("SELECT * FROM membres WHERE mail = ? AND motdepasse = ?");
      $requser->execute(array($mailconnect, $mdpconnect));
      $userexist = $requser->rowCount();
      if($userexist == 1) {
         $userinfo = $requser->fetch();
         $_SESSION['id'] = $userinfo['id'];
         $_SESSION['pseudo'] = $userinfo['pseudo'];
         $_SESSION['mail'] = $userinfo['mail'];
         header("Location: index.html?id=".$_SESSION['id']);
      } else {
         $erreur = "Mauvais mail ou mot de passe !";
      }
   } else {
      $erreur = "Tous les champs doivent être complétés !";
   }
}
?>
<html>
   <head>
      <style type="text/css">

      body {
              background-color: #fdfefe;
       }
       form, h2{
             color: #000000;
             margin-top: 30px;
             width:100%;
             text-align: center;
       }
       input {
             border: 2px solid #000000;
             border-radius: 4px;
       }
       .bouton {
          color: #000000;
}

       }
   </style>

      <title>Carrera 2000</title>
      <meta charset="utf-8">
   </head>
   <body>   
   <div align="center">
         <h2>Connexion</h2>
         <br /><br />
         <form method="POST" action="">
            <input type="email" name="mailconnect" placeholder="Mail" />
            <input type="password" name="mdpconnect" placeholder="Mot de passe" />
            <br /><br />
            <input type="submit" name="formconnexion" value="Se connecter !" class="bouton" />
         </form>
         <?php
         if(isset($erreur)) {
            echo '<font color="red">'.$erreur."</font>";
         }
         ?>
      </div>
   </body>
</html>

body{
    margin:0;
    background-image: url("porsche-connexion.jpg");
	background-size:100%;
	height:500px;
}

header{
	display:flex;
	align-items:center;
	width:900px;
	margin:auto;
}
header h1{
	color:#393939;
}
header nav{
	flex:1;
	text-align:right;
}
header a{
	margin:0 10px;
	text-decoration:none;
	color:black;
}
header a:hover{
	color:#d5001c;
}

aside h2{
	margin:0;
	padding-top:10px;
	color:white;
	font-size:40px;
	text-align:right;
	margin-right:50px;
}

Mamashi

20 janvier 2020 à 12:01:11

Salut,

Malheureusement, tu ne montres ni le résultat que tu obtiens actuellement ni un exemple de ce que tu aimerais avoir. Tu veux une navbar blanche mais que l'on voit l'image de dessous que tu as mis sur le body ? Si c'est le cas tu n'as rien a faire ton body est plus bas que ta nav.

Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité

Tritix

20 janvier 2020 à 12:06:09

Voila comment j'aimerai que sa sois désolé d'avoirs oublie.

Mamashi a écrit:

Salut,

Malheureusement, tu ne montres ni le résultat que tu obtiens actuellement ni un exemple de ce que tu aimerais avoir. Tu veux une navbar blanche mais que l'on voit l'image de dessous que tu as mis sur le body ? Si c'est le cas tu n'as rien a faire ton body est plus bas que ta nav.

Mehddii

20 janvier 2020 à 13:03:43

Bonjour,

Je n'ai pas du tout compris ton code, tu commence avec une balise html pourquoi pas

Puis une balise head d'acc

Puis après une balise body, ok

Puis tout d'un coup tu ouvre une nouvelle balise html pour ouvrir une nouvelle balise head

Pour la fermer et puis ensuite rouvrir une balise body

Je pense que tu devrais revoir le cours HTML/CSS à mon avis

Comme ça tu pourrais rencontrer des soucis avec les navigateurs lors de l'affichage de ta page c'est normal !

-
Edité par Mehddii 20 janvier 2020 à 13:06:07

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Mamashi

20 janvier 2020 à 13:27:32

Mehddii a écrit:

Bonjour,

Je n'ai pas du tout compris ton code, tu commence avec une balise html pourquoi pas

Puis une balise head d'acc

Puis après une balise body, ok

Puis tout d'un coup tu ouvre une nouvelle balise html pour ouvrir une nouvelle balise head

Pour la fermer et puis ensuite rouvrir une balise body

Je pense que tu devrais revoir le cours HTML/CSS à mon avis

Comme ça tu pourrais rencontrer des soucis avec les navigateurs lors de l'affichage de ta page c'est normal !

-
Edité par Mehddii il y a 16 minutes

Salut,

Je me suis dis pareil au début mais si tu regardes bien, il a donné deux pages web qu'il a concaténer ensemble pour faire plus court.

Facile à voir il ouvre une session en php du coup le session_start c'est le début de sa page de connexion. C'est pas très clair de sa part mais ça arrive.

Du coup en gros voici un exemple minimal, j'ai laissé le header à son état initial (bloc = 100% de largeur de base) avec un background-color blanc. Du coup pas de problème le background rouge de la page (qui représente ton image est bien derrière).

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carrera2000</title>

    <style>
        body {
            margin: 0;
            padding: 0;

            box-sizing: border-box;
        }

        .page {
            min-height: 100vh;

            background-color: red;
            
            overflow: auto;
        }

        .site-header {
            background-color: #fff;

            overflow: auto;
        }
    </style>
</head>
<body>
    <!-- La j'ai utilisé cette div pour mettre mon image de fond pour pas altérer le body (c'est un choix personnel mais en général on évitge de trop toucher au body, c'est une bonne pratique peu respecté) -->
    <div id="page" class="page">
        <!-- header est un dérivé de div (bloc) = 100% de la largeur de base en gros tu n'as rien à faire pour qu'il passe au dessus de l'image, c'est en ajoutant du css que tu as altérer ce qui fonctionne de base -->
        <header class="site-header"> 
            <p class="site-title">Titre du site</p>
            <a href="">Accueil</a>
            <a href="">Contact</a>
            <a href="">Connexion</a>
        </header>
        <main class="main-container">
            <header class="main-header">
                <h1 class="main-title">Tite de la page</h1> <!-- C'est toujours mieux d'avoir un titre h1 de page précis,
                avec une valeur ajouté, le nom de ton site en général il sera dans ton title, si tu le mets en h1 sur toutes tes pages,
                aucun intérêt. -->
            
            </header>
            <section class="main-content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia fugit vel at quibusdam est provident molestias, ullam accusantium eveniet neque dicta expedita nulla sed temporibus obcaecati doloribus labore reiciendis explicabo.</p>
            </section>
        </main>
    </div>
</body>
</html>

Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité

Mehddii

20 janvier 2020 à 13:37:45

Oui en effet tu as raison, il aurait dû au moins le préciser, puis il n'y a pas de fermeture ni du </html> ni du </body> sur la première page, ce qui m'a porté à confusion.

-
Edité par Mehddii 20 janvier 2020 à 13:38:11

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...