проблемы размещения текста над изображением (CSS, относительное позиционирование) - PullRequest
Новая
       27

проблемы размещения текста над изображением (CSS, относительное позиционирование)

0 голосов
/ 07 декабря 2011

Итак, моя проблема такова;У меня есть меню изображений (блок из 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>

Я играю уже больше часа, и лейблы просто повсюду.Мои изображения на месте отлично.Может кто-нибудь с некоторыми навыками в CSS, пожалуйста, просветите меня.

Большое спасибо,

Ответы [ 2 ]

0 голосов
/ 07 декабря 2011

Из css похоже, что изображения не расположены абсолютно внутри объекта ссылки. Add #club_menu img {position: absolute;топ: 0px;left: 0px;}

попробуйте указать размер и ширину элемента ссылки в виде блока, используя (display: block; или display: inline-block, если вам нужно, чтобы блоки были встроены друг в друга), сотносительное положение

Тогда любые дочерние элементы (h2, изображение), которые могут быть указаны абсолютно, будут относительными по отношению к ссылке.

Скорее всего, вам потребуется включить предыдущий ответ о z-indexполучить текст над изображением.

0 голосов
/ 07 декабря 2011

Попробуйте добавить z-index - http://www.w3schools.com/cssref/pr_pos_z-index.asp

...