Forum Moderators: open
anyone got any ideas...
this is my HTML
<html>
<head>
</head>
<body bgcolor="black">
<table width=748 height=710 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<tr valign="top">
<td colspan=1 rowspan=1 width=748 align="center" valign="middle"><img src="entrance.jpg" width="1023" height="767"></td>
</tr></table>
<span style="position:absolute; left:337px; top:290px;">
<table width=354 height=58 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<tr valign="top">
<td colspan=1 rowspan=1 width=354 align="center" valign="middle"><img src="bar.jpg" width="353" height="58"></td>
</tr></table>
</span>
<span style="position:absolute; left:620px; top:375px;">
<table width=126 height=38 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<tr valign="top">
<td colspan=1 rowspan=1 width=159 align="center" valign="middle"><img src="photobutton.jpg" width="159" height="33"></td>
</tr></table>
</span>
<span style="position:absolute; left:265px; top:375px;">
<table width=126 height=38 border=0 cellpadding=0 cellspacing=0><tr valign="top">
<tr valign="top">
<td colspan=1 rowspan=1 width=126 align="center" valign="middle"><img src="illubutton.jpg" width="126" height="38"></td>
</tr></table>
</span>
</body>
</html>
Now is there anyway i can get the to stay in the center of any comp screen?
Thanks for the help everyone :)
There are far better coders than I - but let's start with basics:
<html>
To even begin to approach cross browser compatibility, you need to understand valid document types [webmasterworld.com] and your documents should validate [validator.w3.org]. This allows the browsers to render your document in Standards Compliance Mode as opposed to Quirks Mode, and your documents will render very differently in various browsers without a valid doctype and valid HTML. Google for these two terms for a greater understanding.
<body bgcolor="black">
I see you have inline CSS, which is not "great" but it's better than deprecated attributes (Google again.) Among these are center, font, many others; use CSS to apply presentation elements. In this example:
<body style="background:black">
<body style="background:#000">
External style will really clean things up:
<style type="text/css">
body { background:black;}
</style>
...
<body>
This link will search this site for Semantics [google.com]
I open this part with this,
<span style="position:absolute; left:337px; top:290px;">
<table width=354 height=58 border=0 cellpadding=0 cellspacing=0>
Because nesting a table inside a span is invalid code, but more importantly, if you understand the semantic meaning of an element, it will naturally lead to valid code. A "span" is just that, it is an inline element meant to span text, not surround block elements such as a table. I think your task here would be better served by applying styles to the table itself, but as presented if you are forced to "wrap" the table, you would use a div which is an anonymous element meant to divide the page into sections when no other element applies.
A second comment here, using tables for layout is a highly debated topic, as the semantics of a table are for tabular data, such as a grid or spreadsheet. We won't get into that one today (I hope) as it is highly debated - but right off, form a habit of quoting all attributes:
<table width="354" height="58" border="0" cellpadding="0" cellspacing="0">
So! Let's answer your question:
Now is there anyway i can get the to stay in the center of any comp screen?
YES! Lots of ways; using margin: auto on the container element is best, but in a tabled layout align="center" works.
<table width="354" align="center" border="0" cellpadding="0" cellspacing="0">
There are many things wrong with this approach, but it does work. Please don't use <center>, this has long been deprecated.
First address the issues above, then you can move forward from there.
Attribute definitions
align = left¦center¦right¦justify [CI]
Deprecated.[w3.org...]
The margin:auto; rule works well with tables, too, as long as a width is defined for the table. You can use it either inline as below, or in an external css file:
<table style="margin:10px auto;width:970px;">
And to think one could suffice with something like
<!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" xml:lang="en" lang="en">
<head>
<title>Widgets</title>
</head>
<body>
<ul>
<li class="bar">bar</li>
<li class="photo">photo</li>
<li class="illustration">illustration</li>
</ul>
</body>
</html>
And some CSS
now writing that CSS is easy enough were it not for legacy IE versions that tripple the amount of effort.
I'm not entirely sure this is the right place to show how to create the CSS, but a light mixture of relative and absolute positioning and a few backgrounds will do what you seek easily.
One of the all too common problems with some websites is that they were designed by graphic designers with no regard for accessibility, or for ease of crawling and indexing of the content.
As well as 'looking nice', how it works is also very very important.
well its going to be used a portfolio for my artwork.
Well, you want it to work in all browsers, and you want it to look professional, right? My advice, if you're not ready to take on a whole list of issues that will make a big difference in "how it looks," it to team up with a collegiate who's good at this. Work out a trade, you design graphics, they code to standards, everyone wins.
