Positioning Elements and Laying Out your Site

1
Positioning Elements andLaying Out your Site

• CSS Positioning

2
Review

• What are the three types of CSS positioning we
  have looked at?
• Which type of positioning uses only margins (such
  as margin-top and margin-right attributes) to
  position things on a page relative to other
  items?
• Which type of positioning uses the left, right,
  top, and bottom attributes to position something
  in an exact position, ignoring everything else on
  the page?
• Which type of positioning can use either margins
  or left/right/top/bottom to position things on a
  page relative to other items?
• How can you set the size of a div?
• What is an ID and how does it differ from a
  class?

3
overflow

• The CSS property overflow can change what happens
  when the HTML item gets to big for the size you
  gave it.
• If you use both width and height attributes,
  especially with absolute positioning, you should
  consider using the overflow property with one of
  the following values
• visible makes the item grow so that it fixs all
  the stuff inside of it, even if it means ignoring
  the height property
• hidden if it doesn't fit in the size you give
  it, it doesn't show at all
• scroll a scroll bar always shows up, even if it
  is not needed
• auto a scroll bar appears when the element gets
  to big to fit inside the height and width you
  set.
• Many people think the scroll bar solutions look
  ugly and are bad design ideas, but if keeping the
  size of your box is very important to your page
  look, they work

4
More positioning

• Last time, we looked at positionstatic,
  positionrelative, and positionabsolute. We need
  a slight clarification of these terms
• Static is the default for positioning, and uses
  margins to position the element on the page
  relative to the other non-absolute positioned
  items around it.
• Relative also places an item on a page in
  relation to the other non-absolute positioned
  items around it. You can use the left and top
  attributes to move things relative to its
  "original" position on the page (with all other
  elements acting like it is still in its original
  position), or you can treat it like static
  positioning and stick with margin-top and
  margin-left.
• Absolute places something on the page exactly
  where you tell it to go, using top and left (or
  right or bottom) attributes
• There is actually one more types of CSS
  positioning fixed.
• Fixed is very much like absolute, but when the
  user scrolls across the page, the element doesn't
  move with it and stays in its same location. IE7
  and IE8 support positionfixed, but ONLY IF YOU
  SPECIFICALLY TELL THE BROWSER TO FOLLOW STANDARDS
  (which we haven't talked about yet). IE6, which
  is unfortunately still used by a few people,
  ignores fixed and treats it like relative
  positioning so this could potentially be a big
  problem for how some people see your page

5
Contextual Selectors

• When doing CSS, sometimes you want only the
  anchors in a certain div to look one way, or only
  headlines in another div to be one color.
• To do this, we need to use CONTEXTUAL SELECTORS
  CSS styles that only work on tags that are in
  other tags.
• This style will only be applied to anchors in the
  navigation divdivnavigation a colorred
• This style will only be applied to h1s inside of
  a div with the class "content"div.content h1
  colorred
• This style will only be applied to strong tags
  inside of a paragraph inside of a div with the id
  "main"divmain p strong colorpurple

6
CSS Positioning Example

• Without using tables, how can we lay out a page
  design similar to the one on the Seybold site we
  looked at two classes ago?

7
First, the image

• Since the image starts at the top left of the
  screen, if we set it as the background image for
  the body in the style and set it to not repeat,
  it will appear just like we want it to.
• body
• background-image url("image.gif")
• background-repeat no-repeat

8
Now, to get the content lined up right

• All the content (the stuff circled) is inside of
  a div id called "content"
• Since everything that will belong to this class
  needs to be scooted to the right a certain number
  of pixels, and down from the top a certain number
  of pixels, we will use static positioned and
  define the margin-left and margin-top for our div

9
Now, to get the content lined up right

• You will have to play around with the px value
  you give margin-left and margin-top to make it
  come out right
• The headers inside of the content div need to
  have styles defined for them, as well
• The nav div id inside of the content div will
  also need styles defined for it

10
And now the lastsection of text

• Because we already have the other div laid out
  using margins, for the next one (its id is called
  "credits"), we will need to use absolute
  positioning
• Inside of your divcredits style definition, be
  sure to set
• font-size small /or 9pt or so, if you prefer
  /
• position absolute
• You will also want to set the top, width, and
• probably padding properties as well.

11
And for the lastimage (the logo)

• Well again use absolute positioning to place the
  image exactly where we want it.
• In the source code, the image is given the id
  "logo", so we can position it directly by giving
  it a style definition

12
Lab

• Finish defining styles for the Seybold site to
  get it looking like the actual site.
• In addition to the styles given on this
  PowerPoint, don't forget to also define styles
  for
• h1, h2, a, ahover
• divcreativecommons
• You will probably want to use contextual
  selectors.
• Due at the end of the period today.
• If you get done early, go back to the CSS Zen
  Gardens and see if you can figure out how some of
  the designs you looked in previous classes were
  made using CSS.