Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Removing unwanted padding using grids

I've moved a website from just plain div tag divisions to grid using the tutorials in HTML/CSS, but I'm getting some unwanted padding between elements horizontally, and I can't figure out why it's happening. I've watched the vids over and over and can't figure this out. Here's my code, I'm using the grid from the video.

There should be no padding in between the maroon header and its sub header, and I'm getting padding across the top at the beginning of the page.

Index.html:

<html>

<head>
<title>KE7UQO's Raspberry Pi File Server</title>
  <link rel="stylesheet" type="text/css" href="normalize.css"/>
  <link rel="stylesheet" type="text/css" href="grid.css"/>
  <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div class="container clearfix">
  <div class="grid_12">
    <div class="grid_1">
      <img class="pi" src="pi.jpg" alt="Raspberry Pi Logo"></img>   
    </div>

    <div class="grid_11 omega">
      <p class="titlebar">KE7UQO</p>
    </div>

    <div class="grid_1 alpha">
    </div>
    <div class="grid_11 omega">
      <p class="subtitle">Raspberry Pi File Server</p>
    </div>        

    <div class="grid_3 alpha">   
      <li><a href="http://www.google.com">Link 1</li>
      <li><a href="http://www.google.com">Link 2</li>
    </div>
</div>
</body>
</html>

Style.css:

a{
    text-decoration:none;
    color:grey;
    font-family:verdana;
    }

p.titlebar{
    font-family:'Ubuntu', verdana;
    font-style:bold;
    font-size:60px;
    color:#1b191a;
    background-color:#bd1143;
    border:0px, 0px, 0px, 0px;
  padding:0px;

    }

p.subtitle{
    font-family:'Ubuntu', georgia;
    font-style:italic;
    color:grey;
  padding:0px;
    }

div.container{
    border:none;
    color:1b191a;
  padding:none;
    }
    margin-left:100;
    background-color:#bd1143;
    border:none;
    height:80;
    }


hr{
    color:"grey";
    }

body{
    background-color:#1b191a;
    }

6 Answers

Alexander Sobieski
Alexander Sobieski
6,555 Points

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!

Alexander Sobieski
Alexander Sobieski
6,555 Points

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...)

James Barnett
James Barnett
39,199 Points

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.

Alexander Sobieski
Alexander Sobieski
6,555 Points

@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.

Alexander Sobieski
Alexander Sobieski
6,555 Points

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] )