css - Why does my header and navigation go below my hero image? -
why header , navigation go below hero image? whenever increase size of text on image nav , heading goes down further. if rid of size text goes want it. here html , css.
html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>amanda farrington</title> <link rel="stylesheet" href="css/demo.css" /> <link href='http://fonts.googleapis.com/css?family=roboto:400,300,500' rel='stylesheet' type='text/css'> </head> <body> <div id="header"> <div id="leftheader"> <img src="assets/logo2.jpg" alt="logo" style="width:65px;height:65px"> <h1>amanda farrington</h1> </div> <div id="nav"> <ul> <li><a href="index.html">about</a></li> <li><a href="tips.html">work</a></li> <li><a href="mentally.html">contact</a></li> </ul> </div> </div> <div id="hero"> <div id="heroimage"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%"> </div> <div id="overlay"> <h2>amanda farrington</h2> </div> </div> </body> </html> css
body { margin: 0px; padding: 0px; height: 100%; background: white; } #header { color: #d7dadb; font-family: 'roboto', sans-serif; font-weight: 300; font-size : 15px; text-align: left; width: 97%; margin:0; padding-left: 3em; float: left; background: white; height: 10%; } #leftheader { } #header img { float: left; padding-left: 3em; } h1{ width: 9em; float: left; padding-left: 0.5em; color: #45cccc; padding-bottom: 1px; } #nav { width: 40%; margin:0; padding:0; text-align: right; color: red; font-size:20px; float: right; padding-right: 2em; } #nav ul { padding: 1px; } #nav li { display: inline; padding: 38px; } #nav li { color: #2c3e50; text-decoration: none; } #nav li a:hover { color: #45cccc; } #hero{ width: 100%; height: 30em; } #heroimage { top: 12%; width: 100%; z-index: 1; position: absolute; } #overlay{ width: 30em; top: 90%; margin-left: 30%; z-index: 2; position: relative; } h2{ width: 9em; position: relative; font-family: 'roboto', sans-serif; font-weight: 300; font-size: 60px; float: center; color: white; opacity: 1.0; text-shadow: 2px 2px 3px rgba(0,0,0,0.6); }
it's because of position: absolute; of #heroimage div (if understand, want)