X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> наложение текста поверх картинки
what_th_duck
what_th_duck
Topic Starter сообщение 1.12.2008, 13:04; Ответить: what_th_duck
Сообщение #1


Выводится ссылка в виде thumbnail картинки. Мне нужно сделать чтобы на эту картинку thumbnail накаладывался полупрозрачый текст "-25%".
<a id='thumb1' href='pict/154.jpg' class='highslide' onclick='return hs.expand(this)'>
<img id='layer1' src='thumb/154.jpg' alt='наручные мужские часы'/>
<div id='layer2'>-25%</div>
</a>

Я сделал полупрозрачность текста для IE и для др. браузеров, а вот с позиционированием DIV проблемы, везде все на окей работает, вот только в IE все съезжает с места.Точнее не сам Div съезжает, а снизу картинки пустое пространство возникает а это не допустимо. Ниже привожу фрагмент CSS:
#layer1{
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
width:130px;
height:130px;
background-color:#f6f6f6;
position:relative;
z-index:1;
}
#layer2{
position: relative;
top:-35px;
left:28px;
z-index:2;
font-size:26px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#CC0000;
margin-top:0px;
margin-bottom:0px;
width:100px;
height:0px;
opacity:0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

Помогите пожалуйста!
Также выкладываю картинку как у меня выходит в ОПЕРЕ 9:
[attachment=35404:primer02.jpg]
и как это выглядит в IE 7:
[attachment=35405:primer01.jpg]
хм правда что то картинки маленькие, ну там видна разница что в IE текст ниже картинки съезжает вниз
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 1.12.2008, 13:24; Ответить: Webmaster_hb
Сообщение #2


для наглядности задайте для блока в котором текст рамку в 1px красную, для обрамляющего блока зеленую, и покажите что получается
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
what_th_duck
what_th_duck
Topic Starter сообщение 1.12.2008, 14:14; Ответить: what_th_duck
Сообщение #3


[attachment=35406:primer03.jpg]
они должны стоять в ряд, а из за DIV в IE 7 стоит вот так криво как на этой фотке
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 1.12.2008, 14:27; Ответить: Webmaster_hb
Сообщение #4


по блокам не видно чтобы они мешали, попробуйте обрамить общим блоком с заданной высотой и overflow:hidden
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
what_th_duck
what_th_duck
Topic Starter сообщение 1.12.2008, 15:52; Ответить: what_th_duck
Сообщение #5


после 3 часов безперерывного тыкания в стилях CSS получилось только благодаря вашей Webmaster - подсказке. Задал высоту в пикселях, и добавил overflow:hidden, все встало на свои места! ура! Спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yes891
yes891
сообщение 19.11.2009, 0:39; Ответить: yes891
Сообщение #6


кому не сложно тот же вопрос, но я так и не понял что делать.
Мну нужно налодить текст на картинку (но не фон)
тоесть есть фон, потом картинка, а потом текст.
как это реализовать?
Черканите пожалуйста код.
Зарание спасибо
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomp
pomp
сообщение 19.11.2009, 1:00; Ответить: pomp
Сообщение #7


Не проверял.

html
<div id="main">
<img id="img" src="" alt=""/>
<div id="text">тут текст</div>
</div>


css
#main {
background-color:grey;
height:100px;
overflow:hidden;
/*указать фон*/
}
#img{
width:100px;
height:100px;
background-color:#f6f6f6;
position:relative;
z-index:1;
}
#text{
position: relative;
top:-50px;
z-index:2;
width:100px;
height:0px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mikola_hb
mikola_hb
сообщение 21.2.2011, 15:09; Ответить: mikola_hb
Сообщение #8


Не проверял

я проверял.
только что. отлично работает во всех браузерах )

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
 167 metvekot 27438 6.3.2024, 21:58
автор: Boymaster
Открытая тема (нет новых ответов) Перевод текста в речь нейросетями - сервис Zvukogram
 13 Zvukogram 7217 19.2.2024, 18:16
автор: freon_mr777
Открытая тема (нет новых ответов) 📌 Рандомизация видео/аудио/фото/текста с минимальным участием - 𝓓𝓮𝓵𝓽𝓪𝓣𝓸𝓸𝓵𝓼
Мы предлагаем комплексное решение для рандомизации всех видов офера
 2 leviathan 1379 29.1.2024, 21:29
автор: leviathan
Открытая тема (нет новых ответов) Нужен перевод текста с RU на UZ
 0 REGNET 769 22.2.2023, 15:17
автор: REGNET
Открытая тема (нет новых ответов) Наполнение сайта Автотематики (написание текста с размещением)
Ищу человека для длительного сотрудничества
 2 NYLesha 1836 1.8.2022, 23:22
автор: NYLesha


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 5:45

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet