0
私はこのスポットを埋めることができない理由を理解しようとしています。私はトップパディングを試みたが、役に立たなかった。私は以下のコードと私が話している空間の画像を提供しました。画像には、ヘッダー2と灰色の領域の間に空白があり、簡単な要約があります。私はパディングを試み、背景色の高さも上げましたが、うまくいかないようです。これを読んでいただきありがとうございます。本当にありがとうございました。パディングがうまくいかないときに空白を埋める方法
$(document).ready(function()){
$("figure img + figcaption").prev().addClass('hasCaption');
});
.body{
margin: 0px;
}
.homeButton{
width: 40px;
}
#MidPort{
background-image: url("http://www.geocities.ws/spahealthcare/pic/dark-green-home-button.png");
background-size:cover;
position:absolute;
margin-left:1565px;
bottom:10px;
}
.topnav{
font-size: 20px;
font-family: Times New Roman;
position:fixed;
top 0;
width:100%;
}
#bg2{
background-color:red;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
background-color: #333
}
li{
float:left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.active{
background-color:#4CAF50;
}
li a:hover:not(.active)
{
background-color: #111;
}
li:last-child{
border-right:none;
}
#margintop1{
margin-top: .5cm;
font-family: Gadget;
}
.jumbotron{
height:175px;
background-color:#808080;
}
hr.style17 {
\t border-top: 1px solid #8c8b8b;
\t text-align: center;
}
hr.style17:after {
\t content: '§';
\t display: inline-block;
\t position: relative;
\t top: -14px;
\t padding: 0 10px;
\t background: #f0f0f0;
\t color: #8c8b8b;
\t font-size: 18px;
\t -webkit-transform: rotate(60deg);
\t -moz-transform: rotate(60deg);
\t transform: rotate(60deg);
}
img.hasCaption {
padding-bottom: 50px;
}
figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 16px;
background-color: white;
text-align: center;
color: blue;
font-family: 'Reenie Beanie', cursive;
font-size: 30px;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
left: 0;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
img {
border-color: white;
border-width: 15px;
-moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-style: solid;
margin: auto;
}
#imgR{
margin-left:1285px;
height:400px;
}
font{
font-family:Gadget;
}
section{
background-color:#00FFFF;
margin-bottom:10cm;
font-family:Gadget;
}
}
<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<div>
<header>
<!--<div class="container">-->
<h2 class="topnav" id="cs2">
<ul>
<li><a class="active" href="/home">Home</a></li>
<li><a href="/About me">About Me</a></li>
<li><a href="/Contact">Contact</a></li>
<li id="MidPort"><a href="/Home"></a></li>
</ul>
</h2>
</header>
</div>
<body>
<div class="intro-text">
<div class="jumbotron">
<div>
<p id="margintop1"style="margin-right:200px;">
<font color="white">Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve emerging economic problems
</font>
</p>
<hr class="style17"/>
</div>
<figure>
<img src="http://i.maniadb.com/images/artist/116/116122.jpg" id="imgR">
</figure>
</div>
</div>
<div id="midSec">
<section>
<h2>
<center>
<font color="#2F4F4F" size="20">
Portfolio
</font>
</center>
</h2>
</section>
</div>
</body><!--setup a home button at the bottom-->
[![Space is in between Portfolio and the brief summary][1]][1]
は、まずウルコード、ウルのコードで非常に多くの間違ったものを編集し修正しますされています。 '
終了タグのdiv後 – Hash
と身体開始オフになっていますか？ – Kangouroops