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

Nuncio · #2 02-05-2013, 09:29 PM

Yer missing the point of css
the css stylesheet is the layout, page colors, font characteristics, everything. The pages are jsut some html that fill the layout in.

For instance, in the css stylesheet, you have something like your header box:

HTML Code:

.header {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid black;
  float: center;
  width: 1000px;
  text-align: center;
  background-color: white;
  color: black;
  height: 30px;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-stretch: normal;
  font-style: normal;
  vertical-align: text-middle;
}

Then on the pages, you'd fill it with this:

HTML Code:

<div class="header">
<h1>whatever the fuck you want in the header box</h1>
</div>

So you have the stylesheet component named .header that defines that part of the page. Thats in the stylesheet.

Then the html page calls that component with the div tags and puts the text in.

Go look at the post I made on the other thread that had both stylesheet and page on the same file. Separate those from about the div wrapper open tag. Those would be the page and stylesheet separated. If I'm making a one-page site, I just put them together like I did in that file. You need them separated.

Can I suggest your buttons go along the top?

EchoedTruth · #3 02-06-2013, 10:46 AM

Quote:

Originally Posted by Nuncio [You must be logged in to view images. Log in or Register.]

Yer missing the point of css
the css stylesheet is the layout, page colors, font characteristics, everything. The pages are jsut some html that fill the layout in.

For instance, in the css stylesheet, you have something like your header box:

HTML Code:

.header {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid black;
  float: center;
  width: 1000px;
  text-align: center;
  background-color: white;
  color: black;
  height: 30px;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-stretch: normal;
  font-style: normal;
  vertical-align: text-middle;
}

Then on the pages, you'd fill it with this:

HTML Code:

<div class="header">
<h1>whatever the fuck you want in the header box</h1>
</div>

So you have the stylesheet component named .header that defines that part of the page. Thats in the stylesheet.

Then the html page calls that component with the div tags and puts the text in.

Go look at the post I made on the other thread that had both stylesheet and page on the same file. Separate those from about the div wrapper open tag. Those would be the page and stylesheet separated. If I'm making a one-page site, I just put them together like I did in that file. You need them separated.

Can I suggest your buttons go along the top?

Ok great, that's what I was wondering. The other thread got kind of mussed up so I wanted a new start. I would like to place the buttons (nav bar) along the top, however; I do not know how to do this (I'm assuming it's CSS?). Thank you!

Smedy · #4 02-06-2013, 10:55 AM

http://www.w3schools.com/css/

learn css it's really not hard

Nuncio · #5 02-06-2013, 11:02 AM

You'd make .button, define its size, bg color and text.

Make a .topbar, define it's width and height.

You'd div the buttons inside the .topbar div.

taken from the other single page css/html thing I posted for you in the other thread.
I defined the box called lef1, and the buttons in the style area

HTML Code:

.left1 {
  border: 0px solid black;
  float: left;
  width: 170px;
  text-align: center;
  height: 306px;
  background-color: red;
  color: black;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-size: normal;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
}


.button {
  border: 1px solid black;
  margin: 5px;
  float: center;
  width: 159px;
  text-align: center;
  background-color: red;
  color: black;
  height: 35px;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-size: large;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  vertical-align:text-bottom
  -moz-border-radius: 7px;
  border-radius: 7px;
}

Then I stuffed the buttons into that div here:

HTML Code:

<div class="left1">
		<div class="button">
		button 1
		</div>
		<div class="button">
		button 2
		</div>
		<div class="button">
		button 3
		</div>
		<div class="button">
		button 4
		</div>	
		<div class="button">
		button 5687565
		</div>
</div>

Pay me and I'll build the site for you.

EchoedTruth · #6 02-07-2013, 10:45 AM

Quote:

Originally Posted by Nuncio [You must be logged in to view images. Log in or Register.]

You'd make .button, define its size, bg color and text.

Make a .topbar, define it's width and height.

You'd div the buttons inside the .topbar div.

taken from the other single page css/html thing I posted for you in the other thread.
I defined the box called lef1, and the buttons in the style area

HTML Code:

.left1 {
  border: 0px solid black;
  float: left;
  width: 170px;
  text-align: center;
  height: 306px;
  background-color: red;
  color: black;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-size: normal;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
}


.button {
  border: 1px solid black;
  margin: 5px;
  float: center;
  width: 159px;
  text-align: center;
  background-color: red;
  color: black;
  height: 35px;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-size: large;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  vertical-align:text-bottom
  -moz-border-radius: 7px;
  border-radius: 7px;
}

Then I stuffed the buttons into that div here:

HTML Code:

<div class="left1">
		<div class="button">
		button 1
		</div>
		<div class="button">
		button 2
		</div>
		<div class="button">
		button 3
		</div>
		<div class="button">
		button 4
		</div>	
		<div class="button">
		button 5687565
		</div>
</div>

Pay me and I'll build the site for you.

Thank you for the pointers [You must be logged in to view images. Log in or Register.] ... I'm more aiming to teach myself web design than to have something built for me.

Alovia · #7 02-07-2013, 11:44 AM

Try this...

http://www.codecademy.com/

EchoedTruth · #8 02-07-2013, 03:27 PM

Thanks Alovia! Good stuff