PDA

View Full Version : Everything is centered


tony09uk
01-30-2011, 10:38 PM
Hi I am trying to do a simple site.....a very simple site, it's my first attempt without using a programme to write the code for me, but im having a simple problem....apparnetly not so simple that i can solve it though.

Everything is centering it's self. here's the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Index</title>

<body style="background-color:#000066">

</head>

<body>
<font color="#FFFFFF">
<!--maincontainer-->
<div style="position:absolute; left:100px; width:1100px">
<center>
<!--this is a logo div set width 1050-->
<div style="width: 900px">
<img src="images/proquest_logo.jpg" width="500" height="80" alt="logo" />
</div><!--end this is a logo div-->
<!--heading div-->
<div style="width: 450px">
<h1>THIS IS A HEADING</h1>
<h4>The above heading and this one needs to be centered with css</h4>
</div><!--end heading div-->
<!--top content-->
<div style="position:absolute;left:100px;border:2px solid black;padding-left:10px;height:93px">
This is the home page of a site of which I am uncertain what it is about other than practicing how to use HTML, then make adjustments to make it more streamlined and use CSS where I can. Eventually I will go onto making it look ssswwwweeeeeeeeeeeeeeeeeeeeeetttt!
</div>
<!--bottom four divs are held in here-->
<!--nav div-->
<div style="position:absolute; float:left; font:small-caps;">
<a href="index.html">HOME</a></br>
<a href="tables.html">TABLES</a></br>
<a href="list.html">LIST</a></br>
<a href="alltags.html">ALL TAGS</a></br>
<a href="contact.html">CONTACT</a>
</div>
<!--end nav div-->
<div>
<!--left div-->
<div>
</div>
<!--end left div-->
<!--middle div-->
<div>
</div>
<!--end middle div-->
<!--end right div-->
<div style="border: 2px solid black; width:200px">
some text for the right div
</div>
<!--end right div-->
</div>
<!--endbottom four divs are held in here-->
<!--end container-->

</body>
</html>

I thought the browser read from top to bottom and that you had to specify if you want div's other than the default position.

I know the way I have done the page isn't an efficent way and css styles located in the head will be the best way of achieving the required look, but Im struggling getting the basic concept so im kinda sticking to what I kinda know. Would it pay for me to try and learn CSS hand in hand with HTML?

tony09uk
01-30-2011, 10:44 PM
as you can see my knowledge is ropey...at the very kindest! but I would like to display what I create as I get better and share it so I can get constructive critism. But....and its a big one, I dont wanna be spending any money until I have it at a level where Im gunna produce a site I want people to visit. Is there any places where I can get free space, I dont mind if they have adverts all over it etc...I just wanna put the site up once its done, adjust as I improve.

DWcourse
01-30-2011, 11:28 PM
Let's start here:

<body>
<font color="#FFFFFF">
<!--maincontainer-->
<div style="position:absolute; left:100px; width:1100px">
<center>

You have an unclosed font tag (and you shouldn't be using font tags anyway) and an unclosed center tag (which you also shouldn't be using). Get rid of them both.

You also use absolute positioning (another bad idea) and one of the problems you're running into is that absolutely positioned items are positioned relative to the browser window and have no effect on the position of other page elements.

Finally, inline CSS styles have their place but you should avoid them when possible.

Bottom line, you need to learn HTML and CSS basics. If you have Dreamweaver, you could begin by looking at the built-in layouts.

tony09uk
01-31-2011, 04:33 PM
Ok thanks. I thought these were the basics, which is why I was trying to use them for a basic page.