Html Site Layout Error.. Is this easy to fix?

Arran · 12-06-2012, 09:05 PM

Hello All! I'm new here, I always build websites.. but I use wordpress. Tonight, I thought I would sit myself down and start to learn HTML to then move on to learn Php+css ect.

I've only been learning it for the past 2 hours. I've managed to build a basic layout and i've added some content. You can see it here -

Quote:

http://arranrice.com/html/

I've came across a problem and I'm not sure how to resolve it, I'm quite sure someone who has a better understanding of HTML will be able to fox this issue very fast.

When I first coded the layout the entire site was to the left of my screen. I wanted to put the site in the middle of my screen so I added this piece of code after my body tag -

Quote:

This has made all of the text within the main area of the site centralized, I dont want this, how am I able to fix this?

The entire html code for my site is -

Quote:

<!DOCTYPE html>
<html>
<head>
<title>Testing HTML</title>
</head>
<body>
<div align="center">
<div id="container" style="width:1000px">

<div id="header" style="background-color:#3485bf;">

<img src="header.png"> </div>

<div id="menu" style="background-color:#c9e9ff;height:1000px;width:100px;float:left;">
<b>Menu</b><br>
<a href="http://www.arranrice.com"> ArranRice.Com</a>
<br>
<p>
<b>My Twitter</b>
<a href="http://www.twitter.com">
<img src="Twitter.png" alt="Twitter" width="50" height="50"></a></div>

<div id="content" style="background-color:#EEEEEE;height:1000px;width:900px;float:left;">

<h1 style="font-family:verdana;" style="text-align:right;">Learning HTML</h1>
<h2>Arran Rice</h2>
<h3>United Kingdom</h3>
<a href="mailto:arran.rice@gmail.com"> Email Arran</a>

<p>My Websites!</p>

<a href="http://www.arranrice.com"> Arran Rice </a>

<p>
<h1>Learning HTML December 2012</h1>
<b>What I've Learnt So Far</b>
<br>
- Links.
<br>
- Headings.
<br>
- Paragraphs.
</p>
<p>This is another paragraph.</p>

<br>
<h2><i><b>This is the next part of my HTML Learning</i></b></h2>
<p>
<b>We have had many positive testimonials - </b>
<br>
<Blockquote><i>Thanks! My SEO rankings are now great! I'm now thrid in my rankings compared with tenth before my service started, I'm not getting lots more traffic!</i><br><b> James, The Owner Of...</b><br><a href="http://www.james.com"> James.Com</a></blockquote>
<p>
<b>We have had many clients such as Twitter!</b></p>

<h1>Opening links in a new window or in the same window...</h1>
<a href="http://www.arranrice.com" target="_blank"> Open ArranRice.Com In A New Window.</a>
<br>
<a href="http://www.arranrice.com"> Open ArranRice.Com In This Window</a>

<br>

<h2><a id="Different">Different Sized Links</a></h2>

<h3><a href="http://www.arranrice.com"> Big Link</a></h3>
<h5><a href="http://www.arranrice.com"> Small Link</a></h5>

</div>

<div id="footer" style="background-color:#a6dbff;clear:both;text-align:center;">
<b>Copyright -</b> <a href="http://www.arranrice.com"><b>ArranRice.com</b></a></div>

</div>

</body>

</body>
</html>

What can I do to fix this?
Thanks in advanced.

VIPStephan · 12-06-2012, 09:42 PM

First of all, please use the ‘#’ button to post code, not the “quote” button.

Then to your question, and first a counter question: From which source are you learning? HTML always goes together with CSS if you want it to look like anything, and presentational HTML attributes (i. e. attributes that change the look of something) have been deprecated for at least ten years now. So, no align="…", no width="…" and height="…" (except on images and except for specifying the intrinsic dimensions thereof), no bgcolor="…", and what not. HTML is only for the structure, the meaning; for the looks there is CSS, and this should be specified in a separate stylesheet.

The way to center a block level element is to assign a width to it and margin: auto with CSS, in your case that would be:

Code:

#container {
  width: 1000px; /* you have specified that inline already but it should be in a separate stylesheet */
  margin: auto;
}