Class Wednesday, January 27, 2016

Today’s goals:

Today’s featured website:

What is the CSS Display Property?

More About the CSS Display Property

CSS can control not only the page layout, but also how individual elements are displayed on a webpage.
We will practice block, inline, and inline-block today and tomorrow (later we’ll discuss flex).
Block elements take up as much space as they can (the full width of a page or container) and start on a new line (think paragraphs, headlines) while inline elements (the default display) are inline with the rest of the content and don’t start on a new line (like images, links).

Remember the CSS box model? Every element basically has an invisible rectangle around it that can have a border, background color/image, width and height (margins, borders, padding). The CSS display property can control that rectangle and the inline-block value can make inline elements respond to the styling options available for the box model (margins, borders, padding, width & height) while also keeping it inline.

Remember, to create the menus you used in your webpage project, you styled bullets and changed the display to inline or block to make a navigation panel that had a width and height and background color, among other things (see examples here).
Let’s look at the navigation panel examples and discuss why some have display: inline and others have display: block. Consider: is the menu horizontal or vertical; bullets are by default inline; block elements can have a width and height

Using Bullets with Block & Inline to Create Menus

To begin, open Notepad++ and start a new page.
To better understand block and inline, you are going to create two menus similar to what you see here, one vertical and one horizontal.
Let’s start with a vertical menu:

Start a new page with the basic opening and closing html, head, and body tags.
Put a style sheet in the head section by adding style type=text/css (peek at your past projects for a reminder) or check-in here.
Add four bullets in your body section (go here for a reminder). Call them Home, About, Videos, and Blog.
Make each bullet a link and for the link source put #. Check-in here.
Now you have a list of regular bullets with links. Go ahead and preview that in the browser. Not very exciting but if we remove the bullets and change the display we can create a vertical menu!
First you are going to add ul to your style sheet in your head section and then remove the bullets- go here to see how this looks.
Now, let’s add li a to our style sheet- that is the bullet along with the link. Once you do that, add display: block to make the whole menu, not just the link, clickable for each bullet item. See here.
Now you can see a vertical menu taking shape. Change the background color of the menu. Change the text color. Try adding a link hover effect. Try adding a border around the outside of the menu. Try adding a border around both the outside and inside. See here for some guidance and see here for colors.

First, comment out your style sheet since we’ll make a new one. Add HTML comment code around the style sheet in the head section. Check-in here.
Now, create a new style sheet and add an li with display: inline and a ul with the same properties as the previous style sheet for list-style, margins, and padding (like this).
Now, comment out the display property in your style sheet for li (should look like /* display: inline */). Add float: left to li.
Let’s style the links in your bullets to make it look more like a menu. Add li a to your style sheet and add padding: 8px, background-color: green, and display: block (like this).
Why did we float the bullets? Why did we make the bullet links have display: block and not inline?
To make things more exciting, use this code as a guide and change up the colors. Also try adding borders.

MHS Web Design