graffiti on the web 
Google Adsenseを設置すると隣接する要素をオーバーラップしてしまい、クリック出来なくなる場合の対処法です。
アドセンスが隠してしまってクリック出来ない要素を#navだとすると以下のようにCSSを設定します。
[php]#nav {
position:relative;
z-index: 100;
}[/php]
レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。
cssのdisplay:table-cellで解決
html
<ul id="nav"> <li><a href="#"><img src=" nav_home.png" alt="ホーム"></a></li> <li><a href="#"><img src="nav_shop.png" alt="店舗案内"></a></li> <li><a href="#"><img src="nav_contact.png" alt="お問い合わせ"></a></li> </ul>
css
#nav ul {
display: table;
}
#nav li {
display: table-cell;
padding-top: 1px;
}
親要素にdisplay:tableを設定し、揃えたい子要素にdisplay: table-cell;を設定。
これでもブラウザサイズに合わせて、画像は縮小されるのですが、ブラウザのサイズによっては、以下の画像のように1pxほどずれてしまいます。
vertical-alignを設定しても解決出来なかったので、padding-top: 1px;を設定して対応しました。
このpaddingの設定については、無理やり感があるので、もう少しスマートな方法をご存じの方がいらっしゃいましたら、コメントいただけますと嬉しいです。
この投稿へのコメント
コメントはまだありません。