J'ai cherché des réponses sur de nombreux forums et consulté environ 50 liens Google, mais je n'ai encore rien trouvé qui fonctionne...
Mon CSS n'apparaît pas sur mon HTML.
Mon code fonctionnait bien jusqu'à ce que j'y ajoute un conteneur Flexbox et 2 Flexbox.
Je teste toujours mon code pour savoir que Flexbox fonctionne en dehors de ce fichier HTML spécifique.
De plus, j'ai remarqué que mon CSS n'était pas mis à jour sur "Inspect Element" sur localhost/#my_file#.
Cela s'est produit dans le passé et je l'ai résolu en modifiant l'emplacement du fichier et en le replaçant à nouveau vers l'ancien emplacement. (Je ne sais pas comment ça marche).
Quoi qu'il en soit, si je copie et colle le tableau de mise à jour CSS sur la page "Inspecter l'élément", je peux très bien voir ma flexbox.
Donc, je soupçonnais que c'était à cause d'un bug dans mon CSS, mais je n'en étais pas sûr, alors je l'ai même vérifié : https://jigsaw.w3.org/css-validator/#validate_by_input
Une seule erreur mais je l'ai vérifiée dans tout le fichier CSS et 1) je ne l'ai pas trouvée 2) J'ai supprimé tout ce qui ressemblait le plus à l'erreur et ça ne marche toujours pas.
Évidemment, je ne pense pas que cela ait quelque chose à voir avec l'erreur car cela fonctionne très bien avec "l'inspection de l'élément".
Je sais aussi que je fais des erreurs d'inattention, des erreurs stupides, alors... tu sais.
J'apprends actuellement, si vous trouvez des bugs dans mon code, faites-le moi savoir !
HTML :
<!DOCTYPE html>
<html lang="fr">
<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>Darki0ni-s-website</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet" type="text/css">
<link href="styles/portfolio.css" rel="stylesheet" type="text/css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
function validateForm()
{
var name = document.forms["myForm"]["name"];
var email = document.forms["myForm"]["email"];
var message = document.forms["myForm"]["message"];
if (name.value == "")
{
document.getElementById('errorname').innerHTML="Please enter a valid name";
name.focus();
return false;
}else{
document.getElementById('errorname').innerHTML="";
}
if (email.value == "")
{
document.getElementById('erroremail').innerHTML="Please enter a valid email address";
email.focus();
return false;
}else{
document.getElementById('erroremail').innerHTML="";
}
if (email.value.indexOf("@", 0) < 0)
{
document.getElementById('erroremail').innerHTML="Please enter a valid email address";
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
document.getElementById('erroremail').innerHTML="Please enter a valid email address";
email.focus();
return false;
}
if (message.value == "")
{
document.getElementById('errormsg').innerHTML="Please enter a valid message";
message.focus();
return false;
}else{
document.getElementById('errormsg').innerHTML="";
}
return true;
}
</script>
</head>
<body>
<script>
$(document).ready(function () {
$("a").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function () {
window.location.hash = hash;
});
}
});
});
</script>
<header class="header">
<article id="accueil"></article>
<div id="header">
<div id="background">
<article style="margin-bottom: 175px;" ><br></article>
<h1>MY NAME</h1>
<h4>___________________</h4>
<h2>Développeuse web débutante</h2>
</div>
</div>
</header>
<ul class="menu">
<li>
<a href="#a-propos">À Propos</a>
</li>
<li>
<a href="#competences">Compétences</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#accueil" class="actif">𑁔</a>
</li>
</ul>
<p id="a-propos"></p>
<h3>À Propos de moi</h3>
<div class="container">
<div class="flexbox-left">
<p>Qui suis-je ?</p>
<p>blablabla </p>
</div>
<div class="flexbox-right">
<p>blablabla <br>
blabla <br>
</p>
</div>
</div>
<p id="competences"></p>
<h3>Compétences</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Lectus magna fringilla urna.</p>
<p id="contact"></p>
<h3>Contact</h3>
<div class="container">
<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="post">
<table class="form-style">
<tr>
<td>
<label for ="name">
Your name <span class="required">*</span>
</label>
</td>
<td>
<input type="text" name="name" class="long" id="name"/>
<span class="error" id="errorname"></span>
</td>
</tr>
<tr>
<td>
<label for ="email">
Your email address <span class="required">*</span>
</label>
</td>
<td>
<input type="email" name="email" class="long" id="email"/>
<span class="error" id="erroremail"></span>
</td>
</tr>
<tr>
<td>
<label for ="message">
Message <span class="required">*</span>
</label>
</td>
<td>
<textarea name="message" cols="50" rows="10" id="message"></textarea>
<span class="error" id="errormsg"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</div>
<p>Bonjour et bienvenue sur mon site web dévellopé from scratch, il est encore simple mais il représente mon avancée en terme de dévellopement Front End. </p>
<footer>
</footer>
</body>
</html>
CSS :
html {
margin: 0px 0px;
padding: 0px 0px;
background-color: #cab4cb;
}
body {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width:auto;
height: auto;
margin: 0px 0px;
background-color: #f15015;
padding: none;
border: none;
}
header {
overflow: hidden;
padding: 0px 0px;
height:auto;
background-image:url(../images/6.jpg);
background-position-y: top;
background-position:center;
background-size: cover;
border:none;
width:auto;
margin:0px 0px;
position:static;
}
.background {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
background-blend-mode: darken;
height: 560px;
width: auto;
border: none;
padding: 25px 0px;
margin: 0px 0px;
background-repeat: repeat;
background-size: cover;
}
p {
margin-left: 15%;
margin-right: 15%;
padding-top: 2%;
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
h1 {
text-align: center;
font-family: 'Josefin Sans', sans-serif;
font-size: 45px;
font-weight: lighter;
margin: 0px 0px;
padding: 0px 0px;
color: #dadada9a;
text-shadow: 2px 2px 1px #0f0f0f95;
position:relative;
}
h2 {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
font-size: 27px;
font-weight: lighter;
margin: 0px 0px;
padding: 30px 0px;
color: #cdcdcd9a;
text-shadow: 2px 2px 1px #0f0f0f95;
}
h3 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
font-weight:normal;
}
h4 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
font-weight:normal;
color: #cdcdcd9a;
}
img {
height: auto;
object-fit: cover;
display: block;
margin: 0 auto;
}
footer{
padding:25px 0px;
background-color:#cdcdcd9a;
text-align:center;
}
.menu {
display:flex;
background-color: #dddd;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
justify-content: space-around;
}
.menu li {
list-style-type: none;
float: left;
display: inline;
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
float: right;
}
.menu a {
display: block;
padding: 8px;
display: block;
color: rgb(120, 120, 120);
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 1s ;
}
.menu a.actif {
background-color: rgba(120, 120, 120, 0.428);
color: #dddd;
font-size: 16px;
}
.menu a:hover,
.menu a:hover.actif{
background-color: rgb(31, 31, 31);
}
.form-style {
margin:10px auto;
width: 400px;
padding: 20px 12px 10px 20px;
font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style td {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style .required{
color:rgb(255, 0, 128);
}
.form-style input[type=submit], .form-style input[type=reset]{
background: #cdcdcd9a;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style input[type=submit]:hover, .form-style input[type=reset]:hover{
background: #cdcdcd9a;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.form-style .field-textarea{
height: 100px;
}
.form-style input[type=text],
.form-style input[type=email],
textarea{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
.form-style .long{
width: 100%;
}
.form-style input[type=text]:focus,
.form-style input[type=email]:focus,
.form-style textarea:focus{
-moz-box-shadow: 0 0 8px #cdcdcd9a;
-webkit-box-shadow: 0 0 8px #cdcdcd9a;
box-shadow: 0 0 8px #cdcdcd9a;
border: 1px solid #cdcdcd9a;
}
.error{
color: #D8000C;
background-color: #FFBABA;
}
.container {
display: flex;
flex-direction: row;
margin-left:200px;
margin-right:200px;
margin-top:100px;
margin-bottom :100px;
background-color: rgb(110, 76, 110);
justify-content:center;
}
.flexbox-left {
flex: 100%;
padding: 25px 0;
width:auto;
height:auto;
text-align: center;
border:2px solid rgb(85, 21, 73);
background-color: rgb(254, 199, 255);
}
.flexbox-right {
flex: 100%;
padding: 25px 0;
width:auto;
height:auto;
text-align: center;
border:2px solid rgb(85, 21, 73);
background-color: rgb(254, 199, 255);
}
.a-propos {
padding: 30px;
margin: 0px;
}
.competences {
padding: 30px;
margin: 0px;
}
.contact {
padding: 30px;
margin: 0px;
}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Appuyez sur Ctrl+Shift+R ou Ctrl+F5Browser
pour recharger votre fichier de ressources (il semble que votre navigateur soit en cache)