Day 23: More on the Box Model Concept

Today I explored more of the CSS box model. The display property, in regards to how to set up a navigation bar, is something I spent some time playing around with.  I used the float property as well, something we had used previously, but I hadn't been totally clear as to how the elements interacted.  I set up some anchors, then gave them a border-style (none of the border properties work unless a border-style is set, although, you can set a border-style via the border property, since the border property accepts multiple values).

For example:

border-style: solid; 

border-color: black; 

border-width: 10px;

conveys the same as:

border: solid black 10px;

I created this today (I don't want to make it go live on the web via my hosting provider, so I just included a screenshot):

I gave the div a min-height that way when the browser screen becomes tiny, the div border does not keep going to the left until it "goes under"/passes the nav anchor elements.  I also gave it a min-height, that way when the browser screen is too short, the div border does not keep going up until it "goes under"/passes the nav anchor elements.  For the anchor elements' display properties, I set a value of block, that way the elements get their own line and stack on top of each other.  For the anchor elements' float properties, I set a value of left, that way the paragraph element could flow up and around the nav elements, which would float (position itself) to the left.

I learned about the box-sizing property as well today.  It's an interesting way to set the size of a box to make sure you get the size you actually want (it changes the border and padding to fit within the size you specify).  To do this, you can give that property a value of border-box, then in the line below, specify what property and value you wish to set, for example, width: 400px;, and that will be the total width, with the padding and border included.  The overflow property (through the use of the "hidden" value ("visible" is the default value) is a way to hide content that has gone outside of its box.  This property can also have a value of "scroll," which is neat, it creates a scroll bar within the box, so that the user can scroll through the box to see the extra content.  If the value is set to scroll, some browsers will give two scroll bars by default, a vertical and a horizontal bar, one of which may be unnecessary.  To avoid this, we can use the value "auto," which will provide a vertical/horizontal scroll bar only if necessary.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,398

Treehouse Points by Subject Matter: HTML 663, CSS 717, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 67% of all students."

Badge(s) Earned Today:

None

Courses Completed:

How to Make a Website
HTML 

Books Read or in Progress:

"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 5

Total Hours Coding: 94