CSS Menus and Rollovers Agenda foil Separating style
CSS Menus and Rollovers Agenda foil
Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs
Separating style from content It is considered good programming style to separate the information from its formatting. The information goes into the HTML file.
The formatting goes into the CSS file. A good demonstration of this can be found in the site: http://www.csszengarden.com/ 3 Pages in One File
3 pages in one file In many web pages the masthead remains the same from page to page, as does the menu. All that changes is the content.
So we put the content for 3 pages onto the one page and hide two of the pages. We use CSS: display: block; display: none;
content section to make visible. Thats all folks: Rollovers in CSS
Rollovers in CSS The key to making rollovers work is to use the :hover pseudoclass as in: a:link
a:visited a:hover Rollovers with background colour
Rollovers with background colour Demo (rollover, bgcolour) Rollovers with background images
Rollovers with background images You simply define a different image in a:hover Demo
Rollovers with background images Horizontal drop-downs Horizontal drop-downs
By this I mean a horizontal menu, from which a second menu drops down Demo (horiz-6) Horizontal drop-downs
We start off with a normal web page (demo html) We then use CSS to style everything except the menu (demo html+css). We want a horizontal menu, but we now have a vertical
menu. Horizontal drop-downs Next we flatten the menu (html+css-1), using: list style: none;
margin: 0; padding: 0; Horizontal drop-downs Next (html+css-2) we arrange the list elements
horizontally by floating them to the left. Horizontal drop-downs Next (html+css-3) we display all links as blocks of width 200px and height 30px. This spreads
the top line along the menu bar. We also remove the underlines of the links using text-decoration: none; Horizontal drop-downs
Next (html+css-4) we stop the submenus from being displayed at all (well get them back later). We also set the submenus to position absolute, so they will not disturb the rest of the layout when they do appear.
Horizontal drop-downs Here is an example of what happens when you dont set the dropdown elements to position absolute:
(demo try-index) Horizontal drop-downs Next (css+html-5) we make the submenus appear when the menu elements are moused
over. We use hover for that. Horizontal drop-downs Finally (html+css-6) we style the submenus to make them look better.
Thats it! Vertical drop-downs
Vertical drop-downs This section covers vertical menus with submenus which appear to the side. Perhaps drop-down is an inappropriate name.
We start with a standard HTML page (1-html) We add CSS to put everything in the right place.
As usual, we put in CSS to hide the submenus normally, but display them when the main menu is moused over (demo 4-strict css). We style the box, to give it a background
colour. We give it a width and a position, which would cause it to interact with the content section, So we make the block absolute, so it sits on top of the content block. (5-strict css+style)
Finally we tidy up the page by adjusting the background colours. (6-tidy1) Agenda foil
Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs
Managing Interdependence: Social Responsibility and Ethics Chapter 2 Chapter 2 - Overview The Social Responsibility of MNCs Ethics in Global Management Managing Interdependence MNC Stakeholders (Exhibit 2-2) Home Country Owners Customers Employees Unions Suppliers Distributors Strategic allies Community Economy Government...
Russian winters are world renowned to be brutally cold and long thus earning the name General Winter, General Frost, or General Snow during times of conflict. Climate. Painting of Napoleon retreating from Russia
For this presentation, I have used information from MedlinePlus, APA website, APA and other publications, andmy own experience. This is becoming a new field- integrating into our culture. The religions of Abraham are Asian. Goldie Hawn - Jewish. Avila, a...
The Atom. All matter is composed of atoms. An atom is composed of three subatomic particles: electrons (-), protons (+), and neutrons (0) The nucleus of the atom contains the protons and the neutrons (also called nucleons.)
Emerging uses: Fish food and burning as fuel for the ethanol plant. Emerging concerns: Difficulty in getting environmental permits. Local market growth is mostly due to substitution. County. Story. Crop Dist. C. Lat. Long. Factor. lbs. Wet DDG. Dry DDG....
Assessment Definitions: A process of estimating or measuring the level of ability, characteristics, or the personal values of the client. A systematic procedure for gathering select information about an individual for the purpose of making decisions regarding that individual's program...
Sedimentary- Comes from the Latin word ... When an agent (wind, ice, water, or gravity) loses energy, it drops the sediments. Deposition- the process of erosion losing energy and dropping sediment. Formation of Sedimentary Rocks. Compaction and Cementation.
Ready to download the document? Go ahead and hit continue!