Removing unwanted padding using grids

check out http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/

There is a video that explains the 960.gs grid system -- it will give you a good background in how grid systems work.

I have used that system a lot (in the past).

A Note on Testing

• using Chrome or Firefox, right-click the page and select "inspect element" -- you'll see all the html and css that the browser is reading... hopefully, you can see what is causing the spacing weirdness. -- they also allow you to hover over an element in the HTML with the inspector tool, and it will highlight the element on the page + show margin/padding around it.

• adding a funky color to the background of an element will visually show you how much space it's taking up.

Final 2 notes:

• if you provide a link to your dev site, we can help more -- if it's on your local machine, obviously not, but if you have it on a test site somewhere, send a link.

• The best place to start is to

  • write the text/basic html elements (no styling and no formatting.
  • go back through and add IDs and Classes to your html elements.
  • add the style to those elements.

This prevents you from being tempted to wrap things in extra divs, or to use excess code to "hack" your design to look correct.

Before anything, your site is a text document -- all the visual stuff should be handled via CSS (unless you're coding emails, and then throw out all logic, reason, and hope).

Good luck!

Hi @Andrew,

There's a LOT of stuff going on here that is potentially causing problems. I'll try to pick a few out, but you may want to review the material again.

Also check out the w3schools.com CSS references and explanations.

First of all, there are several items that are not valid CSS

/*example: */ padding: none;  /*should be*/ padding: 0; 

Secondly, are you using a 12-col grid?

if yes: you probably want your title bar to have a "grid_12" - Don't use empty DIVs to format. Side note: if you want an 11-col titlebar, most grid systems come with classes that use ".push_2" or ".pull_1" and so forth. Those are set to allow you to, for example, have an element bump a grid col, or several, to the left or right.

<div id="example" class="grid_7 push_5"> Some content</div>

Third: Make sure you have a "reset.css" file included. By default, many browsers will automatically add padding and margin to certain elements. A css reset file will take care of that.

Fourth: You may be missing a couple things: margin and line-height. Those both add space around text.

Fifth: unless it's important to your content, it is more semantic to remove the div tag around the title and to use heading tags. Try:

<h1 id="titlebar" class="grid_11 omega push_1">KE7UQO</h1>
<h2 id="subtitle" class="grid_11 omega push_1">Raspberry Pi File Server</h2>

(also, the grid_3 doesn't need the "alpha", unless you have several blocks in a group, in which case the 1st one gets and alpha and the last gets an omega)

(more in a second...)

Alexander - Those are some awesome tips testing and troubleshooting issues with CSS.

adding a funky color to the background of an element will visually show you how much space it's taking up.

My all time favorite CSS rule is outline: solid red; as outlines don't add padding, it's super quick to add as a test.

@james - that's a good one! - For some reason, that never occurred to me. I'll try that.

Question: by using an outline for testing, have you experienced that it gets covered-up or possibly leads to misjudging the size of an element? (especially when you get into background colors, z-indexes, etc. -or more complicated situations).

ex. multiple inline (or inline block) elements that have a margin of "0" - more complex drop-down navigation, etc. (esp. when getting into styling plug-ins or other 3rd party things that may interfere or be interfered-with).

Thanks guys. This is why I love Treehouse.

I tried the line-spacing and margins, which got rid of the unwanted padding. I'll have to figure out how to change to h1 & h2 for titlebar and subtitle and make them style correctly in my CSS.

Eventually this page will reside on a Raspberry Pi computer and be off-internet for use as a local WAN over WiFi network using modified WRT54g routers with a Ham Radio firmware, called HSMM-MESH. It will be the front page for my FTP file server, running on the Pi, serving up files during a public event like a race or parade, or during an emergency (the Pi has a very low power consumption and physical size.) For more info on HSMM-MESH, visit hsmm-mesh.org

I discovered the inspect element tool in Chrome when trying to view the page source. Very cool tip! And I like the outline tip as well.

What are you trying to accomplish with the header styles?

(do you have a flickr, dropbox, or similar account where you can drop an image [assuming you made a mock-up in photoshop before developing] )