1
私は1つのスタイルシートを使用するサイトを持っています。あなたはそれがホームページ上にあるように、それはページの一番下にはありません、二次ページで見ることができたよう Home page foot div Secondary page foot divページの一番下にdivがありますか？
。私は間違っていると私は確信していないので、私は本当にマスターではなく、それはCSSになります。私は自分のホームページのすべてのコードを更新しました。
/* Dropdown Button */
.dropbtn {
background-color: #333;
color: white;
padding-left: 35%;
font-size: 45px;
\t width:50px;
\t height:55px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #AARRGGBB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: absolute;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.topnav {
\t \t \t \t position:fixed;
\t \t \t \t top:0;
\t \t \t \t left:0;
\t \t \t \t right:0;
\t \t \t \t width:100%;
\t \t \t \t background-color: #333;
\t \t \t \t overflow: hidden;
\t \t \t \t }
\t \t \t \t
.Head {
\t \t Font-size:100%;
\t \t color:White;
\t \t position-static;
\t \t display:inline-block;
\t \t padding-left:15%; \t \t
\t \t
} \t
.Time{ positon-absolute;
padding-left:5%;
font-size:25px;
color:white;
display:inline-block;
}
body, html {
height: 100%;
\t margin:0;
\t padding:0;
}
.parallax {
background-image: url("Background.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.search {
\t \t Font-size:200%;
\t \t color:White;
\t \t position-static;
\t \t display:inline-block;
padding-left:2.5%;}
.search2 {
\t \t Font-size:200%;
\t \t color:White;
\t \t position-static;
\t \t display:inline-block;
padding-left:15%;
width:2%;
height:2%;
top:1;}
.box1{
\t \t Font-size:100%;
\t \t color:White;
\t \t left:0;
\t \t right:0;
\t \t width:100%;
\t \t background-color: #332;
\t \t overflow: hidden;
\t \t position-fixed;
\t \t margin-top:15%;
\t \t margin-bottom:5%;
\t \t text-align:center;
\t \t
}
.box1 p{font-size:200%;}
.footer{
\t \t
\t \t position:static;
\t \t \t \t bottom:0; \t
\t \t \t \t width:100%;
\t \t \t \t background-color: #333;
\t \t \t \t overflow: hidden;
\t \t \t \t margin-bottom:-1%;
\t \t \t
\t \t \t \t }
\t
\t
\t
}<!DOCtype html>
<html>
<Head>
<title> Stirling music festival</title>
<Link rel="stylesheet" href="Dropdown.css">
</head>
<body class="parallax">
\t \t <div class="topnav">
\t \t \t <div class="dropdown">
\t \t \t \t <button onclick="myFunction()" class="dropbtn">≡</button>
\t \t \t \t \t <div id="myDropdown" class="dropdown-content">
\t \t \t \t \t \t <a href="../Brandon test/About-Us.html">About us</a>
\t \t \t \t \t \t <a href="../Brandon test/Line-Up.html">Line Up</a>
\t \t \t \t \t \t <a href="../Brandon test/Gallery.html">Gallery</a>
\t \t \t \t \t \t <a href="../Brandon test/Resources.html">Resources</a>
\t \t \t \t \t \t <a href="../Brandon test/Join-Us.html">Join us</a>
\t \t \t \t \t \t <a href="../Brandon test/Merchandise.html">Merchandise</a>
\t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="Time">
\t \t \t \t \t <p id="Timer">
\t \t \t \t </div>
\t \t \t \t \t <a href="../Brandon test/Homepage.html"><h1 class="Head" style= text-align:center;>Stirling music festival</h1></a>
\t \t \t \t
\t \t \t \t \t <Form class ="search" action="results.php" method="post">
\t \t \t \t \t \t
\t \t \t \t \t \t <input type="text" name="search">
\t \t \t \t \t \t <input type="submit">
\t \t \t \t \t </form>
\t \t \t \t \t
\t \t \t \t \t <a href ="../Brandon test/About-Us.html"><img src="gear-icon.ico" class="search2"></a>
\t \t \t \t
\t \t </div>
\t \t
\t \t
\t
\t \t <div class="box1"; >
\t \t <h1>Line Up</h1>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
\t \t
\t \t </div>
\t \t
\t \t \t <div class="box1"; >
\t \t <h1>Line Up</h1>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
\t \t
\t \t </div>
\t \t
\t \t \t <div class="box1"; >
\t \t <h1>Line Up</h1>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
\t \t
\t \t </div>
\t \t
\t \t \t <div class="box1"; >
\t \t <h1>Line Up</h1>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non felis convallis, blandit odio sed, pretium mauris. Donec vel imperdiet odio. Duis sit amet magna molestie felis sagittis pharetra. Morbi mattis at enim in tempor. Donec id posuere leo. Phasellus dictum tempor nisl, sed aliquet nunc cursus non. Nunc at elit mollis enim consectetur sodales ut ac purus. Suspendisse dapibus, turpis in ornare dapibus, est tortor suscipit eros, non facilisis neque felis eu felis. Quisque nulla sapien, ultrices at arcu quis, elementum maximus dolor. Integer sit amet ipsum felis.</p>
\t \t
\t \t </div>
\t \t
\t \t
\t \t <div class="footer">
\t \t <h1> the end</h1>
\t \t </div>
\t \t
\t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t \t <script>
\t \t \t /* When the user clicks on the button,
\t \t \t toggle between hiding and showing the dropdown content */
\t \t \t function myFunction() {
\t \t \t \t document.getElementById("myDropdown").classList.toggle("show");
\t \t \t }
\t \t \t // Close the dropdown if the user clicks outside of it
\t \t \t window.onclick = function(event) {
\t \t \t if (!event.target.matches('.dropbtn')) {
\t \t \t \t var dropdowns = document.getElementsByClassName("dropdown-content");
\t \t \t \t var i;
\t \t \t \t for (i = 0; i < dropdowns.length; i++) {
\t \t \t \t var openDropdown = dropdowns[i];
\t \t \t \t if (openDropdown.classList.contains('show')) {
\t \t \t \t \t openDropdown.classList.remove('show');
\t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t \t }
\t \t \t </script>
\t \t \t <script>
\t \t // Set the date we're counting down to
\t \t var countDownDate = new Date("Jun 21, 2018 15:37:25").getTime();
\t \t // Update the count down every 1 second
\t \t var x = setInterval(function() {
\t \t // Get todays date and time
\t \t var now = new Date().getTime();
\t \t // Find the distance between now an the count down date
\t \t var distance = countDownDate - now;
\t \t // Time calculations for days, hours, minutes and seconds
\t \t var days = Math.floor(distance/(1000 * 60 * 60 * 24));
\t \t var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
\t \t var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60));
\t \t var seconds = Math.floor((distance % (1000 * 60))/1000);
\t \t // Display the result in the element with id="demo"
\t \t document.getElementById("Timer").innerHTML = days + "d " + hours + "h "
\t \t + minutes + "m " + seconds + "s ";
\t \t // If the count down is finished, write some text
\t \t if (distance < 0) {
\t \t \t clearInterval(x);
\t \t \t document.getElementById("Timer").innerHTML = "EXPIRED";
\t \t \t \t }
\t \t \t }, 1000);
\t \t </script>
</body>
</html>
：それを行うには、いくつかの方法がありますが、これは私が使用してフレキシボックスを知っている一つの方法であります..その下の画像はヘッダーの下にあるので –