html - How to center and fix my messed up web page? -
i'm trying create web page , has many issues. cannot center #titlediv , navbar disappears. i'm not gonna lie: might big fix, i'm not sure. here's link if can perchance salvage it:
http://jsfiddle.net/glenohumeral13/c604vbrn/
code:
<body> <div id="parallaxish"></div> <div id="navbar"> <nav> <a href="#item1">item1</a> <a href="#item2">item2</a> <a href="#item3">item3</a> </nav> </div> <div id="contentdiv"> <div id="welcome"> <div id="titlediv"> <h1>title go here</h1> </div> </div> <div class="barrier"></div> <div id="item1"> <h1>item1</h1> </div> <div class="barrier"></div> <div id="item2"> <h1>item2</h1> </div> </div> </body> css
* { margin: 0; padding: 0; } body { color: #fff; background-color: #000; font-family: helvetica, arial, sans-serif; } img { max-width: 100%; height: auto; } #parallaxish { background-image: url('http://24.media.tumblr.com/tumblr_m54j1niyn21r0k830o1_500.jpg'); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; width: 100%; height: auto; } #navbar { float:right; height: 30px; margin-right: 100px; } nav { text-decoration: none; display: inline; list-style-type: none; padding-right: 15px; padding-top: 10px; float: left; -webkit-transition: color 1s ease-out; -moz-transition: color 1s ease-out; -o-transition: color 1s ease-out; transition: color 1s ease-out; font-weight: 100; color: #fff; -webkit-font-smoothing: antialiased; } nav a:hover { color: #16a085; } #welcome { height: 600px; width: 100%; text-align: center; text-transform: uppercase; background-color: black; } #welcome h1, #item1 h1, #item2 h1 { font-weight: 100; -webkit-font-smoothing: antialiased; } #titlediv { border: 2px solid #fff; width: 180px; margin: auto; padding: auto auto; position: absolute; left: 0; right: 0; overflow: auto; } .barrier { height: 120px; width: 100%; background: transparent; } #item1 { height: 600px; width: 100%; text-align: center; background-color: white; color: #16a085; } #item1 h1, #item2 h1 { padding: 5% 0; } #item2 { height: 600px; width: 100%; text-align: center; background-color: black; color: white; }
first of all, demo! http://jsfiddle.net/imaginestudios/c604vbrn/10/ looks trying vertically , horizontally center it, in div, correct? there simple way css, find useful:
<div id="welcome"> <div id="titlediv"> <h1>title go here</h1> </div> </div> first of all, give position:relative; div id="welcome":
/*with current css*/ #welcome { height: 600px; width: 100%; text-align: center; text-transform: uppercase; background-color: black; position:relative; } and then, magic! <div> id="titlediv" given position:absolute; , few other rules:
#titlediv { border: 2px solid #fff; width: 180px; margin: auto; padding: auto auto; position: absolute; width: 180px; height: 76px; left: 0; right: 0; top:0; bottom:0; overflow: auto; } this little trick works if width , height declared. now, nav bar fixed:
#navbar { position:absolute; top:0; right:100px; height: 30px; z-index:10; } and wrap up, total screen demo! http://jsfiddle.net/imaginestudios/c604vbrn/10/embedded/result/
html css html5 css3 centering
No comments:
Post a Comment