Help with table centering on different monitor sizes?

[rawdog156]

I am so glad I found this forum. I am a TOTAL newbie when it comes to web design, but I started 2 months ago and built my site using Yahoo sitebuilder. I loved it and everything looked great - Then I bought Page Publisher and had to teach myself how to enter the WYSIWYG tags so I could do daily updates - This weekend I went to my dad's house and looked at my site on his 22" monitor and was astonished at how terrible it looked - On my 19" monitor at work it's looks okay and my 17" at home it looks fine but on the bigger monitors the pages go to crap - So I started looking at my HTML coding and realized that all my tables are set Absolutely (example: div id="e17" style="position:absolute;left:121;top:450;width:150;height:30;"> -
SO, I want my tables to be centered on any size monitor, but I am guessing I need to keep the table position set at Top450 and the width locked, etc. The Divide ID tags I really don't know what they are, but everytime I mess with one it really screws up the page -

I looked at some advice and found ALIGN="CENTER" - Can I just enter this tag someowhere in my HTML and have the tables center the screen, w/out really screwing up the layout? I also read about using %'s and something like 100% will keep margins perfect - Is this an attribute I can just add to my table? I'm guessing there is a simple fix, but I don't have a clue what it is - would appreciate some help - Thanks

Here is a table example of my HTML page (I know this is probably real! ugly) if that helps -

</td>
</tr>
</table>
</div>
<div id="e2" style="position:absolute;left:31;top:195;width:930;height:210;">
<table border="0" cellspacing="0" cellpadding="0" width="930">
<tr>
<td nowrap height="210"><span class="text"><b><font face="Copperplate Gothic Bold" color="#66FF33" size="6"><span style="font-size:36px;line-height:41px;">PICKS OF THE DAY!<br><br></span></font></b><font face="Felix Titling" size="4"><span style="font-size:18px;line-height:22px;">I call these my Broken Mirror picks. You will learn that I have about the worst luck <br soft>you could imagine when it comes to sports betting - For these picks I do recommend <br soft>going opposite at least 90% of the time - if you love the game also, go ahead and bet with <br soft>me - just be aware that I'm a very! consistent loser<br soft></span></font></span>
</td>
</tr>
</table>
</div>

[jtara]

Back-up and start over.

Get a good modern book on website design using CSS and HTML. Or find a good website that teaches the same.

Your page is a mish-mash of HTML from various eras. The mix of CSS tagging and direct formatting is bizarre.

The DIV tag indicates a "division", not "divide". It's giving the division a name. The formatting of the division is determined partly by formatting instructions in a separate "style sheet". That's why the formatting goes to heck if you remove this. Why they did this and then threw-in a bunch of in-line styles is beyond me.

Not your fault - but sitebuilder's. Don't rely on a WYSIWYG tool starting out - first understand the basics of HTML layout. It's particularly difficult to hand-tweak the output of a WYSIWYG tool when you don't understand the basics of HTML formatting. The output of the WYSIWYG tool is going to be much more obtuse than hand-written HTML. Ironically, fixing-up the results from a WYSIWYG editor is for experts only. It just wasn't written to be understood by humans, and is generally far from optimal as well.

A good book or web tutorial will get you started in the right direction, and one of the first things it's going to cover is centering tables. And they will spend a lot of time on flexible design.

As far as screen size, I wouldn't be too concerned about it. First of all, it's an incorrect assumption that most users will browse with the browser window maximized to the entire screen. Thus, somebody with a bigger screen might be browsing with a SMALLER browser window than somebody with a smaller screen! You need to write pages that are widely adaptable to different window sizes.

[londrum]

yeah... hand-coding stuff is a lot better when you're learning. because you're just going to learn bad habits from all that code your program is churning out. half of the stuff it's giving you is completely unnecessary.

for example, you could replace that div and table you've got with just this:

<table style="margin:0 auto;width:70%">
 <tr>
   <th>PICKS OF THE DAY!</th>
 </tr>
 <tr>
   <td>I call these my Broken Mirror picks. You will learn that I have about the worst luck you could imagine when it comes to sports betting - For these picks I do recommend going opposite at least 90% of the time - if you love the game also, go ahead and bet with me - just be aware that I'm a very! consistent loser.</td>
 </tr>
</table>

[rawdog156]

thanks - I've heard about CSS but haven't taken the time to go figure out what it is or learn it -

quick supplement question - Does all the "extra" HTML coding and what not cause my pages to load slower? I read that pic's and images will slow down your pages, so I tried to keep those to a minimum - but does all my extra HTML cause slow loading either?

I am strongly considering taking a web design class - but maybe I should just go get a book and figure it out - One thing for sure is that I have learned a TON the last couple months - When I started I only knew fonts and colors :)

thanks

[rawdog156]

<table style="margin:0 auto;width:70%">
<tr>
<th>PICKS OF THE DAY!</th>
</tr>
<tr>
<td>I call these my Broken Mirror picks. You will learn that I have about the worst luck you could imagine when it comes to sports betting - For these picks I do recommend going opposite at least 90% of the time - if you love the game also, go ahead and bet with me - just be aware that I'm a very! consistent loser.</td>
</tr>
</table>

if i use ^^^^ for my table, how can I get it "placed" at the top of the page like I need it? Should I leave in the "Div" tags and just replace the table elements with this? the problem I've had with changing any table properties is that the table suddenly disappears - Probably related to exactly what the first response was about - Is there an easy placement tag I can use so that it stays in the right area of the page?

[draggar]

Don't forget to center the table and then center the data (if needed, the TR and TH tags). Don't be afraid to force a code to do what you want it to do.

<center>
<table width=75%>
<tr>
<td><center>Blah blah blah</center></td>
</td>
</table>
</center>

