508 Spot Resource Center for Accessibility and Usability - 508Spot.com
Section 508 Checklist, Section508 Guides, and FREE Resources for Web Accessibility and Usability
Computers > Internet > Web Design and Development > Accessibility
Cascading Style Sheets CSS
Casscading Style Sheet (CSS) is a markup language to format data for presentation of information on computers and other devices. We will learn how to apply css to our applications to create accessibility and usability.
CASSCADING STYLE SHEETS CSS TUTORIALS
Expressions in CSS
Expressions in CSS is not a standard. The IE browser is the only browser that supports this method. This method is included here because it may be needed to meet a design requirement.
If we wanted to float our element to valign middle we would write this expression into our style call for top attribute of the element. All of this is done on one line in our regular style sheet.
top:expression((document.body.clientHeight>400) ? document.body.clientHeight/2-elementId.offsetHeight/2+"px" : "0px");
This style expression will set the element's top attribute to float valign middle. The element's top attribute is set to 0px if the window is resized below 400px. This is done to prevent the content from becoming hidden when the window is smaller than the element (Our element in this example has a height of 400px, that's why we check for client height > 400). Adjust new code accordingly.
See example Pure CSS Floating Content Box
CASSCADING STYLE SHEETS CSS TUTORIALS
The Magic Floating Box
Is it possible to have a content box that stays in the middle and center of the screen, even when the window is resized, independent of resolution? Is it possible for the content to remain accessible even when the window is smaller than the content box? Can it be done with CSS?
Yes. Yes. Yes. Yes it is possible with the Magic Floating Box!
Take a look at our example.
See example Pure CSS Floating Content Box
CASSCADING STYLE SHEETS CSS TUTORIALS
Multiple Floating Background Images
Is it possible to have multiple floating background images?
Yes it is possible with the Magic of CSS! Take a look at our example.
Our Mission
Helping the web design and development community with programming software and web applications towards Standard, Accessible, Intelligent Designs (S.A.I.D.). The S.A.I.D. Architecture does comply with International Standards, Usability and Accessibility Guides, and Section 508 Checklist for Faster more Flexible design development.
