Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Оформить BODY / 15 сообщений из 15, страница 1 из 1
12.04.2010, 12:39:09
    #36573806
ditoch
ditoch
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
День добрый!
Идея: страница должна быть "резиновой", но при расширении менее 800х600 должны появляться полосы прокрутки и ничто не смещается. В остальных случаях все дивы привязаны к границам браузера. С помощью Position:fixed удается привязать дивы и все. Как воплотить идею? Заранее благодарен! Вот код:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel = "Stylesheet" type="text/css" href="CSS/StyleSheet.css" /><meta http-equiv="Content-Type" content="text/html; charset=urf-8" />

</head>
<body >
<div class="container"></div>

<div id="LeftTop"></div>
<div id="LeftPartWin"></div>
<div id="LeftBott" onclick="LBClick()"></div>
<div id="BottCenter"></div>
<div id="RightTop"></div>
<div id="RightPartWin"></div>
<div id="RightBott"></div>

</body>
</html>

CSS:

html {

background:url(../Images/Backgr.jpg) no-repeat center top;

}

.container
{

min-width:800px;
min-height:600px;
}


#LeftTop {
position:fixed;
background:url(../Images/LeftTop.png) no-repeat;
background-repeat:no-repeat;
width:133px;
height:163px;
top:50px;
left:0px;
}

#LeftPartWin {
position:fixed;
background:url(../Images/LeftPartWin.png) no-repeat;
width:133px;
height:91px;
left:0px;
top:40px;
}

#LeftBott
{
position:fixed;
background:url(../Images/LeftBott.png) no-repeat;
width:133px;
height:202px;
left:0px;
Bottom:0px;}

#RightBott
{
position:fixed;
background:url(../Images/RightBott.png) no-repeat;
width:129px;
height:202px;
right:0px;
bottom:0px;}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 12:49:25
    #36573860
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditochКак воплотить идею?
Код не показывает идею... Покажи идею на какой-либо картинке.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 12:52:28
    #36573866
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditoch , в ИЕ6.0 вообще все "в кучку"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 12:59:06
    #36573885
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
krvsa ditoch , в ИЕ6.0 вообще все "в кучку"...
В ИЕ6 позишин:фиксед не работает.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 13:21:48
    #36573969
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ShSerge , что уже осложняет реализацию неведомой "идеи"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 14:29:07
    #36574150
ditoch
ditoch
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
krvsa,

Вот то, что выводит на данный момент: 777.jpg.
Должно быть деревянное окно (из дивов) по контуру, кроме верха. Выделенные красным - планирую размножать скриптом по мере изменения размера окна браузера
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 16:15:34
    #36574513
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditoch , так-с... И в чем собственно проблема?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 16:25:56
    #36574550
ditoch
ditoch
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
krvsa,

сделал Position:absolute, вижу, что боди действительно имеет мин-ширина и мин-высота: 800 и 600 соответственно (т.к. появляются полсе прокрутки при уменьшении окна).
Но див-ы не "привязаны" к боди. В чем тогда смысл absolute? - привязки к родительскому контейнеру.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 16:38:39
    #36574588
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditochпри расширении менее 800х600 должны появляться полосы прокрутки и ничто не смещается
Как вариант... Там не все точно по размерам... Но идея думаю понятна.

Код: plaintext
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.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
<html>
<head>
<title></title>
<style>
* {
	margin:  0 ;
	padding:  0 ;
}
html,
body {
	width:  100 %;
	height:  100 %;
}
#cont {
	position: relative;
	width:  100 %;
	height:  100 %;
}
#d {
	width: 800px;
	height: 600px;
}
#d1 {
	position: absolute;
	top: 100px;
	left: 50px;
	width: 300px;
	height: 200px;
	border: 1px solid;
}
#d2 {
	position: absolute;
	top: 120px;
	right: 70px;
	width: 100px;
	height: 200px;
	border: 1px solid;
}
#d3 {
	position: absolute;
	top: 350px;
	left: 150px;
	width: 150px;
	height: 100px;
	border: 1px solid;
}
#d4 {
	position: absolute;
	top: 370px;
	right: 50px;
	width: 200px;
	height: 50px;
	border: 1px solid;
}
#d5 {
	position: absolute;
	bottom: 100px;
	left: 50px;
	width: 250px;
	height: 200px;
	border: 1px solid;
}
#d6 {
	position: absolute;
	bottom: 20px;
	left: 310px;
	width: 300px;
	height: 200px;
	border: 1px solid;
}
#d7 {
	position: absolute;
	bottom: 70px;
	right: 70px;
	width: 100px;
	height: 200px;
	border: 1px solid;
}
</style>
</head>
<body >
<div id='cont'>
	<div id="d"></div>
	<div id="d1"></div> 
	<div id="d2"></div>
	<div id="d3"></div>
	<div id="d4"></div>
	<div id="d5"></div>
	<div id="d6"></div>
	<div id="d7"></div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 16:40:34
    #36574597
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditochВ чем тогда смысл absolute? - привязки к родительскому контейнеру.
Тип таво... Но родительский это как частный случай... А так "верхнему" который не статик.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 18:23:29
    #36574835
ditoch
ditoch
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
krvsa,

Добавил - ничего не изменилось... увы..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.04.2010, 19:56:05
    #36575009
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditoch , что значит не изменилось? В моём примере при уменьшении размеров окна ДИВы "останавливаются" и появляются полосы прокрутки.
Ты вроде такого хотел...
Другое дело размеры ДИВов у меня большие и просто сами не помещаются в 800х600. Я их просто не уменьшал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.04.2010, 10:35:34
    #36575682
ditoch
ditoch
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
krvsa,

Да, увидел, беру свои слова назад..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.04.2010, 10:36:05
    #36575686
ditoch
ditoch
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
krvsa,

Спасибо!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.04.2010, 11:26:16
    #36575849
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Оформить BODY
ditoch , заходи еще...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Оформить BODY / 15 сообщений из 15, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 584ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1453237]:
 0ms
get settings:
 11ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 247ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 50ms
get tp. blocked users:
 1ms
others: 239ms
total:  584ms
x
x
Закрыть


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