![]() |
#1
|
|||
|
![]() 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> 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> 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..
|
|
|
|