私は画像メニュー(4枚の写真のブロック)を持っています、これらの写真の上に何かのテキストを表示したいです。私は前にそれをやったことがあるが、何らかの理由で今度はすべての梨の形をしている。私はそれらをコンテンツとみなし、マークアップでそれらを望むので、CSS内の背景として画像を設定したくありません。イメージにテキストを配置する問題が発生する(CSS、相対的な位置付け)
#club_menu{
position:relative;
padding:1px;
width:99.5%;
height:400px;
/*border: 1px solid #A424A9;*/
}
#club_menu a{
position:relative;
width:295px;
}
#club_menu a h2{
position:absolute;
top:100px;
left:0;
width:100%;
}
#club_menu h2 span{
color:white;
font:bold 24px/45px Helvetica, sans-serif;
letter-spacing:-1px;
background-color:#A424A9;
filter:alpha(opacity=70);
opacity:0.7;
padding:10px;
}
とHTML::
<div id="club_menu">
<a href="#">
<h2><span>Aquum Tuesday</span></h2>
<img src="<?php bloginfo('template_directory'); ?>/images/menu_aquum.jpg" width="295" height="195" />
</a>
<a href="#">
<h2><span>Movida Wednesday</span></h2>
<img src="<?php bloginfo('template_directory'); ?>/images/menu_movida.jpg" width="295" height="195" />
</a>
<a href="#">
<h2><span>Whisky Thursday</span></h2>
<img src="<?php bloginfo('template_directory'); ?>/images/menu_whisky.jpg" width="295" height="195" />
</a>
<a href="#">
<h2><span>Jalouse Tuesday</span></h2>
<img src="<?php bloginfo('template_directory'); ?>/images/menu_jalouse.jpg" width="295" height="195" />
</a>
</div>
を私は今、1時間以上遊んでてきたとラベルがあらゆる場所に簡単にしているここ
私が行っているCSSがあります。私のイメージは完全に正しい場所にあります。誰かがCSSを使っていくつかのスキルを教えてください、私を教えてください。絶対: -
多くのおかげで、Zインデックスを追加する
おそらく、オブジェクトをdisplay:blockという要素でブロックする必要があります。 –
それはラベルのためにそれを行った、今すべての私のイメージは左にある。何の左に – buymypies
?ラベルがリンクに正しく関連しているか、画像に正しく配置されていますか? a要素のサイズと幅を位置関係でブロックとして指定してみると、絶対的に指定された子要素(h2、image)の位置はリンクからの相対位置になります。 –