そんなご無体な!

某連合会では、
「pcでもスマホでも、完璧に同じレイアウトにしてくれないと困る」
と言い張られ、結局、許してもらえなかった。
また、「ウイルス防御は完璧にして欲しい」とも。
そんな無茶な! 
ペンタゴンでさえサイバー攻撃受けているってのに。

ここは、どうなんだろう? 少し心配になってきた。
制作費をもらう訳ぢゃないから、まっいいか。

(注)
ただ、一般の方からの投稿コメントはできなくしてありますし、
SSLも設定済み。
「組合への意見・要望」の投稿には、
できるだけ迷惑メールが来ないような対策は施してあります。

フキダシ型ツールチップ(ポップアップヘルプ)


サンプルHTMLコード
01 view plainprint?
ーーーーーーーーーーーーー
<div><p>    これは<a href=”#” class=”toolTip”>テスト<span>テストテキスト。</span<>/a>です。</p><p>    
ーーーーーーーーーーーーー
 
サンプルCSSコード
ーーーーーーーーーーーーー
.toolTip{ position: relative; }.toolTip span{   display: block; border: solid 2px #999; background-color: #eee; color: #666;    text-decoration: none;  position: absolute; top: 20px;  left: 10px; padding: 5px;   visibility: hidden; width: 150px;}a.toolTip:hover,a.toolTip:hover span{ visibility: visible; z-index: 100; }  
ーーーーーーーーーーーーー
 
設定はごく簡単です。a要素にclassを指定し、「toolTip」を適用するだけ。
 
そして、ポップアップさせたい文言を<span></span>の中に書いてください。
 
通常時はspan要素内の文字は隠れていて、該当のリンクにマウスオーバーしたときだけ説明文が表示されます。
内容としては、a:hover spanで、:hover時のみにスタイルを適用する点です。
 
ただ、以前のエントリーでは、表示位置によりポップアップ部分が文字の下に入り込んでしまう(下の文章がポップアップの文章にかぶる)状態になってしまっていたのでそれを修正した形です。
修正内容としては、a:hover,a:hover spanの両方にz-indexを設定した点。
 
なぜか、a:hoverにz-indexを設定しないと文字の下に入り込んでしまうようです。(IE7、6)
 
また、同じ理由でvisibilityも同時にvisibleに設定しないと表示もおかしくなるようです

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

上記のサンプルCSSコードを、Simple Custum CSSで、貼付。
少し間違いがあった。ので、直す。
CSSコードで、囲みケイの太さや幅、高さを調整するようだ。

この投稿欄では、「テキスト」モードで書いて保存しておかないと、
a hrefなどのコードがバラバラになってしまう。

ーーーーーーーー
追記
やはり、というか、今度はレイアウトが崩れてしまう。サイドバーも出なくなった。なぜだろう?