Partage

h1 non affecté par css

h1 ne prend pas en compte ces paramètres css.

Sujet résolu

28 février 2024 à 21:03:19

Bonjour, J'aurais beoin d'aide en ce qui concerne mon h1, qui ne prend pas en compte ces paramètres css qui sont heading et container

Partie html

<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">
            <link rel="stylesheet" href="MyMiaou.css">
        </head>

        <body>
                <div class="container">
                    <div class="overlay">
                      <img class="img1" src="img/img test.jpg">
                      <img class="img2" src="img/white.jpg">
                      <img class="img3" src="img/Cat1.jpg">
                      <h1 class="heading">Find your friend to have a good day everyday</h1>
                    </div> 
                </div>
  
            <nav class="navbar">
                <div class="logo">
                  <img src="img/Logo .png" />
                </div>
                <div class="icon">
                    <span class="toggle">☰</span>
                </div>
                <ul class="list-item">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Facebook</a></li>
                  <li><a href="#">Twitter</a></li>
                  <li><a href="#">Categorys</a></li>
                  <li><a href="#">Contact us</a></li>
                  <li><a href="#">About us</a></li>
                </ul>
              </nav>
            <div class="footer">
              <ul>
                <li>Contact</li>
                <li>Makhoul Joe Mam adress:   téléphone: </li>
                <li>Rigaud Timothée adresse mail:   téléphone:</li>
                <li>GoneBerg Allisa adresse mail:   téléphone</li>
              </ul>
            </div>
          
            
        </body>
    </html>

