html - Why does my header and navigation act differently on different pages with same CSS -
why header , navigation act differently on different pages? im trying make page has same navigation , header main page reason acts differently on second page i'm trying make though using same css.
page one
<!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="#workjump">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> <h3>graphic artist | web designer</h3> </div> </div> <a name="workjump"></a> <div id="work"> <div id="label"> <h4>work</h4> </div> <div id="leftcolumn"> <div id= "p2article"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> <div id= "p2article"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> <div id= "p2article"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> <div id= "p2article"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> </div> <div id="rightcolumn"> <div id= "p2article2"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> <div id= "p2article2"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> <div id= "p2article2"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> <div id= "p2article2"> <img src="assets/trees.jpg" alt="trees" style="width:100%;height:100%"> <div id= "articleinfo2"> <div id= "articletext2"> <span class="title3">beyond bricks 2-2</span> </div> </div> </div> </div> </div> </body> </html> page two
<!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="hero2"> <h6>project type</h6> <h5>project title</h5> </div> <div id="workimage"> <img src="assets/trees.jpg" alt="logo" style="width:100%;height:100%"> </div> </body> </html> css
body { margin: 0px; padding: 0px; height: 100%; background: white; } /*----------header styles-------------*/ #header { color: #d7dadb; font-family: 'roboto', sans-serif; font-weight: 300; font-size : 15px; text-align: left; width: 100%; padding-left: 3em; position: relative; height: 15%; box-sizing: border-box; } #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 image styles-------------*/ #hero{ width: 100%; height: 30em; position: relative; } #heroimage { top: 9%; width: 100%; z-index: 1; position: absolute; } #overlay{ width: 34em; top: 70%; margin-left: 30%; z-index: 2; position: relative; clear: left; } h2{ width: 100%; 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 #000000; text-align: center; } h3{ width: 100%; position: relative; font-family: 'roboto', sans-serif; font-weight: 300; font-size: 30px; color: white; opacity: 1.0; text-shadow: 3px 3px 2px #000000; text-align: center; } /*----------work main styles-------------*/ #leftcolumn { width: 50%; float: left; height: 70em; } #rightcolumn { width: 50%; height: 70em; float: right; } #label{ width: 100%; height: 2em; top: 10em; } #work{ width: 100%; height: 10em; position: relative; top: 8em; } h4{ width: 100%; position: relative; font-family: 'roboto', sans-serif; font-weight: 300; font-size: 40px; color: #45cccc; opacity: 1.0; text-align: center; } #p2article2 { width: 70%; height:20em; float: center; display: block; margin-left: auto; margin-left: 60px; margin-bottom: 10em; margin-top: 5em; border: 1px solid #cccccc; background: purple; } #p2article { width: 70%; height:20em; float: center; display: block; margin-left: auto; margin-right: 60px; margin-bottom: 10em; margin-top: 5em; border: 1px solid #cccccc; background: purple; } #articleinfo2 { width:100%; height:10em; display: block; margin-bottom: 5em; } #articletext2{ width: 90%; height:70%; margin: 5%; font-family: 'roboto', sans-serif; font-weight: 300; font-size: 30px; color: black; } /*----------work page styles-------------*/ #hero2{ width: 100%; height: 10em; position: relative; background: red; top: 10em; } #workimage { top: 9%; width: 100%; z-index: 1; position: static; } h5{ font-family: 'roboto', sans-serif; font-weight: 300; font-size: 40px; color: #45cccc; float: left; } h6{ font-family: 'roboto', sans-serif; font-weight: 300; font-size: 20px; color: #45cccc; float: left; }
tested bit , seems caused not clearing float, removing negative top margin #header , adding last line of css should solve :
#overlay { width: 100%; height: 30em; position: relative; clear: left; } you may want same #work though doesn't seem influencing layout.
if may add - not floats necessary. removing 1 on #header example seems have no impact. guess less it's used, better. , rid of horizontal scrollbar bit of code if :
#header { color: #d7dadb; font-family: 'roboto', sans-serif; font-weight: 300; font-size : 15px; text-align: left; width: 100%; padding-left: 3em; position: relative; height: 15%; box-sizing: border-box; }