powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / html, css
5 сообщений из 5, страница 1 из 1
html, css
    #38102253
taaamerlan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я пытаюсь сверстать такую штучку. Написал разметку так
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
  <div id="Main">
   <div class="Contant">
    <a href="Album.html">
     <img src="Dateils/IMG_2219.JPG" width="36%" height="22%">
     <span id="Contspan">
      <strong id="Albumscont"  >Альбом 1</strong>
      <p id="Photos" >27 фото</p>
     </span>
    </a>
   </div>  
  </div>


Как сделать текст поверх изображения? z-index не помогает. Вот стили, которые я состряпал
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
#Main {
	 margin-top: 140px;
}
#Albumscont {
	 font-family: Arial, Helvetica, sans-serif;
	 font-size: 15pt;
	 font-weight: normal;
	 font-style: normal;
	 font-variant: normal;
	 color: #FFFFFF;
}
#Contspan {
	 display: block;
	 position: absolute;
	 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA3MzViOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMDczNWI5IiBzdG9wLW9wYWNpdHk9IjAuMDciLz4KICAgIDxzdG9wIG9mZnNldD0iNCUiIHN0b3AtY29sb3I9IiMwNzM1YjkiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDQxNTQ5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	 background: -moz-linear-gradient(top, rgba(7,53,185,0) 0%, rgba(7,53,185,0.07) 3%, rgba(7,53,185,0.08) 4%, rgba(4,21,73,1) 100%);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(7,53,185,0)), color-stop(3%,rgba(7,53,185,0.07)), color-stop(4%,rgba(7,53,185,0.08)), color-stop(100%,rgba(4,21,73,1)));
	 background: -webkit-linear-gradient(top, rgba(7,53,185,0) 0%,rgba(7,53,185,0.07) 3%,rgba(7,53,185,0.08) 4%,rgba(4,21,73,1) 100%);
	 background: -o-linear-gradient(top, rgba(7,53,185,0) 0%,rgba(7,53,185,0.07) 3%,rgba(7,53,185,0.08) 4%,rgba(4,21,73,1) 100%);
	 background: -ms-linear-gradient(top, rgba(7,53,185,0) 0%,rgba(7,53,185,0.07) 3%,rgba(7,53,185,0.08) 4%,rgba(4,21,73,1) 100%);
	 background: linear-gradient(to bottom, rgba(7,53,185,0) 0%,rgba(7,53,185,0.07) 3%,rgba(7,53,185,0.08) 4%,rgba(4,21,73,1) 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000735b9', endColorstr='#041549',GradientType=0 );
	 z-index: 3;
	 float: left;
	 clip: rect(1px, auto, auto, auto);
}
.Contant {
	 border: 0.15px solid #0735B9;
	 width: 210px;
	 float: left;
	 margin: 0 15px 1.5em 0;
	 z-index: 1;
	 line-height: 4px;
	 vertical-align: top;
}



Помогите пожалуйста... Вот то, что получается tamik.arif.com.ua/default.html
...
Рейтинг: 0 / 0
html, css
    #38102264
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
taaamerlanz-index не помогает
авторЭто свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
http://htmlbook.ru/css/z-index
...
Рейтинг: 0 / 0
html, css
    #38102267
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
html, css
    #38102324
taaamerlan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Паганель, bottom: 50%; это центр страницы или центр в контейнере?
...
Рейтинг: 0 / 0
html, css
    #38102333
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
http://htmlbook.ru/css/bottom Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя
...
Рейтинг: 0 / 0
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / html, css
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]