La partie Css

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    font-family: arial, tahoma;
    list-style: none;

}
.container{
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay{
    background-color: rgba(0, 0, 0, 0.3);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    33%  {
        opacity: 0;
    }
    67%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.img1
{
    width: 100%;
    height: auto;
    

    position: absolute;
    top:0;
    left: 0;    
    background-size: cover;
    animation: fade 9s ease-in-out infinite alternate;
}
.img2
{
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top:0;
  left: 0;
  background-size: cover;
  animation: fade 9s ease-in-out infinite alternate;
}
.img3
{
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  top:0;
  left: 0;
  background-size: cover;
  animation: fade 9s ease-in-out infinite alternate;
}

img:nth-of-type(1){
    animation-delay: 0s;
}
img:nth-of-type(2){
    animation-delay: 3s;
}
img:nth-of-type(3){
    animation-delay: 6s;
}

.heading{
    font-size: 50px;
    color: #fff;
    position: relative;
    z-index: 100;
}
.navbar {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 80px;
    background-color: #222;
    border-bottom: 1px solid #555
  }
  .logo {
    padding: 10px;
    width: auto;
    float: left;
  }
  .logo img {
    height: 55px;
  }
  .list-item {
    float: right;
    margin-right: 25px;
    margin-top: 17px;
  }
  .list-item li {
    float: left;
    padding: 13px 13px;
    font-size: 18px;
    border-radius: 3px;
    transition: all .7s ease-in-out;
  }
  .list-item li a {
    color: #EEE;
  }
  .list-item li:hover {
    background-color: brown;
  }
  .icon {
    display: none;
  }
  .toggle {
    float: right;
    margin: 20px;
    color: #EEE;
    font-size: 30px;
    border: 1px solid #EEE;
    padding: 0px 5px;
    border-radius: 4px;
    cursor: pointer;
  }
  @media (max-width: 1309px) {
    .icon {
      display: block;
      width: 100%;
      height: 80px;
      background-color: #111;
      border-bottom: 1px solid #444;
    }
    .list-item {
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      top: -4px;
      background-color: #222;
      display: none;
    }
    .list-item li { 
      text-align: center;
      display: block;
      border-bottom: 1px solid #333;
      float: none;
    }
  }
  .footer{ 
    position: absolute;
    z-index: 100;     
    text-align: center;    
    bottom: 0px; 
    width: 100%;
    background: rgba(228, 141, 11, 0.952);
    color: white
}

-
Edité par TimRig 1 mars 2024 à 19:52:46

AbcAbc6

1 mars 2024 à 19:13:40

Bonjour, Merci d'indiquer un titre de sujet en rapport avec votre problématique.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Problème h1)

Liens conseillés

Bonjour, évitez les titres de sujets avec "problème", si vous postez on se doute que vous avez un problème, inutile de l'indiquer dans le titre cela n'apporte rien de plus quant au contenu du sujet.

Passer votre code HTML au validateur pour voir et corriger vos erreurs => https://validator.w3.org

La balise img ne sort jamais sans sont attribut alt obligatoire.

Il manque un point d’exclamation avant le doctype. Les deux premières ligne devrait être :

<!DOCTYPE html>
<html lang="fr">

<div class="footer"> devrait être <footer class="footer"> et également présence d'une balise <header>.

Pour le CSS :

Pas la peine de péter toutes les marges pour tous les éléments surtout pour ceux qui n'en ont pas. Donc pour ceci c'est NON.

* {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;

        }

Reset au cas par cas, ou utilisez une feuille de style par défaut de type normalize .

Lire : https://www.alsacreations.com/astuce/lire/36-la-technique-du-reset-css.html

Même réflexion pour liste-style et text-decoration, cela ne s'applique pas à tous les éléments.

Les class .img2 et .img3 sont identique, cela est inutile c'est une duplication de code. ("Don't repeat yourself" (DRY) ) Pour quelles raisons une propriété de background pour ces class alors que l'image est insérée avec la balise <img> (contenu remplacer)?

Pas de width: 100% sur un élément positionné, utilisez right: 0; left: 0; pour que celeu-ci prenne toute la longueur. Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

La propriété box-sizing est dupliquée et n'a plus besoin d'être préfixée Voir : https://caniuse.com/css3-boxsizing

La propriété font-family se termine par une famille de police générique.

Pour le problème de positionnement du titre <h1>, soit un margin-top pour le faire descendre puisqu'il est en dessous d'un autre élément, soit le sortir du bloc overlay

Bon dev ,

TimRig

1 mars 2024 à 20:24:12

AbcAbc6 a écrit:

Bonjour, Merci d'indiquer un titre de sujet en rapport avec votre problématique.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Problème h1)

Liens conseillés

Charte de bonne conduite

Règles générales du forum

Bonjour, évitez les titres de sujets avec "problème", si vous postez on se doute que vous avez un problème, inutile de l'indiquer dans le titre cela n'apporte rien de plus quant au contenu du sujet.

Passer votre code HTML au validateur pour voir et corriger vos erreurs => https://validator.w3.org

La balise img ne sort jamais sans sont attribut alt obligatoire.

Il manque un point d’exclamation avant le doctype. Les deux premières ligne devrait être :
<!DOCTYPE html>
<html lang="fr">
<div class="footer"> devrait être <footer class="footer"> et également présence d'une balise <header>.

Pour le CSS :

Pas la peine de péter toutes les marges pour tous les éléments surtout pour ceux qui n'en ont pas. Donc pour ceci c'est NON.
* {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;

        }
Reset au cas par cas, ou utilisez une feuille de style par défaut de type normalize .

Lire : https://www.alsacreations.com/astuce/lire/36-la-technique-du-reset-css.html

Même réflexion pour liste-style et text-decoration, cela ne s'applique pas à tous les éléments.

Les class .img2 et .img3 sont identique, cela est inutile c'est une duplication de code. ("Don't repeat yourself" (DRY) ) Pour quelles raisons une propriété de background pour ces class alors que l'image est insérée avec la balise <img> (contenu remplacer)?

Pas de width: 100% sur un élément positionné, utilisez right: 0; left: 0; pour que celeu-ci prenne toute la longueur. Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

La propriété box-sizing est dupliquée et n'a plus besoin d'être préfixée Voir : https://caniuse.com/css3-boxsizing

La propriété font-family se termine par une famille de police générique.

Pour le problème de positionnement du titre <h1>, soit un margin-top pour le faire descendre puisqu'il est en dessous d'un autre élément, soit le sortir du bloc overlay

Bon dev ,

Bonsoir, Merci pour les correstions.
Sinon pour répondre à votre question, j'utilise 3 class image et non la balise img pour ne pas affecter le logo.

Et la solution que vous m'avez donné pour h1 ne fonctionne pas, il est toujours en bas de l'écran juste au dessus du footer et non centré au milieux de l'écran.

Merci encore pour vos corrections.

AbcAbc6

1 mars 2024 à 21:09:57

Bonsoir, il n'est pas nécessaire de citer l'entièreté de mon message, citer les parties utiles.

>> j'utilise 3 class image et non la balise img pour ne pas affecter le logo.

                      <img class="img1" src="img/img test.jpg">
                      <img class="img2" src="img/white.jpg">
                      <img class="img3" src="img/Cat1.jpg">

Ici il s'agit bien de trois balises image (<img>) auxquelles est associer 3 class CSS différentes.

>>Et la solution que vous m'avez donné pour h1 ne fonctionne pas

Si testée avant de poster. Décrire "ne fonctionne pas"....

>> et non centré au milieux de l'écran.

Vous ne l'avez pas précisé précédemment!!

Avec la deuxième proposition j'ai le visuel suivant: (je me demande si les positions absolute sont nécessaire?).

    <div class="container">
        <div class="overlay">
            <img class="img1" src="img/img test.jpg">
            <img class="img2" src="img/white.jpg">
            <img class="img3" src="img/Cat1.jpg">
            
        </div>
        <h1 class="heading">Find your friend to have a good day everyday</h1>
    </div>

-
Edité par AbcAbc6 1 mars 2024 à 21:11:01