Any HTML5 / WebDev peeps here? Urgent!

EchoedTruth · #1 01-30-2013, 01:49 PM

Hey everyone,

So I'm designing my first website for a business I'm starting up - I can't for the life of me get this one thing right.

My nav section will not line up with my article section (nav = home, about us, services... article = the llama rant).

Here is my code so far:

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> My Magical World </title> 
		
		<style>
   
   html, body { margin: 0px; padding: 0px; border: 0px } 
   body { background-color: silver } 
   article { margin: 20px; padding: 15px; border: 2px solid black;  }
   footer {  clear:both; background-color: red; border:5px solid black; text-align:center;  } 
   
   * { margin: 0; }
   html, body { height: 100%; }
   .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: red; }
   .field { border:2px solid black; text-align: center; background-color: red; } 
 
    
	
	</style> 
    </head> 
	
  <body>
 
     <div class="wrapper">
 
       <header class="b">
 
        <h1 style="border: 5px solid black">
 
        Hello World!
 
       </h1>
 
      <h2 style="border: 2px solid black">
 
      Welcome to a magic world
 
      </h2>
 
    </header>

 
    <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; ">
     
      <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 style="float: left">
 
      My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... Lllaaaammmmmmmmaaaaaaassssssssssssssss
 
      <h4> <b> Llamas...... </b> </h4>
 
    </article>
    

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

Thanks in advance [You must be logged in to view images. Log in or Register.]

Ihealyou · #2 01-30-2013, 02:24 PM

I have no idea if this is the "correct" way to do it, but if you take out float:left from the article it'll appear next to the navbar

Nuncio · #3 01-30-2013, 02:38 PM

You should be using tables to set this up. I'm no expert, so you know, take my advice for what it's worth.

There is a free wysiwyg that will help you get on with this, Kompozer.

http://www.kompozer.net/

I gotta say, that's damn ugly, though. Red backgrounds with blue links, not so awesome. If you feel like messing with a little CSS, you'd probably do yourself some favors. You'd also be able to do rounded corners and such.

EchoedTruth · #4 01-30-2013, 02:57 PM

Quote:

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

You should be using tables to set this up. I'm no expert, so you know, take my advice for what it's worth.

There is a free wysiwyg that will help you get on with this, Kompozer.

http://www.kompozer.net/

I gotta say, that's damn ugly, though. Red backgrounds with blue links, not so awesome. If you feel like messing with a little CSS, you'd probably do yourself some favors. You'd also be able to do rounded corners and such.

Yea this is all prototype stuff... I'm gonna change the style a great deal - just trying to get the structure down. I was yelled at for using tables to format the page on like 5 different websites lol... people are really hardcore about only using tables for tabular data, not for setting up structure.

To Ihealyou: when I take float: left out of the code, it puts the article next to the nav bar, but the border of the article goes behind the nav bar (it extends across the page). I'm trying to have a border and have it lined up next to the nav bar properly.

Nuncio · #5 01-30-2013, 03:19 PM

Quote:

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

Yea this is all prototype stuff... I'm gonna change the style a great deal - just trying to get the structure down. I was yelled at for using tables to format the page on like 5 different websites lol... people are really hardcore about only using tables for tabular data, not for setting up structure.

To Ihealyou: when I take float: left out of the code, it puts the article next to the nav bar, but the border of the article goes behind the nav bar (it extends across the page). I'm trying to have a border and have it lined up next to the nav bar properly.

Then you need to go with CSS,

I did this in about 5 minutes with tables. Theres no reason not to use tables in your case.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>****** content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>pigugly</title></head><body style="color: rgb(0, 0, 0); background-color: black;" alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center;"><br>
<table style="text-align: left; width: 90%; margin-left: auto; margin-right: auto; height: 599px;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr align="center">
      <td colspan="2" style="vertical-align: top; width: 1010px; background-color: red; height: 50px; text-align: center;"><font size="+3"><span style="font-weight: bold;">Hello World!</span></font><br>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2" rowspan="1" style="vertical-align: middle; width: 1010px; background-color: red; height: 35px; text-align: center;"><font size="+1">Welcome to a magical, eye-killing world</font><br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 194px; text-align: center; background-color: red; height: 20px;"><a href="index.html">Home</a><br>
      </td>
      <td colspan="1" rowspan="6" style="vertical-align: top; width: 1010px; background-color: silver; height: 327px;">My world is a strange place... it is populated by lemurs, lobsters, 
