1 / 7

Web Foundations

Web Foundations. Wednesday, October 9, 2013 LECTURE 9 : Using Floats for Layouts, CSS FORMATTING LAB. Using Floats for Layouts

tyanne
Télécharger la présentation

Web Foundations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Foundations Wednesday, October 9, 2013 LECTURE 9: Using Floats for Layouts, CSS FORMATTING LAB

  2. Using Floats for Layouts Layouts are where the float property is incredibly useful. We can achieve the traditional two-column layout in a variety of ways; most of them use one or two floated elements. Let’s take a look at a simple example: a two-column website with the content area on the left, navigation on the right, and a header and footer area to cap it off. For the sake of this example, we’re only going to look at the code related to the floated elements. Floatutorial: Float Tutorial- Learn CSS Layout: Float- Smashing Magazine: The Mystery of the Float Property

  3. #container { width: 960px; margin: 0 auto; } header { padding: 5px; background: #c99; } section { float: left; width: 780px; background: #fcc; padding-left:5px; padding-right:5px; text-align:justify; } nav { float: right; width: 160px; padding-top:15px; background: #fcf; } footer { clear: both; background: #c99; padding: 5px; } Ok, let’s talk about what’s going on here. Our containing parent is aptly called #container. This holds our floated elements in place. If we didn’t have it, our floated elements would shoot out to the far left and right of the viewport (our browser window). Up top we have our header. Next, we have section and nav. These are our floated elements. We sent section to the left, and nav to the right, to achieve our two-column layout. I’ve defined a width for each, so that they fill our entire parent container. Finally, we have the footer, on which we’ve set the clear property. As we know from before, this clear property brings the elements following any floated elements back into the normal flow. In this case the footerhas the value both assigned to it, causing our footer to sit below both the section and nav elements.

  4. Using Floats for Layouts What would have happened had we forgotten to assign the clear property to our footer? Our page would look like this: Our footerhas slid up underneath the nav. This is happening because there is room underneath the nav for the footerto fill, and given the normal flow that we work within, this is actually the correct behavior. But it’s definitely not what we’re looking for, is it? You can start to see the interaction between the float and clear property and how they complement each other so well.

  5. Using Floats for Layouts Some Tips & Tricks: Faux Columns Demo: "Original" 2-Column Page Demo: Updated 2-Column Page using a "Faux Column" Discussion: Equal Height Column Debacle Code-Sucks: Faux Column Layouts Vanseo Design: 4 Methods for Creating Equal Height Columns in CSS Some Tips & Tricks: Using height or display:table Demo: Using height Demo: Using display:table

  6. CSS Align: Margin, Position, or Float DEMO Crossbrowser Compatibility Issues body{ margin:0; padding:0;} http://www.w3schools.com/css/css_align.asp

  7. The CSS Formatting Lab Walk-Through We're going to walk-through and work-through the CSS Formatting Lab IN-CLASS. If you have already completed the CSS Formatting Lab and correctlyuploaded and linked it in your Portfolio, then you are free to work on other HTML/CSS labs, Communication assignments, or Team Project material.

More Related