Content hiding above div's
Question
I have an adept knowledge in HTML/CSS but I'm having a problem that has more than stooped me. In order to test my skills, I build websites on TV Shows etc, and while designing one, I've ran into a problem. As seen in the screenshot, although I've declared the div after the previous one, it seems to be hiding.
As you can see. I've tried both paragraph tags and divs, nothing seems to be working, I've included the HTML and CSS.
body { padding:0; margin: 0; font-family: 'Raleway'; } .nav { background-color: black; text-decoration: none; color: silver; margin: 0; list-style: none; text-align: center; } .nav > li { display: block; } /* .nav > li:before { content: "*"; } */ .nav > li > a { text-decoration: none; color: silver; font-size:24px; text-transform: uppercase; font-weight: bolder; letter-spacing: 4px; } .nav-btn { display:block; font-size: 30px; background-color: black; color: silver; text-align: center; cursor: pointer; } .image { background-image:url('download1.jpg'); width:100%; max-height:400px; background-position: left center absolute; background-size: 100%; background-repeat: no-repeat; position: absolute; } .title { display: inline-block; color: white; position:relative; margin: 15%; text-transform: uppercase; } .image { text-align: center; position:absolute; } .image > h2 { padding-top: 50%; line-height: 50%; } @media screen and (max-width: 411px) { .title > h2 { font-size: 15px; } .image { max-height:280px; } } .submitbox { color: yellow; background-color: darkblue; 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> <span class="nav-btn">Menu</span> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <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 () { $('ul.nav').toggle(); }); </script> </body>
Some of that code isn't relevant to what I'm asking. Also, I have a menu but it's open when the page loads, and idea how I can get this to be closed on page load? Also running the code snippet doesn't illustrate what I'm saying as the image is missing.
EDIT: important was used to try and bring the H2 to the front of the image, which cannot be seen when running the code snippet. I used position abolute so when anything is adjusted it will not affect said styles, sorry If I'm doing that wrong. Also changed the images.
EDIT2: I just realised why I used position absolute, it was to stop the image getting white bars above and below the image when the window is scaled down White bars?
1 answers
solution1
1 ACCPTED 2016-03-29 20:31:12
For your menu issue, just set display:none; to your .nav and it will start not visible. For your other issue, I believe having your position set to absolute is what is causing the issue. By changing it to position:relative (and making the background green so you can see it), the div shows up and doesn't block the newsletter text. Absolute div's don't care what else is around it. It will be position relative to its nearest ancestor if set to absolute, which in the case of your HTML, is the <body>
Also, you label id="submitbox" but reference it in css with .submitbox instead of #submitbox
body { padding:0; margin: 0; font-family: 'Raleway'; } .nav { display:none; background-color: black; text-decoration: none; color: silver; margin: 0; list-style: none; text-align: center; } .nav > li { display: block; } /* .nav > li:before { content: "*"; } */ .nav > li > a { text-decoration: none; color: silver; font-size:24px; text-transform: uppercase; font-weight: bolder; letter-spacing: 4px; } .nav-btn { display:block; font-size: 30px; background-color: black; color: silver; text-align: center; cursor: pointer; } .image { background-image:url('download1.jpg'); width:100%; max-height:400px; background-position: left center absolute; background-size: 100%; background-repeat: no-repeat; position: absolute; } .title { display: inline-block; color: white; position:relative; margin: 15%; text-transform: uppercase; } .image { text-align: center; position:relative; background-color:green; } .image > h2 { padding-top: 50%; line-height: 50%; } @media screen and (max-width: 411px) { .title > h2 { font-size: 15px; } .image { max-height:280px; } } .submitbox { color: yellow; background-color: darkblue; 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> <span class="nav-btn">Menu</span> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <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 () { $('ul.nav').toggle(); }); </script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.