保证金顶部没有做任何事情

时间：2017-06-18 11:57:19

标签： javascript html css

我看过类似的问题，但他们还没有解决我的问题:( 我有一个找到更多的按钮，但它是重叠的文本，所以我想使用margin-top移动按钮，但它没有做任何事我已经尝试将其设置为内联块和沿着这些线的一切 How it looks

代码：

HTML 

<html>
    <head>
        <title>Adams Vault</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <div id="header">
            <table>
                <tr>
                    <th><h1 class="MainTitle">Adams Vault</h1><h1 class="SecondaryTitle">This Is My Imagination</h1></th>
                </tr>
            </table>
        </div>
        <div id="navigation">

            <ul>
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="news.asp">Apps</a></li>
                <li><a href="Games.html">Games</a></li>
                <li><a href="Music.html">Music</a></li>
                <li><a href="about.asp">Brain Storm</a></li>
                <li><a href="about.asp">Videos</a></li>
                <li><a href="about.asp">Contact</a></li>
            </ul>
        </div>
        <div id="content" style="height:3000;">
                <div style="background-color:white; width:100%; height: 500; border-radius: 15px;">
                <table style="">
                <tr>
                <td><h4 class="ThirdTitle">adamsvault.uphero.com</h4>
                <div class="slideshow-container">
                    <div class="mySlides fade">
                    <div class="numbertext"></div>
                    <img src="Images\P1.jpg" style="width:800; height: 400;">
                    <div class="text"></div>
                </div>

                <div class="mySlides fade">
                    <div class="numbertext"></div>
                    <img src="Images\P2.png" style="width:800">
                    <div class="text"></div>
                </div>

                <div class="mySlides fade">
                    <div class="numbertext"></div>
                    <img src="Images\P3.png" style="width:800">
                    <div class="text"></div>
                </div>
                </div></td>
                <br>
                <td style="vertical-align: top; margin-left:50;"><h1 style="padding-top:100px;">What Is This Website And Why?</h1>
                <br><p>I created this website to share everything i have designed created or even moddified over the years <br> another goal of this website is to express myself physically and mentally maybe sharing my taste of music <br>to even sharing the stuff i do as hobbys</td>
                </tr>
                </table>
                </div>
                <div style="background-color:white; margin-top: 50px; width:100%; height: 1500; border-radius: 15px; border: red solid 2px;">
                <center>
                <h1 style="text-decoration: red underline; font-size: 50px;"> News </h1>
                </center>
                <div class="storyb" >
                <center>
                <img src="Images\Story\WebLaunch.png" width="40%" height="60%" style="padding:5px;"><img src="Images\Story\WebLaunch.png" width="40%" height="60%" style="padding:5px;">
                <br><br><br><h1 style="color:white;" style="">Website Launch!</h1>
                <p>18/06/2017</p><p style="font-size:15px; color:white;"> Adams Vault has launched! from now on you will be able to use this amazing website</p>
                <p style="font-size:15px; color:white;">This website will allow you to view my work download my creations even modify my work (most of the stuff on this site will be open source)<br>If you are going to modify my projects please give credit to this website!</p>
                <a href="" class="find_out_more">Find Out More</a>
                </center>
                </span>
                </div>
                </div>
                <script>
                    var slideIndex = 0;
                    showSlides();

                    function showSlides() {
                    var i;
                    var slides = document.getElementsByClassName("mySlides");
                    for (i = 0; i < slides.length; i++) {
                        slides[i].style.display = "none"; 
                    }
                    slideIndex++;
                    if (slideIndex> slides.length) {slideIndex = 1} 
                        slides[slideIndex-1].style.display = "block"; 
                    setTimeout(showSlides, 4000);
                }
                </script>

        </div>

        <div id="footer">

        Adams Vault 2017    

        </div>

    </body> 
</html>

CSS 

@import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);
@import url(https://fonts.googleapis.com/css?family=Satisfy);
@import url(https://fonts.googleapis.com/css?family=Luckiest+Guy);

.ThirdTitle {
    font-size: 50px;
    font-family: 'Luckiest Guy', cursive;
    text-decoration: underline black; 
}

.MainTitle {
    font-size: 50px;
    font-family: 'Walter Turncoat', cursive;
    text-decoration: underline black;
}

.SecondaryTitle {
    font-size: 25px;
    font-family: 'Satisfy', cursive;
    text-decoration: underline black; 
}
ul {
    top:110px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #DAC8BF;
}

.active {
    background-color: #ad7f69;
}

.active:hover {
    background-color: #ad7f69;
}
.textfeed {
    background-color:white;
    width: 100px;
    height:100px;
}

.head {
    background-color: #333;
}

*{ padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;

}
#header {
 width: 100%;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 10px 0px 0px 0px;
 background: #DAC8BF;
}
#navigation {
 width: 100%;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 0px 0px;
 background: #BD9C8C;
}
#content { 
 width: 100%;
 color: #333;
 border: 1px solid #ccc;
 background: #ffd9c6;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 1350px;
}
#footer { 
 width: 100%;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}


* {box-sizing:border-box}

.slideshow-container {
  max-width: 1000px;
  position: relative;
}

.mySlides {
    display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: red;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.download {
    text-decoration: none;
    color: red;
}

.download:hover {
    text-decoration: none;
    color: darkred;
}

.storyb {
    background-color:black;
    width: 100%;
    height: 35%;
    margin-top: 5%;
    border-top: 5px grey solid;
}

.storyw {
    background-color:black;
    width: 100%;
    height: 35%;
}

.Down {
    padding: 10px;
    background-color: red;
    text-decoration: none;
}

.find_out_more {
    text-decoration: none;
    background-color: grey;
    padding: 5px 20px ;
    margin-top:
}

.find_out_more:hover; {
    background-color: lightgrey;
}

1 个答案:

答案 0 :(得分：1)

您无法在inline元素的顶部或底部应用保证金，这是a标记。您需要将其更改为inline-block。以下是您需要添加的CSS。

.find_out_more {
    display: inline-block;
    // Whatever margin top you want
    margin-top: 40px;
}
相关问题
最新问题