HTML/CSS konusunda usta bir bilgiye sahibim, ancak bana daha fazla sahip olan bir problem yaşıyorum. Becerilerimi test etmek için TV Şovları'nda web siteleri yapıyorum ve bir tane tasarlarken bir sorunla karşılaştım. Ekran görüntüsünde görüldüğü gibi, bir öncekinden sonra div ilan ettim, gizleniyor gibi görünüyor.İçerik div'un üzerinde saklanıyor
Gördüğünüz gibi. Hem paragraf etiketlerini hem de div'leri denedim, hiçbir şey çalışmıyor gibi görünüyor, HTML ve CSS'yi ekledim.
body {
\t padding:0;
\t margin: 0;
\t font-family: 'Raleway';
}
.nav {
\t background-color: black;
\t text-decoration: none;
\t color: silver;
\t margin: 0;
\t list-style: none;
\t text-align: center;
}
.nav > li {
\t display: block;
}
/* .nav > li:before {
\t content: "*";
} */
.nav > li > a {
\t text-decoration: none;
\t color: silver;
\t font-size:24px;
\t text-transform: uppercase;
\t font-weight: bolder;
\t letter-spacing: 4px;
}
.nav-btn {
\t display:block;
\t font-size: 30px;
\t background-color: black;
\t color: silver;
\t text-align: center;
\t cursor: pointer;
}
.image {
\t background-image:url('download1.jpg');
\t width:100%;
max-height:400px;
background-position: left center absolute;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}
.title {
\t display: inline-block;
\t color: white;
\t position:relative;
\t margin: 15%;
\t text-transform: uppercase;
}
.image {
\t text-align: center;
\t position:absolute;
}
.image > h2 {
\t padding-top: 50%;
\t line-height: 50%;
}
@media screen and (max-width: 411px) {
\t .title > h2 {
\t \t font-size: 15px;
\t }
\t .image {
\t \t max-height:280px;
\t }
}
.submitbox {
\t color: yellow;
\t background-color: darkblue;
\t z-index: 1 !important;
}<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
\t <span class="nav-btn">Menu</span>
<ul class="nav">
\t <li><a href="#">Home</a></li>
\t <li><a href="#">About</a></li>
\t <li><a href="#">News</a></li>
\t <li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div id="submitbox"><h2>Sign up for our Newsletter!</h2></div>
<p>hello</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function() {
\t $('ul.nav').toggle();
});
</script>
</body>DÜZENLEME: Önemli, kod snippet'ini çalıştırırken görülemeyen H2 görüntüsünü görüntünün önüne getirmek ve getirmek için kullanıldı. Ben pozisyon abolute kullandım, bu yüzden herhangi bir şey ayarlandığında, söz konusu stilleri etkilemez, özür dilerim Eğer yanlış yapıyorum. Ayrıca görüntüleri de değiştirdi.
EDIT2: Ben sadece mutlak pozisyon kullanılan niye, bu pencere menü sorunu için White bars?
Eğer pozisyon 'ihtiyacını açıklayabilir: CSS – Aziz
yılında absolute' ve neden' BTW important' 'submitbox' bir kimliktir olmalıdır' # submitbox' senin iki resim bağlantılarını özdeş olduğuna inanıyoruz imag es. i.stack.imgur olanlar. – Observer
Aşağıdaki düzenlemeyi gönderiimde yaptım, ama aynı zamanda "div id =" submitbox "işlevini kullandığını ancak" # submitbox " – JoeL