Dev Faq
0
votes

Pourquoi la barre de navigation pour mon site Web est-elle bloquée au milieu de la page?

Donc, mon site Web a des pages différentes pour cliquer sur le bouton et sur la page d'accueil tout va bien. J'ajoute de cette page actuellement et une fois que j'ai ajouté les cartes Pop Up, ma barre NAV est allé au milieu de l'écran pour une raison quelconque. Je suis complètement nouveau pour coder, désolé si c'est une solution facile. Toute aide serait appréciée.

Voici un exemple: Entrez la description de l'image ici p>

p> 

<div class="container">
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>

            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div clashttps://stackoverflow.com/posts/63625721/edit#s="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div>

0 commentaires

3 Réponses :

0
votes

ont essayé de supprimer "Justify-Content: espace entre-toi;"?

1 commentaires

Stackoverflow Réponse n'a pas de rembourrage à droite dans le navigateur mobile.

0
votes

Bienvenue sur Stackoverflow,

Eh bien, vous êtes presque là-bas, laissez-moi réécrire votre code un peu; p>

p> 

<div class="container">
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>

            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex">
    <div class="card">
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div class="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div>
</div>

2 commentaires

Oui merci beaucoup, c'est exactement ce que je cherchais! Passé comme les deux dernières heures, essayez de le comprendre, vous avez été un tel soulagement. Passe une bonne journée!

Assurez-vous que si ma réponse est la bonne pour vérifier la marque au vert et la mise en route aussi. Ma réputation grandira par ça :). Heureux que cela ait fonctionné BTW. Codage heureux;)

0
votes

Désolé de gagner du temps. Je l'ai vérifié sur la mise en page mobile dans le navigateur webkit Safari. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Harvard</title>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles1.css">
<style>
body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    box-sizing: border-box;
  }
.container {
width: 100vw;
height: 100vh;
display: block;
position: relative;
overflow: hidden;
overflow: scroll;
}
.wrapper {
width: 1200px;
padding: auto;
padding-top: 9vh;
display: flex;
flex-direction: row;
position: relative;
justify-content: center;
box-shadow: inset 0 0 5px red;
}
/* BOX-SHADOW is only for layout guide */
.nav-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5vh;
    position: absolute;
    top: 0px;
    left: 0;
    box-shadow: inset 0 0 5px purple;
}

.right-side, .left-side {
    display: flex;
    justify-content: space-around;
    width: 186px;
    box-shadow: inset 0 0 5px green;
}

.nav-wrapper > .left-side > div {
    font-size: 0.9m;
    text-transform:uppercase;
}

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

.nav-link-wrapper a:hover {
    color: black;
}

.active-nav-link {
    border-bottom: 1px solid black;
}

.active-nav-link a{
    color: black;
}


.card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
  
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: roboto;
    text-align: center;
    
  
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  .card-image {
    grid-area: image;
    background: url("images/princeton1.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }
  
  .card-text {
    grid-area: text;
    margin: 25px;
  }
  .card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
  }
  .card-text p {
    color: grey;
    font-size:15px;
    font-weight: 300;
  }
  .card-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
  }
  .card-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
  }
  .card-stats .value{
    font-size:22px;
    font-weight: 500;
  }
  .card-stats .value sup{
    font-size:12px;
  }
  .card-stats .type{
    font-size:11px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  }
  
  /*card2*/
  .card-image.card2 {
    background: url("img2.jpg");
    background-size: cover;
  }
  .card-text.card2 .date {
    color: rgb(255, 77, 7);
  }
  .card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
  }
  .card-stats.card2 {
    background: rgb(255, 77, 7);
  }
  /*card3*/
  .card-image.card3 {
    background: url("img3.jpg");
    background-size: cover;
  }
  .card-text.card3 .date {
    color: rgb(0, 189, 63);
  }
  .card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
  }
  .card-stats.card3 {
    background: rgb(0, 189, 63);
  }
</style>
</head>
<body>

<span class="container">
<span class="wrapper">


        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>
            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>

<div class="card"><!--card-->
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div><!--card-->
      <div class="card"><!--card-->
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div><!--card-->
      <div class="card"><!--card-->
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div class="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div><!--card-->
</span>
</span>
</body>
</html>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor