CSS Pop Ups by Susanne

skip to page content,skip to navigation

Navigation

CSS Pop Ups for Text and Images

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