-2
Altbilgimi nasıl denediğime bakılmaksızın, ekranımın altında kalır ve içeriğimden sonra istediğim gibi kalmaz. Ekranımın altında ve altında olması gereken içeriğimin üstünde duruyor. Başlığımı (jsfiddle'ta değil), içeriği ve altbilgi divini% 100 yüksekliğe sahip bir sarıcıya yerleştirdim. Burada jsfiddle jsfiddle Altbilgi bile keman üzerinde görünmüyor!Başlığım neden içeriğimin altında değil?
body{
background-color: #555;
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
min-height: 100%;
position: relative;
height: 100%;
}
#content{
top: 140px;
position: absolute;
height: 90%;
width: 100%;
font-family: 'Times New Roman', Times, serif;
padding-bottom: -70px;
}
#content h2{
text-align: center; ;
color: white;
margin: 50px auto;
width: 60%;
}
/*Footer*/
#footer{
width: 100%;
height: 70px;
background-color: black;
color: white;
font-size: 12px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
}
#footer p{
padding-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div id="wrapper">
<div id="header"></div>
<a href="restaurant_reserve.php"><button id="reserve-button" class="w3-btn-block w3-hover-white" style="font-weight: bold; font-size: 15px; position: fixed; top: 100px; z-index: 999;">Reserve Now!</button></a>
<div id="content">
<img style="width: 100%; height: auto;" src="images/slider/examples/slide-example3.png">
<h2><strong>Come and devour Friendz' hunger satisfying selection of the
most delectable soul foods around!</strong>
</h2>
<div class="info-block1">
<img src="images/restaurant_examples/example1.jpg" title="Chicken breast with veggies" alt="Chicken breast with veggies">
<p> Come and enjoy our delicious chicken breast and vegetables. This is just test text that is
be used for demonstration and to take up space.</p>
</div>
<div class="info-block2">
<img src="images/restaurant_examples/example2.jpg" title="Some type of food" alt="example2">
<p> This is just generic text. I am writing and typing this off of the top of my head
and it is meant just to take up space.</p>
</div>
<div class="info-block1">
<img src="images/restaurant_examples/example3.jpg" title="Some type of food" alt="example2">
<p>This is even more generic text that is being used to take up
space and demonstrate potential formatting of the website.</p>
</div>
<div class="info-block2">
<img src="images/restaurant_examples/example4.jpg" title="Some type of food" alt="example2">
<p>Lorem ipsum dolor sit amet, fabulas phaedrum mea no, an eum utinam
libris dictas, audire expetenda eu quo.
</p>
</div>
</div>
<div id="footer">
<p>Footer Test</p>
</div>
</div><!--end wrapper div-->
</body>
</html>
# header JSFiddle içinde tanımlanmamış, ayrıca hiçbir içeriği yok yani varsayılan olarak hiçbir şey yok. Sorunuzu yeniden yazmayı veya ilgili kodu yazmayı deneyin. – rsn
Üzgünüz @rsn demek FUTBOL değil başlık –
Eğer altbilgi içeriğin sonra görünmesini istiyorsanız, o zaman neden bir absolution pozisyonu verdin? '# Footer' kuralından' position: mutute', 'bottom: 0' ve' left: 0' özelliklerini kaldırın. –