IST 561 Session 5, March 9, 2009--Finetuning CSS

688 views

Published on

A presentation about finetuning Cascading Style Sheets (CSS) for web pages.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
688
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IST 561 Session 5, March 9, 2009--Finetuning CSS

  1. 1. 2 ! quot; #$ % & ' ($# ! quot;# )* $ & # # ' ! % +, ) ! %''$ * & ' ($ $ ' # % ! %''$ # $ & ' ($ $ ' - # % ! . #' % & ' ($#$
  2. 2. 3 CSS Page Layout Overview /0 quot; % -- ) # &* $ ) 1 quot; ** $& # % & # #-' 2 # -- & # #) ' *& ' ($# #% 3 -& , #4 #4 & ) * #' ( #4 #4 & )- #4 #4 & &- #4 #4 & #' $ -
  3. 3. 4 CSS Page Layout Advantages # #& ' ( &( # # ( &# -# # $$ 5# # (- )$ -# 3 #- # )& ' ($## ) *#( * ## ) ( # ( -$#& - ) #& ( $& # # & - #/ *
  4. 4. 5 $ # 6$ -* $& # % & 7 8.9 8 . )& ' ($ $ ' * # # & ) # #) & $ ( '$% #
  5. 5. 6 % ## ! ,: * ' # & -## # 5) ' ) ! *# # # # )# *) +) ! +# # &) ' ) )# - ' ' ! #- # -&( # & *# # - # ));# -#
  6. 6. + )&( -## ) #( )) # / * ' ) $ & -# <- -# #4 #4 & ** -4$ ## 4 8 . )% 4 - = == 2 < #-
  7. 7. 8 ! % '# # h1 { background-color:#cccccc; -# # # padding:5px; # $) color: #000000; # && } <- -# #myContent { position: relative; #4 #4 & * ( # -4 > left:30px; ##? 4- # '4# 4& '4 font-family:Arial,sans-serif; }
  8. 8. 9 quot;# 5 (& # # -# #* ) h1 { background-color:#cccccc; padding:5px; color: #000000; } #content {position: absolute; left:200; <- top:100; #4 ? #4 & font-family:Arial,sans-serif; )$ $# -4& ' @ width:300; A * $ . ($ # # }
  9. 9. quot;# $ %
  10. 10. 11 % 3 - ## # - # B # # '# C h1 { background-color:#cccccc; #) # padding:5px; #* ) color: #000000; # -# } # ') $ p { font-family:Arial,sans-serif; $' # # } &&# ( #yls {float:right; % 6$ # margin: 0 0 5px 5px; #4 # 4 -, ' & ) border: solid; } -$ 4 ## 4 $
  11. 11. 12 % % %' $ ) - # ) & () ! display:none ; -# # ) & () * ! display:block ; -# )) *6 - #?? # #( $ -# $ (& 6 ! display:inline; -# * )) -#D # # (* 6 - # $ $ D EF ! # # - -# # 4' 6 #* ' # #& #4 & 4 '- 4 4 1 4 G ) & ( & #? 4 4 ?& ( &,
  12. 12. 13 &' % ) # #6 ' ) -# /* ' & ) $# ) , $ >? BC 3 - # # ' >? ), $ && #& -## >? ), $ )) # - # &' % 6$ # #4 #4 & 0 -4 4 = = % & & >? ), &
  13. 13. 14 % ( ) &# #& # *# - # '# )# -? ) # -, ) ? # '# - ? '# - , '# ? >? ) , *# ( # &
  14. 14. 15 ! / ## #$ % & ' ( $@ # / ##) *# # )* $ & # # '@ 0 / ( $)( $$ # >? ) ,% & & #@ (
  15. 15. $ % NOTE: Except for imagelogo, all elements on this page follow normal flow
  16. 16. 17 && ## # $-D# ) $# 6 $ ) *' .# ? $- '# ! ##H ! )# &H , quot;' # ? $- ## ! - '? # &H , #' #I & #J ! # '# H
  17. 17. 18 body {margin:0; font-family:Verdana, Arial, sans-serif; } #wrapper { background-color:#e8b9e8; color:#000066; } #leftcolumn { float:left; width:100px; } #rightcolumn { margin-left:100px; background-color:#ffffff; color:#000000; } #logo { background-color:#eeeeee; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; padding:10px; } .content {padding:20px 20px 0 20px; } #floatright {margin:10px; float:right; } .footer {font-size:xx-small; text-align:center; clear:right; padding-bottom:20px; } .navBar{ text-decoration:none; margin: 15px; display:block; }
  18. 18. 19 * 7 ! #& ( & #- # -# &' ! I # ## )J ## ( # ! # *# # 9 #$ 8. 7 ) ! #( & # ( -# &' ! K ## ## ( # ! ) # *# # 9 #$ 8.
  19. 19. 20 * &# #&& $ !$ # ) - # -- () $ - # - $## - #,# ## ) & ' # )* # ( $# $ # 4 )' ' #4 & -4 *##
  20. 20. 21 # % $( 6 ( #, 7 /0 % L ) # # % 6 ( #, ! # 4; # 4' & 0' ?4 )# 4 % ' #-& ( 6 $ ) $ *' % ' #-& ( ) $ * 7 -- ## )# $ , #) & ) M , # $ &' # 6 , # # #& ( ( - * N + &# # N
  21. 21. 22 ! < )#) -# #( # 4' #4 & -4 4 !.' # % &' ($# ) 6 # ## $ # 4 * ## #4 & & -4 # 44 ! % -& # ## $ )% ? #) # # 4- ( #4 & * -4 44 !3 ( )') ?' *) & #4 #4 & 0 '#4 4 4( % ' ! /0 M # % % $ #4 #4 & *$ * # -4 * ($ 4 4 # ! # % &' ($# #4 #4 & * * ( -4 ) , # 4 )4 ! ) )% ( #, #
  22. 22. 23 % ) ?# ' $ % ) '#( ## ' & ' ($ $ # + &# # quot; '% # $ # 6 # # ' &# # # - '(

×