Archive | Category 5 RSS feed for this section

Margin, Padding, Border

17 Oct

So my mind was blown when Travis showed me this trick in class this week. 

(Side note: sorry if we already talked about this in class Rob and I missed this).

I was having lots of problems getting my horizontal navigation to match my some sidebar navigation I was building.

Basically the navigation looks the the one we “borrowed” from the W3C:

Screen Shot 2013-10-17 at 12.27.38 AM

 

I basically wanted my side navigation to look like that, but I couldn’t figure out how to do it. It was looking like this. Screen Shot 2013-10-17 at 12.21.36 AM 

This doesn’t look great. 

BUT in the developer tools in Chrome, you can play around with the margin/border/padding tool. (I know you’ve shown us this in class, Rob). But what I didn’t realize is that you can click on the dash marks or numbers in this image and enter numbers to change the pixel count. My mind was blown. You can see instantly how big things will be and how they will change.

Screen Shot 2013-10-17 at 12.22.59 AM Screen Shot 2013-10-17 at 12.23.06 AM

I was able to use this to hack around with the sizes to fix my navigation.