I'll vote also for getting some good books. I've found some really nice visual books, HTML, XHTML, CSS from a really Peachy publisher. They're not too expensive, either, most are under $20 and to the point.

[jtara]

Another good idea is to keep it simple. Don't try to do anything too fancy starting out.

It might be an extreme view, but I'd suggest starting with plain text, with no markup whatsoever. OK, maybe use the <P> tag.

I think beginners tend to go crazy with lines and colors and ornamental gee-gaws. Does this really need a table? Do you really need boxes drawn around this text?

First get the right content on the page. Then, gradually, make it pretty.

OK, I realize (if your example copy is actually from your site) that you're in a field where flashing neon lights are the norm. :) But, be different and see where it takes you!

The beauty of CSS is that you can try-out alternate designs with relatively little effort. Once your text is marked-up with ID tags, you can fiddle with style sheets and not have to touch the actual content. As well, you can just use style sheets that others have written (there are many sites where you can get free CSS templates) and not have to learn all the intricacies of CSS right away.

[rawdog156]

I really appreciate you guys trying to help me - I think I'm just going to have to start at the beginning and really learn HTML. Tonight I tried to center one of my tables and it just sent it right to the very top of the screen. So I will start at the beginning and go through this forum (and get a book of course) - Cause going in and messing with code at this point is kinda useless - for me to try that is - I am copying code right from my site...Trust me, I'm not clever enough to "fake" someone elses code :)

I tried to replace "Div e1" with the center codes - I also copied 2 other "div" tables that I didn't mess with - My site is at <url removed> (not to spam anyone, just so you see this really is my own lousy web design lol)_ I do want to learn how to do things right, but at the same time i'm up and running and have a clientele that checks regularly so I don't want to shut down for a couple weeks, you know? anyway, here it is - how bad is it? And thanks again to everyone!

<!--$begin exclude$-->
<div id="centerwrapper">
<div id="root" style="position:absolute;width:1011px;height:1423px;">
<!--$end exclude$-->
<div id="e0" style="position:absolute;left:1;top:0;width:1007;height:144;"><!--$img %RemappedImageAsset:/sitebuilder/clipart/bars/regular/horizontal/spotLightMontage.jpg$--><img src="clipart/pageHeaders/spotLightMontage.jpg" width="1007" height="144" alt="">
</div>
<div id="e1" <center>
<table width=75%>
<tr>
<td><center><span class="text"><font face="Felix Titling" color="#F9F9EB" size="4"><span style="font-size:18px;line-height:22px;">There are several things I have heard and read from people I respect and listen to. I'm sure <br soft>everyone has their own gambling philosophies, but it is always good to do as much research as possible. This page will be for articles and advice I find useful for sports bettors. If you would like to submit an article, please use the</span></font><a href="mailto:[e-mail]" target="_blank"><font face="Felix Titling" size="4"><span style="font-size:18px;line-height:22px;"> contact us </span></font></a><font face="Felix Titling" size="4"><span style="font-size:18px;line-height:22px;">form. We are always looking for helpful information for sports bettors!<br soft></span></font></span></center></td>
</td>
</table>
</center>
</div>
<div id="e2" style="position:absolute;left:796;top:0;width:200;height:30;">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td nowrap height="30" align="center" valign="top"><span class="text"><i><font face="Arial Black" color="#110101" size="4"><span style="font-size:20px;line-height:29px;">STOLEN ADVICE!<br soft></span></font></i></span>
</td>
</tr>
</table>
</div>

[edited by: encyclo at 12:58 pm (utc) on Dec. 3, 2007]
[edit reason] no URLs thanks [/edit]

[jtara]

Unfortunately, WebmasterWorld is rather absolute about not posting your site's URLs, so presumably a moderator will come along presently and edit it out of the last post. Sorry.

I did take a quick look, though. I would stop trying to fix-up your tables. You have absolutely no need for tables at all, and it is just complicating things. You have a simple page layout that for the most part just flows from top to bottom. No need for tables, worrying about widths, etc.

(The only thing that has to be at all concerned with a width are the archaic section buttons in the button strip at the top of the screen - I'd update to a more modern layout...)

This is some of the worst HTML I've seen in a long time. Again, no reflection on you - it's the garbage pumped-out by sitebuilder.

One thing you might consider is using an HTML editor that runs on your PC and has dual WYSIWYG/HTML modes. These allow you to work WYSIWYG and then see the resulting HTML, or edit HTML directly with some "assist". (Syntax coloring, pop-up choice boxes, etc.)

[rawdog156]

thanks a lot - I didn't want to spam the site, just showing that this really is all the crap I have on my stuff :)

you don't like the buttons? Those are my favorite :) However, someone did say it looks like "Christmas on Crack" :)

like i said, I have to learn from scratch and work on it - That's what I will do - go get a book and figure out how to really do this stuff -

thanks again -

[rawdog156]

so I did figure out something on Sitebuilder that MAY be helpful to others using sitebuilder (but aren't real tech advanced, like me) - If you simply hit the SHOW GRID button (one of the pull down menus under Edit I believe) then you can just place the "tables" and/or "text" you have in the center by just counting the squares to each side....So instead of eyeballing everything, I found that this weekend and cleaned up my whole site - Except the picks pages because those have my WYSIWYG PML tags in it and it's going to take more time to re-write those....

but anyway, if that helps anyone - it sure helped me

[Samlawali]

New to this site and new to site building as well. I had a similar issue where a site looked good on one size screen and terrible on another. I ended up learning to keep my sites justified left and also using pixels to size my tables instead of %. If I want a site to stay one size no matter what screen I view in I use say 900 pixels for the main body of the site instead of 90% of the screen.

Hope that helps and made sense.