ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Головоломка - помогите с слоем div
17 сообщений из 17, страница 1 из 1
Головоломка - помогите с слоем div
    #38131489
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
главное условие использовать html4 и css2

Есть слой div

нужно внизу этого слояч поместить фоновое изображение или картинку да так чтобы
если печатать сверху текст вначале будет печататься текст по белому фону, потом по фоновой полупрозрачной картинке, а дальше размер фонового изображения не поменяется а будет увеличиваться белое поле сверху

чтобы было понятно это всего лишь слой с таким вот стилем
Код: css
1.
background:url(../../images/bg_bottom.png) left bottom repeat-x #ffffff;



но если так использовать то через фоновую картинку не будет проступать все что под ней, т.е. она будет не прозрачной

прикрепил еще картинку, эта головоломка меня уже заколебала
...
Рейтинг: 0 / 0
30.01.2013, 22:58
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131490
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
вопрос в том как сделать чтобы картинка была прозрачной
...
Рейтинг: 0 / 0
30.01.2013, 23:00
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131499
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Эта картинка сама по себе головоломка. Нарисуй в фотошопе точно, что нужно. Он умеет всё.
...
Рейтинг: 0 / 0
30.01.2013, 23:09
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131525
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
Вот такой вот шаблон нужно намалевать
...
Рейтинг: 0 / 0
30.01.2013, 23:27
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131527
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
вот табличка и текст под ней налазит на фоновое изображение а оно полупрозрачное
если табличка будет увеличиваться текст дойдет до низа слоя а потом будет растягиваться слой
...
Рейтинг: 0 / 0
30.01.2013, 23:28
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131538
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
а, кажется доперло
2 слоя с маргином снизу
...
Рейтинг: 0 / 0
30.01.2013, 23:35
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131541
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
prot0type главное условие использовать html4 и css2 А я-то уже собирался сказать, что можно без картинок...
...
Рейтинг: 0 / 0
30.01.2013, 23:36
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131547
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
нет, не доперло

блин то слой не прозрачный то текст на картинку не налазит

не знаю как шаблон намалевать
...
Рейтинг: 0 / 0
30.01.2013, 23:42
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131756
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
prot0typeэта головоломка меня уже заколебала
Какая-такая головоломка...

 
Код: html
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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#container {
	position: relative;
	min-height: 30%;
}
#fon {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	background-color: red;
	z-index: 1;
}
#text {
	position: relative;
	z-index: 2;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='fon'></div>
	<div id='text'>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
	</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
31.01.2013, 09:47
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131764
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
krvsaprot0typeэта головоломка меня уже заколебала
Какая-такая головоломка...

Код: html
1.
<!DOCTYPE html>

Так это же html 5, а не 4.
Правда автор не уточнил, strict, transitional или frameset ему нужен.
...
Рейтинг: 0 / 0
31.01.2013, 09:55
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38131840
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
AntonariyТак это же html 5, а не 4.
Мой пример будет работать и с другими доктайпами... Например с этим

Код: html
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
Рейтинг: 0 / 0
31.01.2013, 10:41
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38132636
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
krvsaprot0typeэта головоломка меня уже заколебала
Какая-такая головоломка...

 
Код: html
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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#container {
	position: relative;
	min-height: 30%;
}
#fon {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	background-color: red;
	z-index: 1;
}
#text {
	position: relative;
	z-index: 2;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='fon'></div>
	<div id='text'>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
	</div>
</div>
</body>
</html>




это то с чего я начал

попробуй красный фон теперь заменить на полупрозрачное изображение и увидишь что оно станет не прозрачным, будет мешать белый фон

http://learn.javascript.ru/play/W0sRvb] Пример

а нужно чтобы вместо красного фона была полупрозрачная картинка либо бэкграунд и через нее просвечивало то что ниже (допустим там фон синего цвета)
...
Рейтинг: 0 / 0
31.01.2013, 16:41
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38132898
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
prot0typekrvsaпропущено...

Какая-такая головоломка...

 
Код: html
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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#container {
	position: relative;
	min-height: 30%;
}
#fon {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	background-color: red;
	z-index: 1;
}
#text {
	position: relative;
	z-index: 2;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='fon'></div>
	<div id='text'>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
		<p>Пример текста</p>
	</div>
</div>
</body>
</html>




это то с чего я начал

попробуй красный фон теперь заменить на полупрозрачное изображение и увидишь что оно станет не прозрачным, будет мешать белый фон

http://learn.javascript.ru/play/W0sRvb] Пример

а нужно чтобы вместо красного фона была полупрозрачная картинка либо бэкграунд и через нее просвечивало то что ниже (допустим там фон синего цвета)

не так случаем?
...
Рейтинг: 0 / 0
31.01.2013, 19:50
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38132966
Фотография prot0type
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
prot0type
Участник
нет, белый слой наполз на красный

короче это не решаемая задача

а я то думал с помощью html можно намалевать все, нифига подобного
...
Рейтинг: 0 / 0
31.01.2013, 21:10
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38133078
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
prot0type,

Нужен градиент чтоли? В css3 он есть. А в css2 через картинку делается. Или я неверно задачу понял.
...
Рейтинг: 0 / 0
31.01.2013, 23:56
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38133227
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
prot0typeа нужно чтобы вместо красного фона была полупрозрачная картинка либо бэкграунд и через нее просвечивало то что ниже (допустим там фон синего цвета)
Ну поменяй z-index и добавь прозрачности красному фону. Фик поймёшь что тебе нужно...
Ты лучше картинку покажи что именно тебе хочется получить, а то так одни слова, которые не понять в целом...
...
Рейтинг: 0 / 0
01.02.2013, 09:20
| Ответить | Цитировать | Написать  
Головоломка - помогите с слоем div
    #38133228
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
prot0typeВот такой вот шаблон нужно намалевать
Вот это как раз укладывается в мой макет...
...
Рейтинг: 0 / 0
01.02.2013, 09:21
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Головоломка - помогите с слоем div
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38132966&tid=1448774]:
 0ms
get settings:
 11ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 197ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 58ms
get tp. blocked users:
 2ms
others: 287ms
total:  589ms
созд. / загр.: 589ms
x
x
Закрыть


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