PDA

View Full Version : Remove extra whitespace..please help



dwlax.com
18 Jun 2010, 09:23 PM
Hey guys,

I'm having trouble with extra white space on my website. To the right of my content and below my footer is extra whitespace. Is there a way I can specify the width and height of my page or to remove the whitespace. Here's the link http://www.dwlax.com/coaching.html. Thanks for your help in advance.

Andrew

hollowunknown
22 Jun 2010, 09:14 AM
Hi,
Im just skimming through your page and i have a few thoughts that i think i can help you with. There is a number of CSS changes you can make which will help your page layout.
but,

Why have you used position absolute?
from what i can see it is to keep the design at the top of the page?
Why not use a system where the content will float?


Im not saying you cant use position: absolute; but this does cause some problems with whitespace if it isnt used correctly.

Here are some suggestions.
I would add at the top of your CSS file,



*
{
margin: 0px;
padding: 0px;
}

body
{
font: size font; /*Here you need to put in your chosen font for all pages and the standard text text*/
background: #colour; /*Here you need to add the colour of the page background.*/
}

This reason can be explained in http://www.clagnut.com/blog/1287/, which describes that for a global cross-browser compatibility you can then have a global setting for each element. Each browsers reders lists and headings and elements with their own paddings and margins which cause pages to display differently. This simple CSS solution will solve this.

Secondly i would suggest moving to XHTML, its much cleaner and better to work with as the layout ensures you must close tags and they must be logically nested. which will aid your development work but clarifying the areas of content. You have a large number of unclosed tags which maybe valid for HTML but means pages can render badly in various browsers.

I love your enthusiasm for DIVS and think its wonderful that you want everything in DIVS but you need to draw a line of the use of DIVS unecessarily.

You wont need to use the <font> tag for text after the above CSS change as all font will be the same. You will only need to use <p> tags for text so google recognises these as text paragraphs. You can then decide on the paragraph margins and paddings after.

The Title bars which are black and spans the content panel, you can use as H2 headings which can be set a height, line-height and width to span the size of the content panel as well as a background colour which will make the same effect. but without DIVS and the text can be added as just paragraphs. Leaving you with content that flows. using only 2 divs.

If you want to work with me via email, im happy to help you!
I think i can really improve the site and you may well learn alot.