Почему маржа на вершине не изменится? - PullRequest
Новая
       16

Почему маржа на вершине не изменится?

0 голосов
/ 03 июля 2018

Я пытаюсь редактировать поля в ссылках навигационной панели, однако при изменении поля ничего не происходит. Кто-нибудь знает, почему это происходит? 

/* Whole Page or not one specific section */
main {
  text-align: center;
}

body {
  max-width: 100%;
  height: 100vh;
  margin: 0px 0px 0px 0px;
  color: #C2D3CD;
}

.topbar, nav {
  background-color: #847E89;
}

/* Top Bar */
#temp-logo, #donate-top {
  display: inline-block;
}

#donate-top {
  float: right;
  padding-right: 2%;
  padding-left: 2%;
  background-color: #C2D3CD;
  color: #847E89;
  height: 10vh;
  cursor: pointer;
}

.donate-name {
  padding-top: 4vh;
  background-color: #C2D3CD;
  border: none;
  cursor: pointer;
}

#temp-logo {
  padding-top: 0vh;
  margin-left: 2%;
  font-size: 22px;
}

.topbar {
  display: block;
  border-bottom: solid 1px #C2D3CD;
  height: 10vh;
}

/* Nav Bar */
nav {
  text-align: center;
  height: 7vh;
}

.link, link:visited {
  color: #C2D3CD;
  text-decoration: none;
}

#mission-link, #about-link, #donations-link, #contact-link {
  margin-top: 5%;
}

/* First Page */
#home-screen {
  background-image: url(Images/beach-background-1-NEW.jpg);
  height: 80vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.text {
  padding-top: 30vh;
}

/* Gallery */
.img {
  width: 20vw;
  height: 20vw;
}

.desc {
  display: inline-block;
  position: relative;
  margin: 1%;
}

.desc:hover img {
  filter: blur(1.5px) brightness(60%);
  transition: 0.3s;
  box-shadow: 0 0 10px gray;
}

.desc :not(img) {
  position: absolute;
  top: 37%;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #FFF;
  opacity: 0;
  transition: 0.3s;
}

.desc:hover :not(img) {
  opacity: 1;
}

.img:hover {
  transform: scale(1.1);
}
<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    <title>Conejo Teen Organization</title>
  </head>
  <body>
    <!-- Top Bar -->
    <div class="topbar">
      <!-- Get logo ASAP -->
      <p id="temp-logo"><em>Conejo Teen Organization</em></p>
      <a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
    </div>
    <!-- Nav -->
    <nav> 
      <a id="mission-link" class="link" href="#">Mission</a>
      <a id="about-link" class="link" href="#">About Us</a>
      <a id="donations-link" class="link" href="#">What We Do</a>
      <a id="contact-link" class="link" href="#">Contact</a>
    </nav>
    <!-- Main -->
    <main>
      <!-- First Section -->
      <section id="home-screen">
       <article class="text">
        <h1 id="h1">Conejo Teen Organization</h1>
        <p id="h1-desc">Helping California teens in need since 2017</p>
        <button id="donate-home" class="donate">Donate Now!</button>
        </article>
      </section>
      <!-- Our Mission -->
      <section id="mission">
        <h2 id="mission-h2">Our Mission</h2>
        <p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
      </section>
      <!-- Image Gallery (images of projects) -->
      <section id="gallery">
        <h2 id="images">Gallery</h2>
        <!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
        <div class="row1 row">
          <!-- Image 1 -->
          <div class="desc-1 desc">
            <img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 2 -->
          <div class="desc desc-2">
            <img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 3 -->
          <div class="desc desc-1">
            <img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer>
      <p id="copyright">&copy 2018 Conejo Teen Organization</p>
      <p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
    </footer>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Добавить display: inline-block как: 

#mission-link, #about-link, #donations-link, #contact-link {
  margin-top: 5%;
  display: inline-block;
}

Я проверил ваш код удалить: height: 10vh; из topbar класс

0 голосов
/ 03 июля 2018

Вы пытаетесь применить margin-top к inline элементам, которые вы не можете сделать, так как это нарушит ход страницы: 

#mission-link, #about-link, #donations-link, #contact-link {
  display: inline-block; /* Try making them inline block */
  margin-top: 5%;
}

Попробуйте сделать ссылки inline-block.

...