PDA

View Full Version : Problems at lower resolutions



Kid X
Jan 23rd, 2009, 05:13 AM
Hey guys -

First of all, let me say... yes I am an ultra-n00b as this is my first post!

I know my site has violated the golden rule and uses tables almost exclusively (see ultra-n00b)... but my basic problem is this:

1) My site is laid out as one big table and nested tables within the big table.
2) I have integrating floating divs for ad banners on the website.
3) At low resolutions (below 1280 width) the floating divs move into the content box and push everything down.

How can I position the floating divs so that the view I get at 1280 is achieved (in scrollable form) at the lower resolutions?

My fix: so far what I've tried is defined the size of my "body" to 1280px and used margin: 0 auto to center the page for higher resolutions. However, my centered background image doesn't follow centering of the body but only in Firefox.

I'm confused!

Here are my relevant code sections...

HTML:

<body>
<table width="800px" border="0" align="center" cellpadding="0" cellspacing="0" class="linkcontainer">
<tr>
...CONTENT REMOVED...
</tr>
</table>

<div id="adleft">
<div align="center"><span class="style10">Advertisement</span><a href="http://www.quartersoncampus.com"><img src="images_template1/ad_leftQ.jpg" border="0" height="400" width="150"/></a></div>
</div>
<div id="adright">
<div align="center"><span class="style10">Advertisement</span><a href="http://www.quartersoncampus.com"><img src="images_template1/ad_rightQ.jpg" border="0" height="400" width="150" align="right"/></a></div>
</div>

<table width="800px" border="0" cellspacing="0" align="center" cellpadding="0">
<tr>
<td class="horizontal_column">&nbsp;</td>
<td class="horizontal_center"></td>
</tr>

... CONTINUE WITH PAGE TABLE...

CSS:

#adleft {float:left; background-color:transparent; width:150px; height:400px;}
#adright {float:right; background-color:transparent; width:150px; height:400px;}

body {
background-color: #000000;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width:1200px;
}

(old body without quick fix)body {
background-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-image: url(../images_template1/border223.jpg);
background-position:center;
background-repeat:repeat-y;
}

Here is the site: www.planetlonghorn.com

abduraooft
Jan 23rd, 2009, 09:14 AM
Hi Kid X,
I'd recommend you to check the following links to find a solution for your issue.
Why Frames Are Bad (http://www.webaccessstrategies.com/blog/id/why-frames-are-bad/)
Why tables for layout is stupid: (http://www.hotdesign.com/seybold/)

After that check http://bonrouge.com/2c-hf-fixed.php to see how to build a good 2 column layout.

tagnu
Jan 23rd, 2009, 09:15 AM
Hi,

People seldom help you in this forum if you are still using tables for layouts. Tables are frowned upon and it has to be, for layouts.

I understand you're just starting out.

If you really need some pages up at the earliest, I recommend you go with some existing layouts (also take time to learn them).

Looking at your site, I feel you'll need a 3 column layout. Try this
http://bonrouge.com/3c-hf-fluid.php

Also, in the layout, you don't give width to the body.

You need a wrapper, on which you set the width.

Something like:


<div id="wrapper">
.......
.... content...
....
</div>

css:


#wrapper{
width:1200px;
margin:0 auto;
}


Also, check out some tutorials on creating layouts using css.
http://www.maxdesign.com.au/presentation/page_layouts/

Hope it helps. Best of luck.

jerry62704
Jan 23rd, 2009, 03:47 PM
Kid X: Below 1280 is NOT low resolution. Try looking at it in 800 or even 1024 widths.

Tagnu: We certainly do help people that insist on using wrong code such as tables for positioning. Most people that use tables don't even include accessibility into those tables. sort of like thinking a car doesn't need oil to run I guess.

Kid X: Kudos for including a DOCTYPE, but you might want to use the correct one. As your site is based on frames, try this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

You know know you will take a hit on SEO, right?

Kid X
Jan 23rd, 2009, 07:41 PM
Yes... I will be making the laborious switch to divs over the course of the next few months. It will be a splendid learning experience! I think I'm just going to start it from scratch, but for now, we'll be using the quick fix to sell more ad space.

Thanks for all the references!