Html 正在尝试从我的页面中删除空白
当我创建我的第一个网站时,我的页面中有一个空白,我试图删除,但我不能,我尝试了位置和一些设置,但似乎不起作用,我甚至编辑了一些我已经编写的代码。 任何帮助都是好的。 谢谢 我现在有两个文件,一个用于html,一个用于css 这是我的html文件Html 正在尝试从我的页面中删除空白,html,css,Html,Css,当我创建我的第一个网站时,我的页面中有一个空白,我试图删除,但我不能,我尝试了位置和一些设置,但似乎不起作用,我甚至编辑了一些我已经编写的代码。 任何帮助都是好的。 谢谢 我现在有两个文件,一个用于html,一个用于css 这是我的html文件 <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" hre
<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>
徽标的高度似乎大于横幅高度。请管理徽标高度。请在此处提供一个适当的标记,而不是github上的一半。(如果没有实际的图像文件,您的问题似乎无法正确再现,但我们现在的工作不应该是从您的回购协议中找出它们,然后将它们放在我们可以运行整个活动的地方。)@CBroe我知道,我将尝试制作一个可复制的最小版本hi@Dipika-在提供答案时,请提供问题的解决方案,而不仅仅是一般指导。您可以发布代码来说明应该如何完成。非常感谢。
@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;
}