The #wrapper div
- In the HTML, enclose all of the content between the <body> tags in a #wrapper div: <div id = “wrapper”>.
- In the CSS style the #wrapper ID in the following way:
- You want to assign a width (something like 800px)
- You want to set margin: auto; this causes the #wrapper to center in the browser window.
- In the HTML, put the menu items within <li> tags.
- In the HTML, before the first <li> tag, put the <ul> tag. After the last </li> tag, put the </ul> tag. So your navigation looks like this:
- <li> menu item 1 </li>
- <li> menu item 2 </li>
- <li> menu item 3 </li>
- <li> menu item 4 </li>
Normal Document Flow
Left to itself, HTML and CSS stacks elements flush left, one on top of the other, based on the order they appear in the HTML. This is called Normal Document Flow. The best way to work with positioning in CSS is to start with Normal Document Flow and then only make those changes that are necessary to achieve your design.
Float is a property that will let two elements align in a layout. For our purposes, I recommend that you use it only to float an image inside a box of text. You can also use Float to position two columns next to each other, but you do not have the same control that you have when you use absolute positioning. Apply the Float property to an img tag in the CSS. Here are some URLs that explain the use of Float and Clear:
Absolute positioning is a much clearer way of ordering layouts. With Absolute Positioning you specify the x.y coordinates of a box element. To make Absolute Positioning function correctly, you should specify an outer box as the area the absolutely positioned element is positioned relative to. The outer box is set to position: relative; and this lets the browser know that anything with position: absolute; within the outer box is positioned within it. If you don’t assign position:relative to an outer box, the absolutely positioned element will be positioned relative to the browser window. In our situation, the #wrapper is the outer box and the article is the absolutely positioned element. It looks like this in CSS:
Inside Absolute Positioning – http://css-tricks.com/absolute-positioning-inside-relative-positioning/
TO INSTALL GOOGLE ANALYTICS IN A WEB PAGE
- Find the tracking code snippet for your property. Sign in to your Google Analytics account, and select the Admin tab. …
- Find your tracking code snippet. …
- Copy the snippet. …
- Paste your snippet (unaltered, in its entirety) into every web page you want to track. …
- Check your setup
Here’s a short video
- Learn the basics of mobile app development strategies.
- Work in a team to research and produce a prototype for a new app.
- Participate in the Scripps Innovation Challenge.
- Learn the basics of HTML5 and CSS3.
- Produce a new layout for the Zen Garden project.
- Produce an interactive photo slideshow with HTML5/CSS3.
- Produce a multimedia package with HTML5/CSS3.
- Learn how to give and receive constructive criticism.
REQUIRED TEXTS AND MATERIALS
NO BOOK is required for this class. However, ALL STUDENTS must have the following by the second week of class:
All equipment that students will need for class assignments may be checked out through the Equipment Room, once you have signed a Release and Assumption of Risk form (we will do this in class).
A new report from a VC newsletter:
They invented a new region – “So-Flo.” It includes Tampa.