larvae, lampreys, and llamas. 
Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... 
Lllaaaammmmmmmmaaaaaaassssssssssssssss
 
      
      <h4> <b> Llamas...... </b> </h4>
      </td>
    </tr>
    <tr align="center">
      <td style="vertical-align: top; width: 194px; background-color: red; height: 25px;"><a href="services.html">Services We Offer</a><br>
      </td>
    </tr>
    <tr align="center">
      <td style="vertical-align: top; width: 194px; background-color: red; height: 25px;">Request Services<br>
      </td>
    </tr>
    <tr align="center">
      <td style="vertical-align: top; width: 194px; background-color: red; height: 25px;">Contact Us<br>
      </td>
    </tr>
    <tr align="center">
      <td style="vertical-align: top; width: 194px; background-color: red; height: 25px;">About BTS<br>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; background-color: red; height: 327px;"><br>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2" rowspan="1" style="vertical-align: top; height: 35px; background-color: red;"><a href="about.html"><font size="+2">About My World</font></a><br>
      </td>
    </tr>
  </tbody>
</table>

</div>
</body></html>

Still ugly as shit.

Nuncio · #6 01-30-2013, 03:28 PM

I'll put this simply, cuz I already kinda did.

If you wont use tables, you have to use divs in CSS to do what you want easily and properly.

There is no reason NOT to use tables.

Ihealyou · #7 01-30-2013, 04:34 PM

Quote:

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

To Ihealyou: when I take float: left out of the code, it puts the article next to the nav bar, but the border of the article goes behind the nav bar (it extends across the page). I'm trying to have a border and have it lined up next to the nav bar properly.

You could set the width of the navbar section and then set the margin-left of the article to the same width, like this:

HTML Code:

    <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; width:150px; ">
     
      <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 style="margin-left:150px;">
 
      My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... Lllaaaammmmmmmmaaaaaaassssssssssssssss
 
      <h4> <b> Llamas...... </b> </h4>
 
    </article>

Again, I don't know if this is best practices or anything, but it got me through my web development class.

Nuncio · #8 01-30-2013, 04:46 PM

You should just do CSS.

Heres a quick one, with the style inside the document, so you'd want to make a separate style sheet and then each page, obviously.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

****** content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<style type="text/css">


.wrapper {
  margin: 0px auto;
  width: 1000px;
  background-color: black;
}


.header {
  margin-top: 20px;
  margin-bottom: 10px;
  float: center;
  width: 1000px;
  text-align: center;
  background-color: red;
  color: black;
  height: 45px;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-stretch: normal;
  font-style: normal;
  -moz-border-radius: 7px;
  border-radius: 7px;
  vertical-align: text-middle;
}

.top {
  margin-top: 10px;
  float: center;
  width: 1000px;
  height: 35px;
  text-align: center;
  background-color: red;
  color: black;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-stretch: normal;
  font-style: normal;
 -moz-border-top-left-radius: 7px;
  -moz-border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.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;
}
.center1 {
  border: 0px solid black;
  float: left;
  width: 829px;
  text-align: left;
  background-color: white;
  color: black;
  height: 306px;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-stretch: normal;
  font-style: normal;
  vertical-align:text-top;
}


.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;
}


.bottom {
  border: 0px solid black; 
  float: left;
  width: 1000px;
  text-align: center;
  background-color: red;
  color: black;
  height: 20px;
  background-position:  center center;
  direction: ltr;
  font-family: Arial,"Microsoft Sans Serif",sans-serif;
  font-stretch: normal;
  font-style: normal;
  font-size: small;
  -moz-border-bottom-left-radius: 7px;
  -moz-border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  vertical-align: text-middle;
}





</style>
</head>

<body style="color: rgb(0, 0, 0); background-color: black;" alink="#000099" link="#000099" vlink="#990099">

<div class="wrapper">    

<div class="header"><h1><font size="+1">Something about magic.</h1>
</div>
    
<div class="top">
	Somethinng else about magic
</div>

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

<div class="center1">
	A lot of words that start with "L", including Llamas. A lot of words that start with "L", including Llamas. A lot of words that start with "L", including Llamas.
</div>



<div class="bottom">
	about something or other
</div>

</div>
</body>
</html>

Still super ugly. You could put borders around some of the divs to separate shit if you wanted, I guess.

Nuncio · #9 01-30-2013, 04:49 PM

Why does this filter get rid of "meta" inside the "html" code?

Quote:

****** content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">

is supposed to be meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
with a "<" in front of it.

wtf meta?

Nuncio · #10 01-30-2013, 04:56 PM

That said, Ihealyou's changeup worked pretty well.