CSS Slideshow

The key thing about the above CSS is that all the figures are stacked up one atop another.
This is accomplished by positioning the container div relative then positioning
thefigures absolute.
http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
Starting from the top, the .diy-slideshow element is positioned relative, because the all
the figures are going to be absolutely positioned inside of it. (Heres an article from a million
years ago that explains relative+absolute positioning: Absolutely relative). The fact that the
figures are all absolutely positioned makes them stack up one atop the other, like a deck of
cards. Also because the figures all have an opacity of 0 they will be transparent, except the
one with a class of .show which has an opacity of 1 and will be opaque.
What is difference between position relative & position absolute and when to use which
one in css?
Absolute CSS Positioning
position: absolute;
Absolute positioning is the easiest to understand. You start with the CSS position property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal
flow of the document and will be placed in an exact location on the page. It won't affect how the
elements before it or after it in the HTML are positioned on the Web page however it will be
subject to it's parents' positioning unless you override it.
If you want to position an element 10 pixels from the top of the document window, you would use
the "top" offset to position it there with absolute positioning:
position: absolute;
top: 10px;
This element will then always display 10px from the top of the page regardless of what content
passes through,under or over the element (visually).
The four positioning properties are:
1. top
2. right
3. bottom
4. left
To use them, you need to think of them as offset properties. In other words, an element
positioned right 2px is not moved right 2px. It's right side is offset from the right side of the
window 2px. The same is true for the other three.
Relative Positioning
position: relative;
Relative positioning uses the same four positioning properties as absolute positioning. But
instead of basing the position of the element upon the browser view port, it starts from where the
element would be if it were still in the normal flow.
For example, if you have three paragraphs on your Web page, and the third has a position:
relative style placed on it, it's position will be offset based on it's current location - not from the
original sides of the view port.
Paragraph 1.
Paragraph 2.
Paragraph 3.
In the above example, the third paragraph will be positioned 3em from the left side of the
container element, but will still be below the first two paragraphs. It would remain in the normal
flow of the document, and just be offset slightly. If you changed it to position: absolute; anything
following it would display on top of it, because it would no longer be in the normal flow of the
document.
Notes:
the default width of an element that is absolutely positioned is the width of the content within
it unlike an element that is relatively positioned where it's default width is 100% of the space
it can fill.
You can have elements that overlap with absolutely positioned elements whereas you
cannot do this with relatively positioned elements (natively i.e without the use of negative
margins/positioning)

http://webdesign.about.com/od/advancedcss/a/aa061307.htm

1. What is the CSS box model?
a. The CSS box model is essentially a box that wraps around HTML elements, and it consists
of: margins, borders, padding, and the actual content.
2. What is the difference between quirks mode, standards mode and almost standards mode?
a. Quirks mode is used when no Doctype is specified. The purpose of Quirks Mode is to make
old pages to display as their author intended. Old pages may have been written to utilize
known features of old browsers or at least to adapt to them.
3. Tell me about hasLayout.
a. In Internet Explorer, an element is either responsible for sizing and arranging its own
contents, or relies on a parent element to size and arrange its contents.


4. What would be the most appropriate markup for: a navigation menu; a picture gallery; a
blog post. (Why? Can you think of some alternatives? Might be good to draw these up on a
whiteboard or something)
a. Navigation: Unordered list (ul, li)
b. Picture Gallery: Unordered list or ordered list
c. Blog Post: Ordered List


5. What's the difference between <p class="main_header">Foo</p> and <h1
class="main_header">Foo</h1>?
a. <p> is an inline, paragraph element
b. <h1> is a block level, heading element

6. Why is this a bad idea?: <span class="red">Bar</span>
a. This isnt really a bad idea depending on what exactly the class red defines. This is
really an opinion question.

7. Describe how to set opacity and how will it appear in Gecko, WebKit and IE.
a. .transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

8. How can you set few properties on to textboxes as default?
a. Here is the css for a textbox:
b. Input textbox {border:2px solid #36f;width:100px;background:url(shadow.png) repeat-x
center center;}

9. A design calls for png files with alpha transparency, what issues might you encounter?
a. IE 6 does not display transparency very well
b. Depending on what is behind the object you may have undesired bleeding


10. What's the difference between visibility:hidden and display:none
a. Visibility hidden means that the element is not printed on the page.
b. Display none means that it will be printed, but removed from the view of the user

http://stackoverflow.com/questions/5645986/two-column-layout-using-divs
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
http://css.maxdesign.com.au/floatutorial/
http://www.htmldog.com/guides/css/beginner/

CSS SITE DESIGN with-Eric-Meyer[eBook] [lulzforisaac] (Size: 814.06 MB)


hi,
i got ur message. we can go for further process. we will have a family meeting whenever suits u and
ur parents. we can also meet in the evening. so let me inform whenever u free.


Just think of what the words "child" and "descendant" mean in English:
My daughter is both my child and my descendant
My granddaughter is not my child, but she is my descendant.

http://closure-compiler.appspot.com/home