填充顶部不在网站中工作

时间:2016-04-21 02:03:04

标签: html

我正在为自己制作一个网站,我遇到填充问题。我正在处理的案例涉及在我所做的事情中展示一个基本的计算器。最终的目标是在文本悬停在图像上时显示文本,但是现在图像上的文本位于顶部,当它需要位于中间时。

非常感谢有关代码或改进方法的任何评论,非常感谢您的帮助。 此外,经过一些研究后,我发现使用display:block,但这对我来说并没有用。

谢谢,伊恩。

CODE:

body {
  background-color: #EDEEEF;
}
#header {
  width: 100%;
}
#container {
  position: relative;
}
#text {
  z-index: 100;
  position: absolute;
  font-size: 20px;
  left: 50%;
  height: 50px;
  width: 15%;
  top: 30px;
}
#text,
#text1,
#text2,
#text3 {
  background-color: #FFF;
  border-radius: 2px;
  border: 2px;
  font-family: 'Open Sans', sans-serif;
  background: none;
  color: #A4A4A4;
  padding: 0;
}
button {
  border-radius: 2px;
  border: 2px;
  background: none;
  padding: 0;
}
button:hover {
  color: #FFF;
  font: #FFF;
  border-radius: 5px;
  border: 2px;
  cursor: pointer;
}
#text:hover,
#text1:hover,
#text2:hover,
#text3:hover {
  color: #EEE;
}
#text1 {
  z-index: 100;
  position: absolute;
  font-size: 20px;
  top: 30px;
  width: 10%;
  height: 50px;
  left: 65%;
}
#text2 {
  z-index: 100;
  position: absolute;
  font-size: 20px;
  left: 75%;
  top: 30px;
  height: 50px;
  width: 15%;
}
#text3 {
  z-index: 100;
  position: absolute;
  font-size: 20px;
  left: 90%;
  top: 30px;
  height: 50px;
  width: 10%;
}
#AbM,
#Contact,
#CM {
  font-family: 'EB Garamond', serif;
  background-color: #FFF;
}
#PW {
  background-color: #EDEEEF;
  font-family: 'Open Sans', sans-serif;
  #abtbackground-color: #EDEEEF;
}
#ABM {
  width: 60%;
  font-family: 'Open Sans', sans-serif;
}
#CM {
  margin-left: 40%;
  font-family: 'Open Sans', sans-serif;
}
#te {
  border-bottom: 1px solid #000;
  font-family: 'Open Sans', sans-serif;
  display: inline;
  left: 40%;
  width: 40%;
}
#AbT,
#AbM,
#PW,
#Contact {
  font-family: 'EB Garamond', serif;
  color: #2F2F2F;
}
#ABM,
#PWW,
#te {
  font-family: 'Open Sans', sans-serif;
}
.category {
  position: relative;
  display: inline-block;
  float: left;
  padding: 10px;
}
#ttt {
  left: 200px;
  padding-left: 200px;
}
#abs,
#aa {
  display: inline-block;
}
#content {
  display: block;
  height: auto;
  background-color: #EDEEEF;
}
#content > img {
  float: center;
  width: 15%;
  height: auto;
  display: block;
  margin: 5px 30px;
}
#c1:hover,
#c2:hover {
  -webkit-filter: brightness(50%);
  opacity: 100%;
}
#BBB:hover ~ #c1 {
  -webkit-filter: brightness(50%);
}
#BBB {
  position: absolute;
  font-size: 20px;
  color: transparent;
  top: 1375px;
  width: 10%;
  height: 50px;
  left: 36%;
  opacity: 0;
}
#B2 {
  color: #FFF;
  font-size: 20px;
  font-family: 'EB Garamond', serif;
}
#onboard {
  width: 15%;
  float: center;
  display: block;
  height: 400px;
  background: url(http://oi67.tinypic.com/2w50waa.jpg) 50% 0 no-repeat;
  background-size: cover;
}
#onboard:hover {
  -webkit-filter: brightness(50%);
}
#AN {
  display: block;
  font-family: 'EB Garamond', serif;
  padding-top: 1000px;
}
#cal1 {
  display: inline-block;
  opacity: 0;
  font-family: 'EB Garamond', serif;
  padding-top: 100px;
}
#BAW {
  font-size: 20px;
  padding-top: 100px;
  font-family: 'EB Garamond', serif;
}
<!DOCTYPE html>
<html>

