Wire Frame Notes 9/22

Create wireframe layer within photoshop file (place boxes)

Measurements of boxes don’t matter

*container (div) = draw box around entire photoshop design

*header = box around logo and navigation

*logo = box around logo

*nav ul = box around navigation panel

*li = boxes around individual page titles (labeled beer, visit, connect, about, shop, events)

*article = box around main body content within container

*about = box inside main

*intro = text within article and container

Nav ul li

“ul” is the unordered list. The “.nav “part is referring to the name of a class, and the last part “li” refers to the list items of that list. In summary, the statement ul.nav li is targeting all the list items inside the unordered list that has the .nav class applied.


I. Navigation (html)

Screen Shot 2016-09-22 at 11.39.43 AM.png

II. Navigation (css)

Screen Shot 2016-09-22 at 11.04.15 AM.png

III. CSS Box Model (left align navigation)

Margin = outside of the box

Padding = inside of the box

Screen Shot 2016-09-22 at 11.12.08 AM.png

IV. Float Command (clears stacking, allows for spacin)

screen-shot-2016-09-22-at-11-21-56-amScreen Shot 2016-09-22 at 11.22.48 AM.png

Short cut!

Screen Shot 2016-09-22 at 11.33.47 AM.png

V. Footer (html)

Screen Shot 2016-09-22 at 11.39.51 AM.png

VI. Footer (css)

Screen Shot 2016-09-22 at 11.43.15 AM.png

Adding images (social media icons) to footer:

Screen Shot 2016-09-22 at 11.55.49 AM.png