Even More CSS Positioning

1
Even More CSS Positioning
2
Review

• What do each of the following CSS
  properties/values do?
  
• position
• absolute, static, relative, fixed
• overflow
• hidden, visible, scroll, auto
• width and height
• size in px, size in , auto
• z-index
• any number
• What is an ID and how do you use one?

3
Float

• Whenever you use relative or static positioning
  on an element like an img, it is a "block
  element", meaning it is treated as a big block
  that goes the entire length of the page.
• Any text you have will not start until UNDER the
  box.
  
• You often want to have text that goes AROUND an
  element, not just below it (like you would get
  with normal static/relative positioning) or just
  to the left or right of it (like you would get
  with absolute/fixed positioning)

Text text text text text text!
Text text text text text text!
floating box
regular box
Text text text text text text!
Text text text text text text!
Text text text text text text! Text text text
text text! Text text text text text text! Text
text text text text text! Text text text text
text text text text text text! Text text text
Text text text text text text text text text
text! Text text text text text text text text tex
t text!
4
Float

• The CSS property float makes a relative or
  static-positioned element go as far left or right
  as it can get in its container, then has
  everything else float up against it as it needs
  to.
• You can give it the following properties
• float right //goes as far right as it can
• float left //goes as far left as it can

5
Clearing a float

• What happens when text is floating around an
  element, but we don't want it to? In other words,
  we want a certain element to exit on its own
  line, and not float around an element around it
  that happens to be set to float.
• There is a property called clear that takes care
  of this for us
  

div with style set to floatleft
Text text text text text text!
Text text text text text text!
floating box
This text is in a paragraph or div with a style
telling it to clearleft
Text text text text text text!
Text text text text text text!
Text text text text text text text text text
text! Text text text text text text text text tex
t text!
6
Clear

• The CSS property clear can be given to prevent
  an element from floating around another element
  that uses the float property.
  
• You can give it the following properties
• clear right //no floating elements on the
  right side allowed
  
• clear left //no floating elements on
  the left side allowed
  
• clear both //no floating elements allowed
  on either side
  
• clear none /floating elements are allowed
  on either side
  

7
Background-attachment

• Last class, someone asked how we can get a
  background image to stay in the same place when
  you scroll (basically like using positionfixed
  does, but for background-images)
• The properties are
• background-imageurl("image.jpg")
• background-repeatno-repeat
• background-position 20px 40px //20px from
  the top, 40px from the left
  
• background-attachmentfixed //the image now
  won't move.
  

8
One note about HTML

• We've mentioned how you have to use gt to get a
  to appear on an HTML page, and lt to get a
  
• There are more characters you aren't supposed to
  use in HTML text, including " and in HTML.
  Instead, use the following "codes", and they will
  show up as the characters in the browser
• quot for "
• gt for
• lt for
• amp for
• hearts for ?
• For more special characters (including , , ñ,
  , ½) go to
  
• http//www.w3schools.com/tags/ref_entities.asp

9
Using Special Characters

• Just like when you give colors in CSS, you can
  use either the number of the color or the color
  name, when you enter special characters you can
  use either the "readable" name (like quot ) or
  the techical name (like 34 )
• The number is technically the preferred way to do
  it, but it is so hard to remember, I don't see a
  problem with using the readable one.

10
Next class

• Today, we have a really quick lab using float and
  clear that shouldn't take very long at all.
  
• Next class, we are going take our previous Lab
  Test and turn it into a second major grade
  dealing with CSS positioning.
  
• However, this time the format of the test will be
  different, because you will have a LOT of freedom
  in how you want to design it.
  
• I will be giving you a template HTML page, and
  you will be asked to come up with a creative
  design for it using CSS positioning WITHOUT
  EDITING THE HTML.
• After the lab today, in preparation for the lab
  test, you will draw out a sketch of a possible
  design (either on paper or drawn in a paint
  program) you can use that will count as 10 points
  on the major grade. In order to get the points, I
  must approve the sketch and mark you down. YOU
  HAVE TO USE YOUR SKETCHED DESIGN (with minor
  modifications as necessary) OR YOU WILL NOT GET
  THE POINTS.