Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Головоломка - помогите с слоем div / 17 сообщений из 17, страница 1 из 1
30.01.2013, 22:58
    #38131489
prot0type
prot0type
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Головоломка - помогите с слоем div
главное условие использовать html4 и css2

Есть слой div

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

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



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

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

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

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

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

Так это же html 5, а не 4.
Правда автор не уточнил, strict, transitional или frameset ему нужен.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.01.2013, 10:41
    #38131840
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Головоломка - помогите с слоем div
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, 16:41
    #38132636
prot0type
prot0type
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Головоломка - помогите с слоем div
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, 19:50
    #38132898
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Головоломка - помогите с слоем div
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, 21:10
    #38132966
prot0type
prot0type
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Головоломка - помогите с слоем div
нет, белый слой наполз на красный

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

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

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


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