Search the Community
Showing results for tags 'nomadic siblings'.
Found 1 result
-
Hello all, this is my first attempt at a real website to be posted in the future. It's at it's very basic stages. I've noticed a problem with the layout that needs fixing with Chrome, Firefox, and IE9. When the page is zoomed in or out, the layout shifts. How do I prevent this? HTML5 CODE: (Passes the W3C Validator) <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="Joseph Maxwell Davies" /> <meta name="keywords" content="nomad, video, siblings, nomadic siblings, torah, teachings, articles" /> <title>Nomadic Siblings</title> <link type="text/css" rel="stylesheet" href="home.css" hreflang="en" media="screen" /> <script type="text/javascript" src="home.js"></script> </head><body> <div id="container"> <div id="webpagebanner"> <header> <hgroup> <h1>Nomadic Siblings</h1> </hgroup> </header> <div> </div> </div> <div id="leftsidebar"> <section id="logo"> <div> </div> </section> <nav id="leftsidebarnav"> <ul> <li>Home</li> <li>Videos</li> <li>Articles</li> <li>Contact Us</li> </ul> </nav> </div> <div id="maincontent"> <section> <div id="featuredcontent"> <figure> <!--<video height="320" width="480" controls="controls" poster=""> <source src="Wildlife.m4v" type="video/mp4" /> Your browser does not support HTML5 video please upgrade to one of the following: Chrome, Firefox, or IE9 </video>--> <img src="http://zipline.files.wordpress.com/2010/12/chanukah.jpg" alt="menorah" width="480" height="320" /> </figure> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> </section> </div> <div id="webpagefoot"> <footer> </footer> </div> </div> </body></html> CSS Code: body {/*background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRmopGs4E8JPZw2QSogetRzxjFhMbEPlyS8kY6hBd5mhgYQr-H4);*/background-color: #B57F35;}@font-face { font-family: Dumb1; src: url('2Dumb.ttf');}@font-face { font-family: Dumb2; src: url('3Dumb.ttf');}#container {/*background-color: white;*/width: 960px;margin-left: auto;margin-right: auto;}#webpagebanner {background-color: #EBE5AB;width: 790px;height: 150px;float: right;clear: right;border-top-right-radius: 25px;}#webpagebanner header hgroup h1 { text-align: center; width: 450px; margin-top: 35px; margin-left: 30px; /*background-color: white;*/ font-family: Dumb1; font-size: 42px;}#webpagebanner div { color: green; width: 700px; border: #B34242 solid 1px; margin-left: 45px;}#leftsidebar {background-color: #D9CE57;width: 169px;height: 760px;float: left;clear: left;border-right: blue solid 1px;}#logo { padding-top: 24px; padding-bottom: 24px; padding-left: 34px; padding-right: 34px; background-color: #D9CE57;} #logo div { height: 100px; width: 100px; background-color: red; border: black solid 1px; border-radius: 45px; }#leftsidebarnav { position: fixed;} #leftsidebarnav li { list-style-type: none; margin-top: 8px; margin-left: -1em; border-top: black solid 1px; border-bottom: black solid 1px; width: 120px; text-align: center; font-size: large; } #leftsidebarnav li:hover { background-color: white; opacity: 0.5; }#maincontent {background-color: #EBE5AB;width: 790px;height: 760px;float: left;}#maincontent section { border-bottom: black dashed 1px; padding-top: 15px; padding-bottom: 35px; padding-left: 164px; padding-right: 164px;} #maincontent section #featuredcontent { width: 480px; height: 320px; border: black solid 1px; border-radius: 50px; background-color: green; opacity: 0.5; overflow: hidden; } #maincontent section #featuredcontent figure { margin: 0px; overflow: hidden; border-radius: 50px; } #maincontent section .featureselector { width: 8px; height: 8px; border: black solid 2px; border-radius: 8px; float: right; margin-right: 10px; margin-top: 8px; background-color: red; }#webpagefoot {background-color: yellow;width: 960px;clear: both;} I use a local font but it's not really a big deal that you can't see it. How can I fix the layout so that it does not shift? P.S. Yes it's ugly right now, it's mostly laid out to show me the measurements and how the page is to be divided. Like I said it's bare bones. Or if better I have the files attached as well. But can't upload the ttf.... sorry about that. home.css index.html
