Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
mozilla:firefox:bookmarkshome [d/m/Y H:i] sylvain créée |
mozilla:firefox:bookmarkshome [d/m/Y H:i] (Version actuelle) |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
===== Version 2.1 ===== | ===== Version 2.1 ===== | ||
- | ''body { | + | <code css> |
+ | /** 1.5 addon **/ | ||
+ | h1 { | ||
+ | /* IE hack */ | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | |||
+ | #statusDiv { | ||
+ | /* display: none; */ | ||
+ | } | ||
+ | |||
+ | .liveAnchor:visited { | ||
+ | color: red; | ||
+ | } | ||
+ | |||
+ | /** end 1.5 addon **/ | ||
+ | /** 1.4 addon **/ | ||
+ | .hoverDiv { | ||
+ | background-color: white; | ||
+ | /* change next line for other font size */ | ||
+ | font-size: 12px; | ||
+ | width: 15em; | ||
+ | position: absolute; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | border: 1px solid black; | ||
+ | -moz-border-radius: 0; | ||
+ | } | ||
+ | |||
+ | .hoverDiv h1 { | ||
+ | color: white; | ||
+ | background-color: grey; | ||
+ | font-size: inherit; | ||
+ | text-align: inherit; | ||
+ | white-space: normal; | ||
+ | overflow: hidden; | ||
+ | padding: 1px 1px 1px 3px; | ||
+ | margin: 0; | ||
+ | border: 0; | ||
+ | -moz-border-radius: 0; | ||
+ | } | ||
+ | |||
+ | .hoverDiv span { | ||
+ | color: black; | ||
+ | background-color: white; | ||
+ | font-size: inherit; | ||
+ | font-weight: normal; | ||
+ | text-align: left; | ||
+ | white-space: normal; | ||
+ | max-height: 20em; | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | padding: 1px 1px 1px 3px; | ||
+ | margin: 0; | ||
+ | border: 0; | ||
+ | -moz-border-radius: 0; | ||
+ | } | ||
+ | |||
+ | .hoverDiv * img { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /** end 1.4 addon **/ | ||
+ | body { | ||
+ | font-family: Verdana, Arial, Helvetica, sans-serif; | ||
+ | background-color:#AABBCE; | ||
+ | margin:10px; | ||
+ | padding:0; | ||
+ | font-size:12px; | ||
+ | color:#223953; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | /**************************************** form#searchForm formulaire de recherche haut de page ****************************************/ | ||
+ | form#searchForm { | ||
+ | position:relative; | ||
+ | margin:10px auto; | ||
+ | width:80%; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | form#searchForm img { | ||
+ | vertical-align:middle; | ||
+ | } | ||
+ | |||
+ | /* Sélection déroulante */ | ||
+ | form#searchForm select { | ||
+ | padding:1px; | ||
+ | border:1px solid #223953; | ||
+ | -moz-border-radius:5px; | ||
+ | background-color:#BFCDDE; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | form#searchForm select option { | ||
+ | border-bottom:1px solid #D7E1EC; | ||
+ | background-color:#BFCDDE; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | /* champ texte */ | ||
+ | form#searchForm input[type="text"] { | ||
+ | padding:2px; | ||
+ | width:60%; | ||
+ | border:1px solid #223953; | ||
+ | -moz-border-radius:5px; | ||
+ | background-color:#BFCDDE; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | form#searchForm input:focus[type="text"] { | ||
+ | background-color:#D7E1EC; | ||
+ | } | ||
+ | |||
+ | /* bouton */ | ||
+ | form#searchForm input[type="submit"] { | ||
+ | padding:1px; | ||
+ | border:1px solid #223953; | ||
+ | -moz-border-radius:5px; | ||
+ | background-color:#527193; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | |||
+ | form#searchForm input:hover[type="submit"] { | ||
+ | background-color:#FFDE00; | ||
+ | color:#223953; | ||
+ | } | ||
+ | |||
+ | /**************************************** table#bookmarksSheet affichage du contenu en colonnes ****************************************/ | ||
+ | table#bookmarksSheet { | ||
+ | position:relative; | ||
+ | width:80%; | ||
+ | margin:10px auto; | ||
+ | border-collapse:separate; | ||
+ | border-spacing:10px; | ||
+ | table-layout: fixed; | ||
+ | } | ||
+ | |||
+ | table#bookmarksSheet td { | ||
+ | position:relative; | ||
+ | empty-cells: show; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | |||
+ | /**************************************** div.folder dossiers ****************************************/ | ||
+ | div.folder { | ||
+ | position:relative; | ||
+ | margin:0 0 5px 0; | ||
+ | padding:5px; | ||
+ | background-color:#527193; | ||
+ | -moz-border-radius:10px; | ||
+ | } | ||
+ | |||
+ | div.folder:hover { | ||
+ | background-color:#6885A4; | ||
+ | } | ||
+ | |||
+ | /**************************************** div.folder h1 titre des dossiers ****************************************/ | ||
+ | div.folder h1 { | ||
+ | position:relative; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | z-index:1; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | div.folder h1 a { | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | padding:5px; | ||
+ | font-size:14px; | ||
+ | color:#ffffff; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | |||
+ | div.folder h1 a span { | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | letter-spacing:2px; | ||
+ | } | ||
+ | |||
+ | div.folder h1 a span + span { | ||
+ | font-size:12px; | ||
+ | font-style:italic; | ||
+ | font-weight:normal; | ||
+ | letter-spacing:normal; | ||
+ | } | ||
+ | |||
+ | /**************************************** div.folder contenu de chaque dossier ****************************************/ | ||
+ | div.folder ul { | ||
+ | position:absolute; | ||
+ | display:none; | ||
+ | left:20%; | ||
+ | width:100%; | ||
+ | margin:-2% 0 0; | ||
+ | padding:5px; | ||
+ | background-color:#BFCDDE; | ||
+ | -moz-border-radius:10px; | ||
+ | z-index:10; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | div.folder:hover ul { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | div.folder ul li { | ||
+ | margin:0; | ||
+ | padding:12px 0; | ||
+ | } | ||
+ | |||
+ | div.folder ul li a { | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | width:100%; | ||
+ | margin:-10px 0 0; | ||
+ | padding:2px; | ||
+ | font-size:12px; | ||
+ | font-weight:bold; | ||
+ | color:#000000; | ||
+ | z-index:10; | ||
+ | } | ||
+ | |||
+ | div.folder ul li a:hover { | ||
+ | width:105%; | ||
+ | margin:-12px 0 0 -5%; | ||
+ | padding:5px; | ||
+ | background-color:#FFDE00; | ||
+ | border:1px solid #223953; | ||
+ | -moz-border-radius:10px; | ||
+ | font-size:14px; | ||
+ | z-index:11; | ||
+ | } | ||
+ | |||
+ | div.folder ul li a img { | ||
+ | margin:0 4px 0 0; | ||
+ | height:16px; | ||
+ | border:none; | ||
+ | vertical-align:middle; | ||
+ | } | ||
+ | |||
+ | div.folder ul li a:hover img { | ||
+ | height:20px; | ||
+ | } | ||
+ | |||
+ | div.folder ul li.separator { | ||
+ | border-bottom:1px solid #D7E1EC; | ||
+ | padding:0; | ||
+ | margin:5px 0; | ||
+ | } | ||
+ | |||
+ | /**************************************** div.hoverDiv description des contenus élément flotant ****************************************/ | ||
+ | .hoverDiv { | ||
+ | display:none; | ||
+ | position:relative; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | background-color:#D0D4DA; | ||
+ | font-size:10px; | ||
+ | } | ||
+ | |||
+ | .hoverDiv h1 { | ||
+ | position:relative; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | font-size:10px; | ||
+ | background-color:#7595B9; | ||
+ | } | ||
+ | |||
+ | .hoverDiv span { | ||
+ | position:relative; | ||
+ | font-size:10px; | ||
+ | } | ||
+ | |||
+ | /**************************************** #otherLinks Liens du bas ****************************************/ | ||
+ | #otherLinks { | ||
+ | position:relative; | ||
+ | margin:10px auto; | ||
+ | width:80%; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | #otherLinks * li { | ||
+ | display:inline; | ||
+ | padding-right: 3em; | ||
+ | } | ||
+ | |||
+ | #otherLinks * a { | ||
+ | color:#223953; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /********************************************************************************/ | ||
+ | |||
+ | body { | ||
font-family: Verdana, Arial, Helvetica, sans-serif; | font-family: Verdana, Arial, Helvetica, sans-serif; | ||
background-color:#AABBCE; | background-color:#AABBCE; | ||
Ligne 254: | Ligne 553: | ||
font-weight:bold; | font-weight:bold; | ||
} | } | ||
- | %%'' | + | </code> |