Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2011, 20:33
Аватар для MCTrane
Профессор
Отправить личное сообщение для MCTrane Посмотреть профиль Найти все сообщения от MCTrane
 
Регистрация: 26.11.2009
Сообщений: 204

Background выше содержимого блока
Собственно, вопрос вот в чём:
Есть такой код:
<td><div style="background:url(imborder.png)"><img src="image.png"></div></td>

Заливка блока div - это рамка, но если image.png лежит на этом backgraond`е, т.е. на рамке, то не очень хорошо смотрится, поэтому надо чтобы background лежал на картинке. Ну, конечно, в мозиле, ие7 прокатил z-index:-1. Но, вот в ие8 картинка уходит вообще под background самого сайта, т.е. рамки пустые, картинок не видно.
Как можно решить этот вопрос кроссбраузерно?
Ответить с цитированием
  #2 (permalink)  
Старый 22.03.2011, 21:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от MCTrane
надо чтобы background лежал на картинке
Странное желание...

Ты бы хотьпример привёл с нормальными урлами, дабы посмотреть на сие чудо.
Ответить с цитированием
  #3 (permalink)  
Старый 22.03.2011, 22:20
Аватар для MCTrane
Профессор
Отправить личное сообщение для MCTrane Посмотреть профиль Найти все сообщения от MCTrane
 
Регистрация: 26.11.2009
Сообщений: 204

Сообщение от ksa Посмотреть сообщение
Странное желание...

Ты бы хотьпример привёл с нормальными урлами, дабы посмотреть на сие чудо.
http://neocubs.ru/header-body.php
Ответить с цитированием
  #4 (permalink)  
Старый 22.03.2011, 22:25
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

а почему бы просто не поставить картинку по верх картинки ?
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #5 (permalink)  
Старый 22.03.2011, 22:30
Аватар для MCTrane
Профессор
Отправить личное сообщение для MCTrane Посмотреть профиль Найти все сообщения от MCTrane
 
Регистрация: 26.11.2009
Сообщений: 204

Сообщение от walik Посмотреть сообщение
а почему бы просто не поставить картинку по верх картинки ?
Каким образом?
Ответить с цитированием
  #6 (permalink)  
Старый 22.03.2011, 22:36
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Таким:
<style>
div.place {
	position: relative;
}

.image {
	position: absolute;
	top: 35px;
	left: 25px;
	z-index: 1;
}

.border {
	position: absolute;
	z-index: 2;
}
</style>
<div class="place">
	<img class="image" src="http://neocubs.ru/images/image-1.jpg" />
	<img class="border" src="http://neocubs.ru/images/border.png" />
</div>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #7 (permalink)  
Старый 22.03.2011, 22:43
Аватар для MCTrane
Профессор
Отправить личное сообщение для MCTrane Посмотреть профиль Найти все сообщения от MCTrane
 
Регистрация: 26.11.2009
Сообщений: 204

С абсолютной позицией не хочется связываться. Без неё реализовать можно как-то?
Ответить с цитированием
  #8 (permalink)  
Старый 22.03.2011, 22:46
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

А чем абсолютная позиционирование вам мешает ? изображение позиционируется относительно div'у
Без позиционирование по моему нельзя, иначе как изображения налезут друг на друга.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #9 (permalink)  
Старый 23.03.2011, 09:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от MCTrane
если image.png лежит на этом backgraond`е, т.е. на рамке, то не очень хорошо смотрится
Теперь немного понятнее стало после просмотра картинок...

Если у тебя размеры картинок нужного размера - делай их бекграундом. А рамку накладывай сверху, но у неё внутренности прозрачные должны быть.
Ответить с цитированием
  #10 (permalink)  
Старый 23.03.2011, 09:36
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

<style>
.place {
	background-image: url(http://neocubs.ru/images/image-1.jpg);
	background-repeat: no-repeat;
	background-position: 25px 35px;
	width: 235px;
}
</style>
<div class="place">
	<img class="border" src="http://neocubs.ru/images/border.png" />
</div>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить размер блока сразу после изменения его содержимого? Cooskon Events/DOM/Window 6 17.09.2010 16:15
Javascript : появление блока из под другого блока KingR Элементы интерфейса 3 12.05.2010 21:40
Управление содержимым блока brainiac Элементы интерфейса 1 12.04.2010 13:34
Частичное изменение содержимого элемента kuhok Events/DOM/Window 28 07.09.2009 22:44
Скрытие блока после потери фокуса Nubi jQuery 2 06.02.2009 22:58