Project 1999

Go Back   Project 1999 > General Community > Off Topic

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
  #1  
Old 02-05-2013, 04:53 PM
EchoedTruth EchoedTruth is offline
Sarnak

EchoedTruth's Avatar

Join Date: Oct 2012
Posts: 322
Default HTML5 / Web Design Questions

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.]
Last edited by EchoedTruth; 02-05-2013 at 04:56 PM..
 


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -4. The time now is 10:06 PM.


Everquest is a registered trademark of Daybreak Game Company LLC.
Project 1999 is not associated or affiliated in any way with Daybreak Game Company LLC.
Powered by vBulletin®
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.