INP 170: Web Coding II

1
INP 170 Web Coding II

• Lecture 9 CSS Based Layouts

2
Goals

• Review Midterm
• CSS-Based Navigation Bars
• CSS Positioned Layouts

3
Review Midterm
4
CSS-Based Navigation Bars

• Navigation Buttons, Images, and Rollover Effects
• Creating Rollover Buttons with CSS
• List-Item Navigation Buttons

5
Rollover Effects

• There are multiple ways to achieve a rollover
  effect...
• One way is to swap images using an event handler
• What are some of the benefits of using this
  method? Costs?

6
Pros Swapping Images

• With images, you have more control... you can
  display practically any static two-dimensional
  image
• Also, depending on the Javascript you use, you
  should not suffer any browser compatibility issues

7
Cons Swapping Images

• Images take longer to download, with each image
  being a separate server hit
• At least 2 images per button (onmouseover,
  onmouseout, perhaps onclick)
• Images take longer to create
• Must modify images/Add images when updating
  navigation bar
• Must use Javascript, which can complicate code
  (unless use a javascript include)

8
Issues Swapping Images

• Approximately 10 of web surfers have Javascript
  disabled
• Slow connections can mean user waits for an image
  to download to swap
• Can pre-download images in head of document,
  however
• If you use image rollovers, remember
• Offer alt tags for images
• Make sure that if image is not downloaded, alt
  tag information can fit in the space the image
  normally takes
• HTML Text is often larger text in an image

9
CSS-based rollovers

• CSS offers a way to create rollovers.
• What are some of the benefits? Costs?

10
Pros CSS-based Rollovers

• Easy to create and update
• Simple to maintain
• Don't have to use Javascript
• Less download time, less files in general

11
Costs CSS-based Rollovers

• Not as much control as image
• Text displays slightly differently in different
  browsers
• Not entirely backwards compatible (Netscape 4
  does not support)
• However, degrades gracefully

12
(No Transcript)
13
How to Create CSS Rollovers...
14
Step 1

• Display anchor tags as block-level
• a.nav display block

15
Step 2

• Add padding, margins, border and width as
  desired...
• a.nav
• display block
• padding 3px
• padding-left 8px
• padding-right 8px
• border 1px solid black
• border-left 15px solid black
• width400px

16
Step 3

• Create a hover...
• /
• hover is a psuedo-class... as is link and
  visited
• /
• a.navhover
• border-left15px solid 660000
• background ddd

17

• / Very simple CSS rollover... try it out /
• a.nav
• display block
• padding 3px
• padding-left 8px
• padding-right 8px
• border 1px solid black
• border-left 15px solid black
• width400px
• a.navhover
• border-left15px solid 660000
• background ddd

18
List-item navigation buttons

• Another CSS-based layout, though doesn't degrade
  as well in Netscape 4
• ul list-style none margin 0 padding 0
  border 0
• li width 110px margin-bottom 1em
• li a width 110px color fff display block
  
• li ahover background fff color 000

19
Issues with List Item Rollovers

• If there is space between list items in the code,
  then IE will render a space, as is with images
• Also, for IE, the width needs to be offered for
  the anchor, or else only the text will be
  clickable

20
CSS Positioned Layouts

• CSS Positioning Layout Without Tables
• Advantages of CSS Positioning
• Disadvantages of CSS Positioning
• Steps in Creating a Positioned Layout
• The 'position' Property
• Specifying Coordinates
• CSS Positioning Workarounds for Netscape 4.x/Mac
  IE
• Creating Overlap and Altering Visibility
• Tips and Recommendations

21
CSS Positioning Layout Without Tables

• We've learned various table-based layout
  techniques as well as frame-based layouts
• However, the aim of XHTML and CSS is to separate
  presentation and layout, and CSS positioning
  enables us to do this
• CSS is powerful, and allows us to layout down to
  the pixel
• CSS positioning allows us to remove elements from
  the normal flow

22
Advantages of CSS Layouts

• Up to approximately 50 less code
• Much more readable
• Modern browsers generally handle CSS layouts well
• Opportunities for graceful degradation
• Since elements can be removed from normal flow,
  elements can overlap
• Can create DHTML menus
• Increased accessibility
• Can reorder elements in code so screenreaders
  read in the order you'd like
• Increased SEO power
• Since spiders index first 200 words, reorder
  elements in code to choose most important text!

23
Disadvantages of CSS

• Works best with fixed-width layouts, since
  positions are pixel specified
• Can use float for fluid layouts instead
• For interoperability with Netscape 4, place all
  form elements in same positioned div, or else
  they will not render

24
Steps in creating a positioned layout...
25
Step 1

• Sketch out a design on paper...
• Label divs
• id/class
• width, heights

26
Step 2

• Create the XHTML document, ignoring the layout...
• Include class/ids for divs

27
Step 3

• Create CSS skeleton for all the divs...
• div.nav
• position absolute
• div.content
• position absolute
• ...

28
Step 4

• Determine the top left, top right, bottom left or
  bottom right coordinate for each div, and
  position accordingly...
• For absolute position, must always include top or
  bottom and left or right
• div.navigation
• position absolute
• top 10px
• left 10px

29

• The left, right, top and bottom statements are
  from the parent element...
• ... which is usually the browser window
• Both positive and negative values are allowed

30
Step 5

• Add width, height, padding, border

31
Step 6

• Add z-index if there is overlap
• Higher z-index will be on top
• div.navigation
• position absolute
• top 10px
• left 10px
• ...
• z-index 3 / Can use negative,
• higher is on top /

32
What is z-index?

• Think of the page as a three-dimensional
  coordinate system ...
• top/bottom is the y axis
• left/right is the x axis
• The z axis would be which layers are showing if
  there is overlap, hence the z-index

33
Absolute Positioning

• positionabsolute
• Start an element at a position relative to the
  parent element using left/right and top/bottom
• Works well with divs, since there is no extra
  space at top/bottom

34
Relative Positioning

• position relative
• Positions an element relative to its normal
  position (offset value)
• The normal flow is maintained before and after
  the element, as if the element were not offset!
• Can use z-index as well to control 3d layerings

35

• div.offset
• position relative
• top 10px
• left 10px

36
Fixed Positioning

• positionfixed
• Position a div relative to a corner of the
  browser window
• As page scrolls, image stays in same location
• Does not work with IE, so unfortunately this is
  not a valid option...
• Can use DHTML (CSS Javascript) to emulate
  this...
• Can learn more about DHTML in Web Coding III (INP
  270)

37
Static Positioning

• positionstatic
• This is the default value, otherwise known as
  normal flow

38
Workarounds for Netscape 4/IE

• Netscape 4 will fail to redraw a page if a window
  is resized
• Mac IE 5.x also encounters problems when a window
  is resized, which sometimes results in the
  appearance of an unneeded scrollbar
• The solution is to replace the ltbodygt with
• ltbody onresize"window.location.hrefwindow.locati
  on.href"gt
• Unfortunately, the use of these event handlers is
  not valid XHTML (strict or transitional)

39
Browser detects

• Can use a browser detect, and use the expanded
  body tag for Netscape 4/Mac IE 5
• However, increases code complexity

40
Visibility

• visibility
• Values visible, hidden
• Effect Can hide elements
• Why use? Useful for DHTML menus and stylesheets
  for print documents

41
Tips and Recommendations

• Non-validating code can completely throw off
  Netscape 4 when combined with positioning, so
  validate pages
• Always include a width for positioned divs, or
  Mac IE 5 may have display problems

42
For next week

• Homework 5
• Have a pleasant week!