From e7c26852577ea3d9fed92aa4725e7f9cf30942f0 Mon Sep 17 00:00:00 2001 From: cedricbonhomme Date: Sat, 18 Jun 2011 21:15:46 +0200 Subject: New transparent CSS tooltip. --- css/style.css | 387 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 191 insertions(+), 196 deletions(-) (limited to 'css/style.css') diff --git a/css/style.css b/css/style.css index 2ca2e412..ebb571a0 100755 --- a/css/style.css +++ b/css/style.css @@ -1,147 +1,145 @@ -/* CSS based on the patrimoine ael website - initial source?*/ - html, body { - margin: 0; - padding: 0; - width: 100%; - height: 100%; - overflow-x: hidden; - background-color: white; - color: black; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow-x: hidden; + background-color: white; + color: black; } body { - text-align: justify; - font: 400 0.85em Cambria, Georgia, "Trebuchet MS", Verdana, sans-serif; + text-align: justify; + font: 400 0.85em Cambria, Georgia, "Trebuchet MS", Verdana, sans-serif; } code, pre { - font-size: 100%; + font-size: 100%; } img { - border: 0px; + border: 0px; } h1 { - font-size: 100%; - margin: 0em 0em; - padding: 0px; + font-size: 100%; + margin: 0em 0em; + padding: 0px; } h2 { - margin: 0.5em 0em; - padding: 0px; - font-style: normal; - font-variant: normal; - font-weight: bold; - font-size: 100%; - letter-spacing: 0em; - text-align: right; + margin: 0.5em 0em; + padding: 0px; + font-style: normal; + font-variant: normal; + font-weight: bold; + font-size: 100%; + letter-spacing: 0em; + text-align: right; } h3 { - margin: 0em 0em 0.5em 0em; - font-size: 100%; - font-weight: bold; - text-align: left; + margin: 0em 0em 0.5em 0em; + font-size: 100%; + font-weight: bold; + text-align: left; } h1 a, h2 a, h3 a { - text-decoration: none; + text-decoration: none; } h2 + h3 { - margin-top: 0.5em; + margin-top: 0.5em; } table { - margin-left: 2em; - margin-bottom: 1em; - border-collapse: collapse; - text-align: left; + margin-left: 2em; + margin-bottom: 1em; + border-collapse: collapse; + text-align: left; } th, td { - padding-right: 1em; - text-align: left; + padding-right: 1em; + text-align: left; } th { - vertical-align: bottom; - border-bottom: 1px solid black; - text-align: left; + vertical-align: bottom; + border-bottom: 1px solid black; + text-align: left; } td { - vertical-align: top; - padding-top: 5px; - text-align: left; + vertical-align: top; + padding-top: 5px; + text-align: left; } table.border td, table.border th { - border: 1px solid black; + border: 1px solid black; } p { - margin: 0.5em 0em; + margin: 0.5em 0em; } ol.lower { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } ol.upper { - list-style-type: upper-alpha; + list-style-type: upper-alpha; } ol.roman { - list-style-type: lower-roman; + list-style-type: lower-roman; } ul { - margin: 0em 0em 0.5em 0.5em; - padding: 0em; + margin: 0em 0em 0.5em 0.5em; + padding: 0em; } li { - margin: 0em 0em 0em 0.5em; - padding: 0em; + margin: 0em 0em 0em 0.5em; + padding: 0em; } a:link, a:visited { - color: #003399; - text-decoration:none + color: #003399; + text-decoration:none } a:hover { - color: blue; + color: blue; } dt { - margin: 0.5em 0em 0em 0em; - padding: 0em; - font-weight: bold; + margin: 0.5em 0em 0em 0em; + padding: 0em; + font-weight: bold; } dd { - margin: 0em; + margin: 0em; } hr { - color: white; - border-top: dotted black; - border-width: 1px 0px 0px 0px; - margin: 1em 0em; + color: white; + border-top: dotted black; + border-width: 1px 0px 0px 0px; + margin: 1em 0em; } #heading { - position: absolute; - left: 0px; - top: 0px; - width: 100%; - z-index: 1; + position: absolute; + left: 0px; + top: 0px; + width: 100%; + z-index: 1; } /* Navigation bars */ @@ -150,229 +148,226 @@ hr { .nav_container.horizontal div { float:right; padding-right:10px; } #nav { - position: absolute; - top: 0px; - right: 0px; - z-index: 2; + position: absolute; + top: 0px; + right: 0px; + z-index: 2; } #heading, #nav, #nav ul { - margin: 0; - height: 1.8em; + margin: 0; + height: 1.8em; } #heading, #nav ul, #nav li { - background: #EEEEEE; - color: inherit; - border-bottom: 0px solid black; + background: #EEEEEE; + color: inherit; + border-bottom: 0px solid black; } #heading h1 { - margin: 0; - padding: 0.4em 0 0.4em 2em; - white-space: nowrap; + margin: 0; + padding: 0.4em 0 0.4em 2em; + white-space: nowrap; } #nav ul { - display: block; - margin: 0 3em 0 0; - border-right: 0px solid #000000; + display: block; + margin: 0 3em 0 0; + border-right: 0px solid #000000; } #nav li { - margin: 0em; - padding: 0.4em 1em 0.2em 1em; - display: block; - float: left; - border-left: 0px solid #000000; + margin: 0em; + padding: 0.4em 1em 0.2em 1em; + display: block; + float: left; + border-left: 0px solid #000000; } pre { - margin-left: 2em; + margin-left: 2em; } .right { - clear: right; - float: right; - text-align: right; - margin: 0em 2em 0em 2em; - max-width: 36%; + clear: right; + float: right; + text-align: right; + margin: 0em 2em 0em 2em; + max-width: 36%; } img.right { - width: auto; + width: auto; } .inner .right { - margin-right: 0em; + margin-right: 0em; } .right blockquote { - float: right; - position: relative; - clear: both; - padding-top: 1em; - padding-bottom: 0em; - margin-bottom: 0em; - font-style: italic; - width: 100%; - margin-right: 0em; + float: right; + position: relative; + clear: both; + padding-top: 1em; + padding-bottom: 0em; + margin-bottom: 0em; + font-style: italic; + width: 100%; + margin-right: 0em; } blockquote.right { - width: 50%; - margin-left: 50%; - margin-right: 0em; + width: 50%; + margin-left: 50%; + margin-right: 0em; } /* Footer (W3C logos) */ #w3c { - text-align: right; - padding: 0em 2em 0em 2em; - clear: both; + text-align: right; + padding: 0em 2em 0em 2em; + clear: both; } #w3c img { - padding-left: 10px; - padding-top: 1em; + padding-left: 10px; + padding-top: 1em; } /* Classes */ .clear { - font-size: 1px; - line-height: 1px; - height: 0px; - clear: both; + font-size: 1px; + line-height: 1px; + height: 0px; + clear: both; } .invisible { - display: none; + display: none; } .inner { - margin-top: 3em; - padding: 0em 2em 0em 2em; - clear: both; + margin-top: 3em; + padding: 0em 2em 0em 2em; + clear: both; } .innerlogo { - margin-top: 0em; - padding: 0em 2em 0em 2em; - clear: both; + margin-top: 0em; + padding: 0em 2em 0em 2em; + clear: both; } .left { - float: left; - position: absolute; + float: left; + position: absolute; } .tex { - position: relative; top: 0.2em; - margin-left: -0.2em; - margin-right: -0.1em; + position: relative; top: 0.2em; + margin-left: -0.2em; + margin-right: -0.1em; } /* Photo album */ #album { - margin: 0 auto; - padding: 3em 2em 0em 2em; + margin: 0 auto; + padding: 3em 2em 0em 2em; } #thumbs { - background: white; - position: absolute; - left: 2em; - right: 2em; - margin-top: -100px; - padding-bottom: 0.5em; - overflow: auto; + background: white; + position: absolute; + left: 2em; + right: 2em; + margin-top: -100px; + padding-bottom: 0.5em; + overflow: auto; } #thumbs table { - margin: 0 auto; - position: relative; - max-width: 100%; - border-collapse: collapse; - border: 0px; + margin: 0 auto; + position: relative; + max-width: 100%; + border-collapse: collapse; + border: 0px; } #pageselectors { - margin-top: 1em; - text-align: center; - padding-bottom: 100px; - margin-bottom: 0.5em; + margin-top: 1em; + text-align: center; + padding-bottom: 100px; + margin-bottom: 0.5em; } #thumbs img, #photo img { - display: block; - margin: 0 auto; + display: block; + margin: 0 auto; } #thumbs td { - width: 8em; - min-width: 100px; - text-align: center; - padding: 0.5em 0.5em 0em 0em; - border: 0px; - margin: 0px; + width: 8em; + min-width: 100px; + text-align: center; + padding: 0.5em 0.5em 0em 0em; + border: 0px; + margin: 0px; } #photo { - text-align: center; + text-align: center; } #thumbs img { - opacity: 0.99; - -moz-opacity: 0.99; + opacity: 0.99; + -moz-opacity: 0.99; } #thumbs img:hover { - opacity: 0.7; - -moz-opacity: 0.7; + opacity: 0.7; + -moz-opacity: 0.7; } #photo img { - max-width: 100%; - min-height: 300px; - max-height: 300px; - overflow: scroll; - margin-top: 0.5em; + max-width: 100%; + min-height: 300px; + max-height: 300px; + overflow: scroll; + margin-top: 0.5em; } /* CSS ToolTips */ -.tooltip { - color: #000000; outline: none; - text-decoration: none; - position: relative; - } - .tooltip span { - margin-left: -999em; - position: absolute; - } - .tooltip:hover span { - border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); - font-family: Calibri, Tahoma, Geneva, sans-serif; - position: absolute; left: 1em; top: 2em; z-index: 99; - margin-left: 0; width: 250px; - } - .tooltip:hover img { - border: 0; margin: -10px 0 0 -55px; - float: left; position: absolute; - } - .tooltip:hover em { - font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; - display: block; padding: 0.2em 0 0.6em 0; - } - .classic { padding: 0.8em 1em; } - .custom { padding: 0.5em 0.8em 0.8em 2em; } - * html a:hover { background: transparent; } - .classic {background: #FFFFAA; border: 1px solid #FFAD33; } - .critical { background: #FFCCAA; border: 1px solid #FF3334; } - .help { background: #9FDAEE; border: 1px solid #2BB0D7; } - .info { background: #9FDAEE; border: 1px solid #2BB0D7; } - .warning { background: #FFFFAA; border: 1px solid #FFAD33; } \ No newline at end of file + .tooltip { + color: #FFF; + outline: none; + text-decoration: none; + position: relative; + } + + .tooltip span { + color: #FFF; + margin-left: -999em; + position: absolute; + } + + .tooltip:hover span { + border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); + font-family: Calibri, Tahoma, Geneva, sans-serif; + position: absolute; left: 1em; top: 2em; z-index: 99; + margin-left: 0; width: 250px; + } + .classic { + padding: 0.8em 1em; + background: rgba(0, 0, 0, 0.85); + border: 5px 5px; + } + + * html a:hover { + background: transparent; + } \ No newline at end of file -- cgit