Foundation HTML5 with CSS3

Page Layout with CSS Figure 9-20. The min-height property ensures there’s always room for the positioned image CSS also offers a ...

Chapter 9 element within its container. However it can be useful for menus or messages that you want to remain visible as your u ...

Page Layout with CSS Figure 9-21. The styled page before positioning the masthead Adding a position:fixed declaration to the mas ...

Chapter 9 Figure 9-22. After positioning the masthead out of the normal flow, the masthead collapses and the rest of the content ...

Page Layout with CSS space behind it. Listing 9-7 shows the style rules for the masthead and article, with the latest additions ...

Chapter 9 326 Figure 9-23. The masthead no longer covers the article’s title when it’s at the top, and it remains fixed in place ...

Page Layout with CSS Internet Explorer didn’t support position:fixed prior to version 7, though most other browsers have support ...

Chapter 10 Putting it All Together You’ve learned a lot about modern, future-friendly markup in the last nine chapters, with a h ...

Chapter 10 330 A Web Design Process There is no universal, one-size-fits-all, written-in-stone procedure for designing and const ...

Putting it All Together  Every site has constraints: time, budget, resources, equipment, technology, and so on. What constraint ...

Chapter 10 Figure 10-1. A minimal site map drawn as a flow chart The real point of drawing a site map is to get you to think abo ...

Putting it All Together Typically, at this stage in the process, wireframes should steer clear of the more visual aspects of des ...

Chapter 10 start thinking about the underlying HTML structure, considering which elements you’ll eventually use to give the cont ...

Putting it All Together Rather than invest a lot of time into rendering a high-definition mockup, it’s often more efficient to s ...

Chapter 10 You can also conduct user tests, recruiting real people to try your site and give you feedback. Observe what they do ...

Putting it All Together Setting Up the Document Unless you’ve skipped the previous nine chapters, you know by now that behind ev ...

Chapter 10 JavaScript. We can use the HTML5 shiv script to do just that, but we really only need to send that script to IE and n ...

Putting it All Together Listing 10-2 shows the conditional comment we’ve included in our header to load the HTML5 shiv script, a ...

Chapter 10 but HTML5 gives us an element for just this purpose: header. Because it appears at the beginning of the document with ...

Putting it All Together <div id="utilities"> <form id="search" action="/search"> <p> <label for="search-mai ...