<HEAD>
  <title>Ian Winson</title>
  <link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- <link rel="SHORTCUT ICON" HREF="favicon.png"> -->

  <!-- ****** faviconit.com favicons ****** -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
  <link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
  <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
  <link rel="apple-touch-icon" href="/favicon-57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="/favicon-144.png">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <!-- ****** faviconit.com favicons ****** -->

</HEAD>

<body>


  <header style="overflow:hidden; margin:0">

    <div id="container">
      <center>
        <img src="http://i.imgur.com/p7jCsXM.jpg" width="100%"></img>
      </center>
      <font color="#2F2F2F" size="5"><button id="text" align="right" onClick="document.getElementById('ABT').scrollIntoView();" > ABOUT THIS WEBSITE</button>
            <button id="text1" align="right" onClick="document.getElementById('ABM').scrollIntoView();"> ABOUT ME</button>
            <button id="text2" align="right" onClick="document.getElementById('PW').scrollIntoView();">PROGRAMMING WORK</button>
            <button id="text3" align="right" onClick="document.getElementById('Contact').scrollIntoView();">CONTACT</button>
            </font>
    </div>
  </header>

  <center>
    <div id="AbT">
      <font color="#2F2F2F" face="Garamond">
            <br><br>

          <h1>About This Website</h1>

          <div id="ABM">
          </font>
      <font face="Open Sans">
          <p>This Website was started in Early March 2016, and I intend for it to be my platform to post updates,
            recent coding projects, resumes, and more. I am self taught in HTML, so my apologies if there are
            any bugs
           </p>
           <br><br>
         </font>

    </div>
    </div>
  </center>


  <center>
    <div id="AbM" background-colo="pink">
      <font color="#2F2F2F" face="Garamond">
            <br><br>

          <h1>About Me</h1>
          <div id="ABM">
          </font>
      <font face="Open Sans">
          <p>I'm a sophomore at Jesuit College Preperatory School in Dallas Texas(As of Early 2016).
            I have been programming for ~2 years, and mainly know Java. I have made a few apps for android, none of which have been released.
             I also have done some work programming for my FTC Robotics team, 9157. I am also a member of FRC team 2848.
           </p>
           <br><br>
         </font>

    </div>

  </center>
  <center>
    <div id="PW">
      <font color="#2F2F2F" face="Garamond">
          <h1>Programming Work</h1>
          <div id="PWW">
            <font face="Open Sans">
          <p>As previously mentioned, I mainly know Java, and this is my first big project in HTML.
              I have made Java apps including:<br>

          </div>
              <div id="content">
                <div id="onboard">
                  <div id="Cal1" <p id="AN">Basic</p><button id="AK"> Learn More</button>
                  </div>
                </div>




   <img id = "c2" src="http://oi68.tinypic.com/aax9vo.jpg" alt="" width="20%" />
   <div id = "QQQ">
   <p id = "Q1" style="padding-top: 150px;">Advanced Calculator</p>
   <p id = "Q2"> Learn More</p>
</div>


</div>

</div>
      </center>
        </font>
      <center>
        <div id="Contact">
          <font color="#2F2F2F" face="Garamond">
              <br><br>

            <h1>Contact Me</h1>
            <div id="ABM">
            </font>
          <font face="Open Sans">

            <p>If you are looking to contact me, please do it through the provided links below.<br>

              <b>Questions</b><br>
            Email: <a href="iankwinson@gmail.com">iankwinson@gmail.com</a><br>
            <b>Social Media:</b><br>
             Instagram: <a href="https://www.instagram.com/ianwinz/" >@ianwinz</a><br>
            Twitter: <a href="https://twitter.com/ianwinz">@ianwinz</a>

            </div>

             </p>
             <br><br>
           </font>
      </center>
      </div>
    </div>

</body>
<script src="main.js"></script>

</html>

2 个答案:

答案 0 :(得分:1)

在你的CSS中:

#AK {
  padding-top: 150px;
  }

您的按钮使用的ID似乎是#AK,并且您当前的CSS代码中没有相应的样式。尝试操纵100px(+/-)以满足您的需求。

https://jsfiddle.net/8a0q2o0e/#&togetherjs=CN62LLHwxA

答案 1 :(得分:0)

您可以尝试在按钮位置使用absolute位置,这位于您的CSS底部

#onboard{
  position: relative; /** Container to make sure position absolute stays in place **/
}
#ak{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
}