css

TUTORIAL: SASS / CSS Positioning: Centering Object Groups

Placement in SASS / CSS can be a nightmare.  While centering text is a no-brainer with ‘text-align: center’,  sometimes you need to center something more complex, like a group of photos that are all different sizes.  Unfortunately, float: center is not an option in CSS.  So we’ll need a couple of workarounds.

This workshop will discuss two tried and true methods.  Both methods will require that you first wrap your object(s) in a div.

 

METHOD 1: “Zero Auto”

This method uses margins to center your objects.  Use CSS to set your div to:

div {

display: block;

margin: 0 auto;

}

Be sure to replace ‘div’ above with your div’s identifier.

The reason this method works is that you’re setting your top and bottom margins to zero, and your left and right margins to ‘auto’, which will take the width of your div and create margins accordingly.

Potential problems:

  • Nothing happened.  — Make sure that you gave your div a width.  Otherwise the ‘auto’ command won’t know how to measure out the margins.
  • My items are slightly off-center. — This could be due to preset styles for your HTML elements.  For example, your list items may be offset.  You console inspectorcan change this by going into your UL tag and making the padding 0.  It’s also possible that your nesting has resulted in your div having a left-hand margin.  Identify these types of problems using your console inspector (In Chrome, MAC: command-option-J, then click on the magnifying glass in the top left-hand corner of your console).

METHOD 2: ‘text-align: center’

If you thought this command was only for text, you’re not alone!  Actually, this command will work on the inner contents of any block, centering pictures, divs, or buttons.  This Team Treehouse resource talks about a few basic commands you can use with text-align.

To use text-align, here’s how your CSS should look:

div {

text-align: center;

}

Be sure to replace ‘div’ above with your div’s identifier.

Potential problems:

  • Nothing happened.  — Make sure that you wrapped the objects to center in a div.  Make sure that the code in your CSS is referencing the correct div in your HTML.
  • My items are slightly off-center. — This could be due to preset styles for your HTML elements.  For example, your list items may be offset.  You console inspectorcan change this by going into your UL tag and making the padding 0.  It’s also possible that your nesting has resulted in your div having a left-hand margin.  Identify these types of problems using your console inspector (In Chrome, MAC: command-option-J, then click on the magnifying glass in the top left-hand corner of your console).

 

If problems persist, consult Stack Overflow to get feedback specific to your situation.

Advertisements

App Development: First Impressions

I’m working at The CodEd on my first app Tot Text, along with my stalwart group members.  Before we get too far in the process, I want to log some first impressions of what it’s like to be doing actual coding — both front and back end.  Because it turns out that coding is a lot different than what I originally expected.  But also a little bit the same.

Things I did not expect:

1. The massive amount of file organization.

When I pictured becoming a coder, I saw myself working on one massive document.  I had no idea that I might be working on 500 files just for one website.  There is an unbelievable amount of organization, strategic naming, and file calling that goes into each part of the project.  Every time you rename something in one place, there are 50 other places that need to be updated by hand.

Sometimes I wonder if web development is closer kin to the ‘personal organizer’ profession than it is to the technology profession.

2. The amount of negotiation.

The IT/startup zone attracts hardworking people who stand by their work — but sometimes getting so many go-getters on the same page can be a challenge.  My group has been most successful when we’re using GitHub for version control, as well as update e-mails to let other group members know what we’ve done.

3. The number of technical challenges (even before we got started).

Between slow computers, bad network connections, different browser settings, different folder configurations … It took us about two weeks to all get GitHub working, not to mention getting anything done.  One day we missed an entire class period because we couldn’t find our GoDaddy account password. Another time we completed a timed project, but got no credit because we got kicked off the network.  I’ve had to let go and laugh at myself sometimes, and I’ve had to be patient other times when I wished I could just shake my computer to bits.

Screen Shot 2014-03-10 at 4.33.06 PM

Things I did expect:

1. Tired eyes.  

I know I’d be running my eyes through miles of code looking for that one unclosed bracket.  And I’m getting a little better at it!

2. Great camaraderie, great people.

People in my class are always ready to explain, always ready to help.  There’s something about these challenges that build is bonding — being totally, totally lost for hours, then having that one minute of clarity.

It takes a certain kind of person to slog through the hours.  And that’s one thing I love about this field.

3. An almost infinite amount to learn.  All the time.

I try not to get bogged down by this.  I wanted a challenge, after all.  And where there’s a challenge, there’s room to grow.

How to Be a Coder

Every profession has its unwritten rules.  In my project management job on Madison Avenue, these rules include never wearing flats or *gasp!* an un-padded bra.

From what I can gather, coders have a similar set of mores.  Here’s what I’ve picked up so far.

Good coders never…

  • Repeat themselves.  They are always DRY (Don’t Repeat Yourself.)
  • Use the mouse.  In fact, things like VIM are designed specifically to allow navigation with the keyboard.  You even use letter keys for page up and page down.
  • Leave the house without hair gel.  If you’ve got hair, any hair at all, there’d better be gel in it.
  • Leave the toilet set up, linguistically speaking.  This means that they never leave messy code for colleagues to sift through.  Good coders use tabs and comments to separate code out nicely, making it easy to skim.
  • Use Finder.  That’s what the Terminal is for!
  • Leave the house without their gear.  Whether it’s a backpack or, more likely, a messenger bag, coders need to have their laptops with them at all times.  i don’t think it’s a coincidence that the only guy I know who carries a dedicated man-purse is a coder.
  • Feel like their work is finished.  Their broken links litter the page like used car parts.  So many more ideas to implement!