HTML Question [Archive] - Web Hosting Talk

View Full Version : HTML Question

AtomicDesign

12-16-2007, 06:58 AM

Hello.

Since I've done my new Layout, I wanted to "style" it.
Actualy it looks realy good, but I have problem with HTML.
I want to make the Layout in the center. I used this code:

<table style="position:absolute; top:10px; BORDER="0" CELLPADDING="0" cellspacing="0" align="center">

But nothing happens.

Please help me.

This is the whole Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<title>.::> AtomicDesign <::.</title>
<META CONTENT="text/html; charset=iso-8859-1" HTTP-EQUIV="Content-Type">
<META NAME="Generator" CONTENT="PhotoImpact">
<style TYPE="text/css">

FONT {FONT-FAMILY: Verdana; FONT-SIZE: 10px}
TD {FONT-FAMILY: Verdana; FONT-SIZE: 10px}
BODY {FONT-FAMILY: Verdana; FONT-SIZE: 100px}
</style>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<table style="position:absolute;left:418px top:10px; BORDER="0" CELLPADDING="0" cellspacing="0" valign="center">
<TR>
<TD COLSPAN="2"><a href="index.html"><IMG SRC="images/image_1.jpg" WIDTH="600" BORDER="0" HEIGHT="151"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="151"></TD>
</TR>
<TR>
<TD COLSPAN="2"><IMG SRC="images/image_2.jpg" WIDTH="600" BORDER="0" HEIGHT="40"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="40"></TD>
</TR>
<TR>
<TD><IMG SRC="images/image_3.jpg" WIDTH="186" BORDER="0" HEIGHT="41"></TD>
<td rowspan="19"><iframe src="links/index.html" width="414" height="473" name="iframe" background-image="images/image_3.jpg"></iframe></td>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="41"></TD>
</TR>
<div style="position:absolute; left:418px; top:282px; z-index:2"> </div>
<TR>
<TD><a href="index.html" target="iframe"><IMG SRC="images/image_5.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_6.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_7.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_8.jpg" WIDTH="186" BORDER="0" HEIGHT="24"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="24"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_9.jpg" WIDTH="186" BORDER="0" HEIGHT="24"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="24"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_10.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_11.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_12.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_13.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_14.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_15.jpg" WIDTH="186" BORDER="0" HEIGHT="23"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="23"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_16.jpg" WIDTH="186" BORDER="0" HEIGHT="24"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="24"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_17.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_18.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_19.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_20.jpg" WIDTH="186" BORDER="0" HEIGHT="25"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="25"></TD>
</TR>
<TR>
<TD><a href="index.html"><IMG SRC="images/image_21.jpg" WIDTH="186" BORDER="0" HEIGHT="24"></TD></a>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="24"></TD>
</TR>
<TR>
<TD ROWSPAN="2"><IMG SRC="images/image_22.jpg" WIDTH="186" BORDER="0" HEIGHT="49"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="13"></TD>
</TR>
<TR>
<TD><IMG SRC="images/image_23.jpg" WIDTH="414" BORDER="0" HEIGHT="36"></TD>
<TD><IMG SRC="images/space.gif" WIDTH="1" BORDER="0" HEIGHT="36"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Jamie Edwards

12-16-2007, 07:45 AM

Hi,

Try to wrap your entire main table in a:

<div align="center"></div>

killapix

12-16-2007, 08:57 AM

Once you declare an element as 'absolute' you cannot then declare 'center'.?

remove the absolute style and the 'center' should work, also you need to declare a width of the table that is less then 100% of the browser window otherwise it will look the same.

My tip would be firstly put the style all rules in a stylesheet, alot tidier, either internal(inside the head of your document) or external( in a seperate .css file)

at the moment you have 2 style rules for body in the head:

body{
background-color:#1E1F21; background-image:url(images/bg.jpg);background-position:left bottom; background-repeat: no-repeat; background-attachment:fixed;
}
BODY {FONT-FAMILY: Verdana; FONT-SIZE: 100px}

and then again inline on the html code:

<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">

this could be easily tidied into:

body{
background: #1E1F21; url(images/bg.jpg); no-repeat; fixed;
font: verdana; 100px;
margin: 0;
}

give the table a class or id and then you should be able to use:

margin: 0 auto;

to center it.

WebDesignGold

12-16-2007, 10:22 AM

margin: 0 auto;
Won't work with the doctype used. You have to use the right doctype in order for it to be used. When done, it will be the right method for centering content then the use of <div align="center"></div>.
See this ALA article (http://www.alistapart.com/articles/doctype) about fixing your layout with the right doctype.
And of course, you should avoid tables for layout and go for CSS-based layout design.

killapix

12-16-2007, 12:30 PM

Agreed what the poster above has said I forgot to mention the doctype.

The correct and valid way to create this page would be to use <div> containers instead of <tables> and to use css to style and position those elements.

if you don't care about keeping within web standards and want that table to align center remove the position styling and the align="center" will work

stripeyteapot

12-16-2007, 02:44 PM

if you don't care about keeping within web standards and want that table to align center remove the position styling and the align="center" will work

However, you should care about web standards, just as you should care about discrimination, and not making it difficult for users to view and use your website.

Of course, these aren't the only reasons for using correct markup. There's many benefits to be had, such as render speed, filesizes, bandwidth usage and so on.

In light of that, I would recommend getting back to basics. I think you should learn HTML and CSS from scratch. I haven't personally read it, but this book (http://www.amazon.co.uk/HTML-World-Wide-Web-QuickStart/dp/0321430840/ref=pd_bbs_3?ie=UTF8&s=books&qid=1197830229&sr=8-3) seems to have good reviews.

Apparently it's a must-have book - It may well be. Even if you don't buy that book, you should definately buy some resources, or find some free on the internet.

As for a quick fix, if you wrap a DIV around your markup, give it a fixed width(This is important), and apply margin:0 auto; this should give your desired effect.

killapix

12-16-2007, 05:53 PM

As for a quick fix, if you wrap a DIV around your markup, give it a fixed width(This is important), and apply margin:0 auto; this should give your desired effect.

This quick fix will only work if you change to the right doctype.
to rephrase my original comment if you reqiure a quick fix remove the style attribute from the table, change valign="center" to align="center" and it will work.