Jump to content

Recommended Posts

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

Link to comment
Share on other sites

The silence is driving me nuts. Is anyone still alive on the forums? I see many people looked at the post but nothing.... Anyways I fixed the problem I had. Here is the new code. Still bare bones none of the buttons work as I haven't got that far. But so far what do you think of the design and coding? HTML is valid Feel free to give the page a tear down and offer comments on improvements :) Thanks for helping a budding coder out.

home.css

index.html

post-95518-0-23745300-1354717519_thumb.png

Link to comment
Share on other sites

  • 3 weeks later...

Put your website on a server with a domain and more people will give you opinions... I'm to lazy to grab your code and open a localhost version. So I can't give input.

Link to comment
Share on other sites

  • 8 months later...
  • 2 weeks later...
  • 5 weeks later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...