Jump to content

fromthericefields

Members
  • Posts

    11
  • Joined

  • Last visited

Posts posted by fromthericefields

  1. 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

  2. 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

  3. I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code:

        <!DOCTYPE html>    <html lang="en">	   <head>		  <meta charset="utf-8" />		 		  <title>Homepage</title>		 		  <meta name="description" content="fromthericefields, blog, home" />		  <meta name="author" content="Joseph Davies" />		 		  <link rel="stylesheet" type="text/css" href="header.css" />	   </head>	   <body>		  <header id="mainheader">			 <hgroup>			    <h1>fromthericefields</h1>			    <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2>			    <h3>Proverbs 18:21;</h3>			 </hgroup>			 <nav>			    <ul>				   <li><a href="signin.html">Sign in</a></li>				   <li>|</li>				   <li><a href="register.html">Register</a></li>			    </ul>			 </nav>		  </header>		 		  <nav id="mainnav">			 <ul>			    <li><a href="index.html">Home</a></li>			    <li><a href="index.html">Blog</a></li>			    <li><a href="index.html">Gallery</a></li>			    <li><a href="index.html">About</a></li>			    <li><a href="index.html">Contact</a></li>			 </ul>		  </nav>		  <section>			 <article>			    <h4>Setting up fromthericefields:</h4>			    <h5>Posted on 10/5/12</h5>			 </article>		  </section>		  <aside>			 <blockquote>			   			 </blockquote>		  </aside>	   </body>    </html>

    The CSS:

        body {    }    #mainheader {	   background: blue;	   margin-top: -25px;	   margin-left: auto;	   margin-right: auto;	   border-bottom-left-radius: 25px;	   border-bottom-right-radius: 25px;	   height: 200px;	   width: 1000px;    }    #mainheader hgroup {	   padding-top: 10px;	   width: 1000px;    }    #mainheader h1 {	   font-style: italic;	   color: #ffffff;	   text-shadow: 5px 5px 5px #000000;	   font-size: 40px;    }    #mainheader h2 {	   font-style: oblique;	   font-size: 20px;	   color: #FF0000;	   margin-left: 20px;	   margin-top: -20px;    }    #mainheader h3 {	   font-family: monospace;	   font-size: large;	   color: #AAAAAA;	   margin-left: 600px;	   margin-top: -10px;    }    #mainheader nav {	   margin-left: 810px;	   margin-top: -130px;    }    #mainheader ul {	   list-style-type: none;    }    #mainheader li {	   text-align: center;	   display: inline;	   color: white;    }    #mainheader a {	   text-decoration: none;	   color: white;    }	   /*Main Navagation Bar*/    #mainnav {	   width: 900px;	   background: red;	   border-bottom-left-radius: 25px;	   border-bottom-right-radius:25px;	   margin-left: auto;	   margin-right: auto;    }    #mainnav ul {	   list-style-type: none;	   margin-left: -2.5em;    }    [b]    #mainnav li {	   display: inline;	   border: solid;    }[/b]    #mainnav a {	   text-decoration: none;	   color: white;	   text-align: center;    }

    The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?

  4. Please post just the part of your code that's malfunctioning as a single executable script that can be analyzed.
    I posted the whole thing as I didn't know which part wasn't functioning correctly. But thanks to Ingolme I might have the problemsolved, but have to wait for the computer to be available to tweak my code a bit. You're right I'd never thought about the text resizing.I'd better make sure I remember for the future. Looks like the computer is free. Whoops..... Spoke too soon... eh!Thanks for your input :) (both of you) cheers!
  5. Hi, I'm starting out with HTML5/XHTML and CSS/CSS3 and am soon getting around to JavaScript. I have a basic structure of my website that I've been making to practice improving my skills. Building it, it works on Firefox (No support for Chrome or IE9 yet, haven't got around to that) until I zoom in and out, then it breaks. Most speficially the Navagation bar... What am I doing wrong? Here is the HTML

    <!DOCTYPE html><html lang="en"><head>   <meta charset="utf-8" />  <title>Home</title>  <meta name="description" content="" />  <meta name="author" content="fromthericefields" />  <meta name="viewport" content="width=device-width; initial-scale=1.0" />  <link rel="stylesheet" href="main.css" type="text/css" /> </head><body>  <div id="all">   <header>    <h1>fromthericefields</h1>    <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit.</h2>   </header>    <nav>    <ul id="mainav">	 <li id="leftnav">/</li>	 <li><a href="index.html">Home</a></li>	 <li><a href="blog.html">Blog</a></li>	 <li><a href="advntr.html">Advntr</a></li>	 <li><a href="about.html">About Us</a></li>	 <li><a href="contact.html">Contact</a></li>	 <li id="rightnav">\</li>    </ul>   </nav>   <section id="maincontent">    <article>	 <h2>Home:</h2>	 <p>	  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis.	  Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo,	  sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst.	  Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique.	  Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius.	  Morbi adipiscing porta malesuada.	 </p>	 <p>	  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis.	  Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo.	  Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar	  lacus. Suspendisse mattis ornare mauris id tristique.	  Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius.	  Morbi adipiscing porta malesuada.	 </p>	 <p>	  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis.	  Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo.	  Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar	  lacus. Suspendisse mattis ornare mauris id tristique.	  Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius.	  Morbi adipiscing porta malesuada.	 </p>    </article>   </section>   <aside id="sidebox1">    <h2>About:</h2>    <article>	 <p>	  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis.	  Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo.	  Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar	  lacus. Suspendisse mattis ornare mauris id tristique.	  Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius.	  Morbi adipiscing porta malesuada.	 </p>    </article>   </aside>   <footer>    <p>	 Copyright: 2012 fromthericefields.inc All rights reserved.    </p>    <nav id="footernav">	 <ul>	  <li><a href="terms.html">Terms and Conditions</a></li>	  <li><a href="privacy.html">Privacy Policy</a></li>	 </ul>    </nav>   </footer>  </div></body></html>

    The CSS is:

    #all {width: 900px;height: 400px;margin-left: auto;margin-right: auto;}header {text-align: left;border: outset #946040;border-radius: 25px;height: 100px;background-color: #945129;width: 900px;margin: 0px;}header h1 {text-shadow: 5px 5px 5px #FFFFFF;font-family:"Comic Sans MS", "TSCu_Comic";margin-left: 30px;margin-top: 5px;}header h2 {color: #00CC88;margin-left: 100px;margin-top: -20px;font-size: 15px;}/*The main navgation bar located in the header area*/nav {margin-left: 2px;margin-top: -20px;margin-bottom: 30px;width: 900px;}#mainav {list-style-type: none;margin: 0px;padding: 0px;width: 900px;}#mainav li {background: -moz-linear-gradient(top, #945129 0%, #944020 45%, #944020 55%, #945129 100%);display: inline;padding-top: 2px;padding-bottom: 2px;margin-top: -5px;border-bottom: outset;float: left;}#mainav li:hover {background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);}#mainav li:hover > a {color: black;}#mainav a {text-decoration: none;color: #ffffff;float: left;padding-left: 63px;padding-right: 63px;}#leftnav {border-bottom-left-radius: 25px;border-left: outset #944020;padding-left: 10px;padding-right: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-left: -2px;}#rightnav {border-right: outset #944020;border-bottom-right-radius: 25px;padding-right: 10px;padding-left: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-right: -4px;}/*End*//*The main content of the page*/#maincontent {border: outset #946040;border-radius: 25px;background-color: #945129;width: 75%;float: left;min-height: 500px;}#sidebox1 {border: outset #946040;border-radius: 25px;background-color: #945129;width: 22.6%;float: left;margin-left: 1%;min-height: 500px;}/*End*//*The footer*/footer {border: outset #946040;border-radius: 25px;background-color: #945129;width: 900px;clear: both;float: left;margin-top: 5px;min-height: 20px;text-align: center;}footer p {display: inline;margin-left: 10px;}#footernav {margin-bottom: -10px;}#footernav ul {list-style-type: none;margin-left: -2.5em;}#footernav li {display: inline;margin: 8px;}#footernav a {text-decoration: none;}/*End*/

    All help would be appriticated, susgestions, and tips, as I am learning and am egear to learn all I can from my mistakes. This is what my webpage looks like, properly on my browser (Located as attachment) Thanks for your help Forgive me if this should be in another form as it regards both my HTML and CSS.

    post-95518-0-53528200-1336525117_thumb.png

    • Like 1
  6. background-color: grey; for main background colorbackground-image: url(bgimage.png); for background imageAs for navagation bar there should be plenty of references in w3c schools website and other sites showcasing various examples.

    • Like 1
  7. Looking at the list, I have no need to worry as I already use CSS for styling and follow Strict XHTML guidelines in my code.Thanks for the reference list, will come in handy as I learn.

  8. Is it ok to go ahead and use the new doctype for HTML5 eventhough I am not using any of the new tags, but am basically using XHTML Strict until perhaps in the future I may use some of the tags and features. Is this acceptable? So far everything validates in the validator, but wonder if this is good practice to use a HTML5 doctype where there is no HTML5 markup in the source code.

    • Like 1
×
×
  • Create New...