HTML5 / Web Design Questions

EchoedTruth · #1 02-05-2013, 04:53 PM

Hey y'all, I decided not to bump my old thread as it got kind of derailed. I just had a couple simple questions regarding HTML5 and website layout.

1. From what I gather - HTML is for setting up different sections of a website, and CSS gives them their looks. With a website like this for instance:

HTML Code:

<!DOCTYPE html>
<html>
<head>
    ****** charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc. 
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>

--- How would I arrange the way the website is laid out?
I.E:
- How would I center the header, (and would a border be done with CSS) ?
- How could I put the nav bar under the header
- In general, what commands should I use to put different sections in diff places

The site I began with turned out like this - my main issues of not being able to move the nav bar around and the body text not fitting in the border being the big problems.

HTML Code:

<!DOCTYPE html> 
  <html> 
  <head> 
   ****** charset="utf-8"> 
   <!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<title> BTS </title> 
		
		<style>
   
   html, body { margin: 0px; padding: 0px; border: 0px } 
   body { background-color: white } 
   article { margin: 20px; padding: 15px; border: 2px solid black;float: left; width:60%;  }
   footer {  clear:both; background-color: silver; border:5px solid black; text-align:center;  } 
   
   * { margin: 0; }
    html, body { height: 100%; }
   .article { style="margin-left:150px"; border:2px solid black;  } 
   .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; }
   .footer, .push { height: 4em; }
   .b { border:5px solid black; text-align: center; background-color: silver; }
   .field { border:2px solid black; text-align: center; background-color: silver; } 
   .nav { background-color: silver; border: 2px solid black;  margin: 10px; padding: 10px; width:150px;float:left; } 
    
	
	</style> 
    </head> 
	
  <body>
 
     <div class="wrapper">
 
       <header class="b">
 
        <h1 style="border: 5px solid black">
 
        BTS
 
       </h1>
 
      <h2 style="border: 2px solid black">
 
      Your technology support resource! 
 
      </h2>
 
    </header>


    <nav class="nav">
     
      <fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset>
      <fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset> 
      <fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset>
      <fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset>
      <fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset>
		
     </nav>
	 
  
     <article class="article">
 
      VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
	  VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
	  VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
	  VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
	  
 
    </article>
    

      <div class="push"> </div> 
      </div> 
 
 
    <div class="footer"> 
	
    <footer>
 
    <h1> <a href="BTSAboutUs.html"><b>About Us</b></h1>
 
    </footer>
 
    </div>
 
  </body>

So my main issues is how to get things to stay center-top, middle-right/left... etc. I have no idea how to get the sections to arrange properly (minus some arcane use of the float command and some jury rigging).

Thanks in advance, and /flame on [You must be logged in to view images. Log in or Register.]