jquery - Why does my text in html not move? -
i'm coding website, , i'm trying put text under banner along other elements nothing seems going down.
https://gyazo.com/379cfa01780dddc112d06bd53a38e04b https://gyazo.com/c67ba5499d4ce188946094978f346c6a
this code
<!doctype html> <html> <head> <script type='text/javascript' src="jquery.min.js"></script> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel='stylesheet' href='bootstrap.min.css'> <style> #topbanner { position: relative; } #topbanner { display: block; margin-left:auto; margin-right:auto; } #topbanner:after { -moz-box-shadow: inset 0 0 180px #defeec; -webkit-box-shadow: inset 0 0 360px #defeec; /* paragraph controls fade on banner */ box-shadow: inset 180px 0 400px #defeec; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* _______________________________________________________________________________________________________ */ #body { background: url(stardust.png) repeat 0 0; background-position: right; } #container-narrow { margin-top: 300px; background-color: white; position: absolute; width: 80%; height: 2000px; } body { margin-left: 10%; margin-right: 10%; min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } #hcharacter { margin-top: 50%; position: relative; font-family: 'chunkfive'; font-size: 100px; text-align: center; color: red; z-index: 999; } @font-face { font-family: 'chunkfive'; src: url('chunkfive.otf') format: 'opentype'; } </style> </head> <body id='body'> <div id='container-narrow'></div> <div id=topbanner> <img src="logo%20mockup.jpg" width=1920px height=400px></img> </div> <div id=hcharacter>characters</div> <p> characters</p> <script> $.backstretch('/bgimage'); </script> </body> </html>
try instead ... minor adjustments needed works
<!doctype html> <html> <head> <script type='text/javascript' src="jquery.min.js"></script> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'> </script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel='stylesheet' href='bootstrap.min.css'> <style> #topbanner { position: relative; } #topbanner { display: block; margin-left:auto; margin-right:auto; } #topbanner:after { -moz-box-shadow: inset 0 0 180px #defeec; -webkit-box-shadow: inset 0 0 360px #defeec; /* paragraph controls fade on banner */ box-shadow: inset 180px 0 400px #defeec; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* _______________________________________________________________________________________________________ */
#body { background: url(stardust.png) repeat 0 0; background-position: right; } #container-narrow { margin-top: 300px; background-color: white; position: absolute; width: 80%; height: 2000px; } body { margin-left: 10%; margin-right: 10%; min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } } #hcharacter { margin-top: 50%; position: relative; font-family: 'chunkfive'; font-size: 100px; text-align: center; color: red; z-index: 999; } @font-face { font-family: 'chunkfive'; src: url('chunkfive.otf') format: 'opentype'; } </style> </head> <body id='body'> <div id='container-narrow'> <div id=topbanner> <img src="logo%20mockup.jpg" width=1920px height=400px></img> </div> <div id=hcharacter>characters</div> <p> characters</p> </div> <script> $.backstretch('/bgimage'); </script> </body>
Comments
Post a Comment