SharePoint 2007: Adding space between web parts

Question

I need to add about 1/2 a centimetre of space (on an average screen) between two web parts on a dashboard page, one in a left zone and another in a right zone in a 2 column layout. I've added spacing between two vertically aligned web parts using a content editor web part containing only whitespace.

However, this is impossible for 2 horizontally aligned web parts in a 2 column layout. When I transfer them to a 3 column layout the middle column seems to have a set minimum width and therefore can't be used as a spacer.

Does anyone have a work around or will I need to use SharePoint Designer?

Answer 1

Sounds like a job for CSS.

Forget about units like "cm" in web design. Your own monitor may show it as 1/2 cm, but you don't know the resolution of the other folks that are viewing your site.

The unit of measure should be pixels. You can use CSS to define margins and/or padding around elements on your screen. If you dabble in dashboard pages, the you will need to learn about the basic make-up of a web page. CSS cannot be avoided. You need to know about it.

Next, you need to learn how to identify what CSS is applied to the elements you see on your page. In Internet Explorer you can use the F12 key to show the Developer Tools. You can click the arrow pointer icon in the Dev Tools window and then click an element on your site. Now you see the html of that page and on the other tabs you can inspect the CSS and the scripts applied to that page. Don't worry too much about the scripts, but you really need to learn about the CSS aspect.

If you understand how CSS works, you can then proceed to write your own CSS styles and load them into your site or into an individual page to override some default CSS settings.

All this is not being served on a platter. There is no easy answer as in "Tick this box and change that setting to 30.5". Your page is unique and does not exist anywhere else on the web. Therefore you need to understand the principles that make your page look like it does.

SharePoint creates HTML markup. SharePoint also provides built-in CSS to style these HTML elements. Even without using SharePoint Designer, you can completely change the look of a SharePoint page, by simply applying different CSS.

But in order to do that without SharePoint Designer you need to know how CSS works.

There are hundreds of CSS tutorials and learning resources on the Interwebz. Start with the first one that you find interesting and take it from there.

It may take a couple of weeks of studying to understand how it all hangs together and how it applies to SharePoint. But if you have that under your belt, you can command how a SharePoint page looks instead of being dumbstruck by how to change it.