Hey, you made it alll the way through to the third example, I am impressed. This layout demonstrates pure CSS pop ups, within the navigation and the content. This design works down to a window-size of 800x600px.
The font family declared is Helvetica. I used font-size: 1em and line-heigt 1.2 as declaration in the body. Line-heigt is inherited, it works nicely, as you can see. Enjoy
Element | Declaration | Why | MSIE |
---|---|---|---|
CSS pop up text | The pop up text is a span element inside the actual hyperlinks. | No special settings for MSIE are required. | |
div#navigation a span |
{ display: none; } |
Preventing the text from showing up when the page loads | |
div#navigation a:hover span |
{ text-align: justify; display: block; padding: 1ex; position: absolute; z-index: 10; top: 5em; left: 0; border: dashed 1px } |
Display block and position absolute make the element visible ad position the textbox under the navigation. | |
CSS pop up image | The pop up image is an image element inside the actual hyperlinks. | ||
div#navigation a img |
{ display: none; } |
Preventing the image from showing up when the page loads. | |
div#navigation a:hover img |
{ display: block; position: absolute; top: 5em; left: 0; border: none; outline: none } |
does not work correctly with older MSIE versions | |
Acronym, abbr |
Abbreviations and Acronyms should be explained for all visitors. There are two ways to hide the explanation until it is needed: a) using the title element or b) using a pop up box. Both ways are demonstrated below. |
||
acronym title=".." |
{ border-bottom: 1px dashed navy; margin-left: 2px; margin-right: 2px } |
As you can see in this example (pure CSS pop ups) the title element specifies the expansion of the acronym used for all internet users. Another possibility is the use of a pop up box: WCAG WCAG is the acronym for Web Content Accessibility Guidelines |
|
#inhalt p:first-letter |
{ color: #ffd700; font-size: 1.5em; font-weight: bold; line-height: 2em; background: #1e90ff; margin: 1ex; padding: 1ex; border: solid 1px #000080 } |
This declaration styles the first letter of the p-element in the container "inhalt". | supported from IE 6 onwards |
Validation and Credits | Eric Meyer
Thanks for his demonstration of CSS pop ups. |
© hugodesign 2007 |