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