html - 试图从我的页面中删除空白

问题描述

当我正在制作我的第一个网站时，我的页面中有这个空白我试图删除但我不能，我尝试了位置和一些设置但它似乎不起作用，我什至编辑了一些我已经写代码。任何帮助都会很好。谢谢

我现在有 2 个文件 1 个用于 html 和 1 个用于 css 这是我的 html 文件

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="Template_Header_Footer.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <title>Header Last version (sans responsive)</title>
</head>

<body>
  <header>
    <picture>
      <source srcset="images/Logo.png" media="(max-width: 640px)">
      <source srcset="images/Logo.png" media="(max-width: 1500px)">
      <img id="logo" src="images/Logo.png" style"width:40%;">
    </picture>
    <picture>
      <source srcset="images/paysage.jpg" media="(max-width: 640px)">
      <source srcset="images/paysage.jpg" media="(max-width: 1500px)">
      <img id="paysage" src="images/paysage.jpg" style"width:40%;">
    </picture>
    <p>Syndicat CTFC 34</p>
    <center>
      <h1>Syndicat Constructif, Partenaire du Dialogue Social<h1>
    </center>
    <section class="navigation">
      <div class="nav-container">
        <nav>
          <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
          <ul class="nav-list">
            <li>
              <a href="#!">Connaitre la CFTC</a>
              <ul class="nav-dropdown">
                <li><a href="#!">Histoire</a></li>
                <li><a href="#!">Valeurs</a></li>
                <li><a href="#!">Identité</a></li>
              </ul>
            </li>
            <li>
              <a href="#!">Syndicat CFTC-FPT 34</a>
              <ul class="nav-dropdown">
                <li><a href="#!">Organisation</a></li>
                <li><a href="#!">Accueil</a></li>
                <li><a href="#!">Rôle et définition</a></li>
              </ul>
            </li>
            <li>
              <a href="#!">Vie Professionnelle</a>
              <ul class="nav-dropdown">
                <li><a href="#!">Formation</a></li>
                <li><a href="#!">Statut</a></li>
                <li><a href="#!">Carrière</a></li>
                <li><a href="#!">Temps de Travail</a></li>
                <li><a href="#!">Congés</a></li>
              </ul>
            </li>
            <li>
              <a href="#!">Vie Pratique</a>
              <ul class="nav-dropdown">
                <li><a href="#!">Action Logement</a></li>
                <li><a href="#!">Pensions Alimentaires impayées</a></li>
                <li><a href="#!">Prime d'activité</a></li>
                <li><a href="#!">Apprentissage</a></li>
              </ul>
            </li>
            <li><a href="#!">Activités</a></li>
            <li><a href="#!">Actualités</a></li>
            <li><a href="#!">Presse</a></li>
            <li>
              <a href="#!">Adhésion</a>
              <ul class="nav-dropdown">
                <li><a href="#!">Les + adhérents</a></li>
                <li><a href="#!">Espace adhérents</a></li>
                <li><a href="#!">Nous rejoindre</a></li>
              </ul>
            </li>
            <li>
              <a href="#!">Coordonnées</a>
              <ul class="nav-dropdown">
                <li><a href="#!">Syndicat CFTC-FPT 34</a></li>
                <li><a href="#!">UD34</a></li>
                <li><a href="#!">Fédération CFTC FPT</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </section>
  </header>
</body>

<script type="text/javascript">
  (function($) { // Begin jQuery
    $(function() { // DOM ready
      // If a link has a dropdown, add sub menu toggle.
      $('nav ul li a:not(:only-child)').click(function(e) {
        $(this).siblings('.nav-dropdown').toggle();
        // Close one dropdown when selecting another
        $('.nav-dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
      });
      // Clicking away from dropdown will remove the dropdown class
      $('html').click(function() {
        $('.nav-dropdown').hide();
      });
      // Toggle open and close nav styles on click
      $('#nav-toggle').click(function() {
        $('nav ul').slideToggle();
      });
      // Hamburger to X toggle
      $('#nav-toggle').on('click', function() {
        this.classList.toggle('active');
      });
    }); // end DOM ready
  })(jQuery); // end jQuery
</script>

</html>

这就是我的 CSS 文件：

@font-face {
  font-family: "oswald";
  src: url("fonts\oswald.regular.ttf");
  font-family: "lato";
  src: url("fonts\Lato-Regular.ttf");
  font-family: "playfairdisplay";
  src: url("fonts\PlayfairDisplaySC-Regular.otf");
}

.navigation {
  height: 70px;
  background: #028893;
}

.brand a, .brand a:visited {
  color: #fff;
  text-decoration: none;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
}

nav {
  float: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 10px;
  line-height: 70px;
  background: #028893;
  color: #fff;
  text-decoration: none;
  font-family: oswald;
}

nav ul li a:hover, nav ul li a:visited:hover {
  background: #1a6066;
  color: #fff;
}

nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}

nav ul li ul li {
  min-width: 190px;
}

nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  /* position: absolute; */
  top: 0;
  right: 0;
  background: #262626;
  /* height: 70px; */
  width: 70px;
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    padding: 70px 0 15px;
  }

  nav ul {
    display: none;
  }

  nav ul li {
    float: none;
  }

  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }

  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}

@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}

#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
  top: -10px;
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
}

/* Partie pour le logo et la photo et la phrase  */
#logo {
  float: left;
  height: 350px;
  width: 350px;
}

header p {
  font-family: oswald;
  font-size: 30px;
  padding: 80px;
}

#paysage {
  float: right;
  height: 400px;
  width: 1520px;
}

header h1 {
  overflow: hidden;
  border: 0px solid #01B2C0;
  color: #FFFFFF;
  background-color: #01B2C0;
  font-size: 30px;
  font-family: lato;
  /* position: relative; */
  bottom: 80px;
  width: auto;
  /* height: 33px; */
  padding-top: 25px;
}

* {
  margin: 0;
}

标签： htmlcss

html - 试图从我的页面中删除空白

问题描述

解决方案

推荐阅读