powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / прошу помощи с правильным построением скелета
25 сообщений из 25, страница 1 из 1
прошу помощи с правильным построением скелета
    #38366307
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
доброго времени суток
Есть старая веб-аппликация (не сайт), структура - 3 фрейма: шапка, меню, контент (модули). Все модули имкют табличный дизайн, id нигде не используются, только классы, формы везде разные, встречаются таблицы где каждая кнопка редактирования имеет свою форму и т.д.
Вобщем есть необходимость редизайна :(.

Я честно не веб-дизайнер (больше того 80% моей работы это БД), поэтому очень нужна помощь в некоторых "элементарных" вещах.

Для начала думаю перевести все в DIV-ы.
Набрасал себе схему :
1. Шапка (position: fixed)
2. Меню (position: fixed и overflow-y:auto; display:block;)
3,4,5,6 вместе . Контент (position:absolute; display:block;)
3. Информация (position:relative)
4. Контентное меню возможно 1-2 стрки/блоков (position:relative)
5. Фильтры, строки поисков и т.д. может быть от 0 до 3 строк/блоков (position:relative;)
6. Формуляры или таблицы (пунктиром обозначена шапка в таблицах) (position:absolute;display:block; overflow-y:auto; )

Вобщем скролироваться должны отдельно друг от друга второй и шестрой див (хотя для скролинга таблиц без шапки придется, как я понял, делать еще один див).

Сейчас при сколинге 6-го дива, он залазит на все верхнии дивы, что есть совсем не хорошо :(
Помогите как правильно описать такой скелет как у меня...
[img=]
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366327
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74Для начала думаю перевести все в DIV-ызачем?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366377
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Паганель,

хочу реализовать схлопывание раскрытие меню, т.к. есть таблицы которые не помещаются в ширину. Т.е. присутствует горизонтальный скролл. А это неудобно для пользователя :( .

Плюс, начитался всякой гадости, про виды современого дизайна :( .
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366389
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
таблица значит не умещается по ширине, а div с тем же содержимым - уместится?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366429
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74Помогите как правильно описать такой скелет как у меня...
Возможно это и есть решение...
http://csstemplater.com/
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366434
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir741. Шапка (position: fixed)
2. Меню (position: fixed)

Ты понимаешь для чего вообще используется
Код: css
1.
position: fixed;


?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366451
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Паганельтаблица значит не умещается по ширине, а div с тем же содержимым - уместится?
нет, таблицу в диве можно будет сдвинуть в лево на размер фрейма меню...

krvsaТы понимаешь для чего вообще используется
надеюсь что да. идет жесткое фиксирование по окну...
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366486
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74нет, таблицу в диве можно будет сдвинуть в лево на размер фрейма меню...значит таблицы все-таки будут?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366496
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaВозможно это и есть решение...
что то у меня не получается там эмулировать мою задачу...
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366500
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74надеюсь что да. идет жесткое фиксирование по окну...
Значит не совсем...

При таком позиционировании при прокрутке контента все элементы с
Код: css
1.
position: fixed;


останутся на своих местах, а контент будет залезать подних...

У тебя вообще будут скролы всего контента по вертикали?
По горизонтали?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366511
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Паганельзначит таблицы все-таки будут?
конечно будут, там где они нужны...
Сейчас эта схема существует, и выглядит так:
1,2 и 3-6 это три разных iFrame
Дальше 3-6 это одна таблица с одной колонкой и двумя/тремя строками в нутри которой находятся таблицы 3, 4 -как одна таблица, и еще 5, 6 как еще одна таблица. Хотя в некоторых местах 5 и 6 это две разные таблицы.
Вот именно этот конструкт я и хочу изменить....
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366524
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaостанутся на своих местах, а контент будет залезать подних...
именно это у меня и происходит...


Див Меню должен скролится по вертикали, а вот div-6 и по вертикали и по горизонтали.
И да, огромное спасибо, ошибку overflow-y:auto; я уже вижу :(
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38366544
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,

а вот как сделать чтоб скролился правильно сам div-6 не знаю

PS: в мире клиентовских приложений все было как то намного проще :(
и скупая мужская слеза.....
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367037
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74Див Меню должен скролится по вертикали, а вот div-6 и по вертикали и по горизонтали.

Что скажешь по высоте элементов 1, 3, 4 и 5? Она фиксирована или растягивается контентом?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367039
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74а вот как сделать чтоб скролился правильно сам div-6 не знаю
Пока мало информации о других элементах... Только когда про всех будет ясно - можно будет что-то предложить по 6-му.
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367125
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaЧто скажешь по высоте элементов 1, 3, 4 и 5? Она фиксирована или растягивается контентом?
высоты у всех элементы фиксированы. Поэтому возможно несколько элементов 4 и 5 (причем 5го дива может вообще не быть)...
Ширина у всех элементов кроме второго - резиновая, вернее сказать до конца окна...
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367224
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir74высоты у всех элементы фиксированы.
Уже хорошо...

vladimir74Поэтому возможно несколько элементов 4 и 5
Это не понял...

vladimir74причем 5го дива может вообще не быть
Это уже плохо...
Придется делать 2 варианта "без 5-го" и "с 5-тым"...
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367226
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
От чего зависит будет 5-тый элемент или нет?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367251
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaОт чего зависит будет 5-тый элемент или нет?
5 элемент это различные вспомогательные фильтры и сортировки которые часто (но не всегда) есть в табличных формулярах. Есть таблицы где фильтры занимают три строки.
В формулярах ввода/редактирования этого элементра практически никогда нет.

4-тый элемент контентное меню- это группа табуляторов (сделана в виде кнопок) вот их может быть как одна строка, так и две строки.

Я думал каждую такую строку (элементы 4 и 5) посылать как отдельный "див" - элемент.
Или это уже сама по себе плохая идея?
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367427
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
vladimir745 элемент это различные вспомогательные фильтры и сортировки которые часто (но не всегда) есть в табличных формулярах. Есть таблицы где фильтры занимают три строки.
В формулярах ввода/редактирования этого элементра практически никогда нет.
Если мы говорим именно о каркасе страницы - не стоит отрывать таблицу от ее фильтров...

vladimir744-тый элемент контентное меню- это группа табуляторов (сделана в виде кнопок) вот их может быть как одна строка, так и две строки.
А до этого писал о фиксированой высоте...

vladimir74Я думал каждую такую строку (элементы 4 и 5) посылать как отдельный "див" - элемент.
Или это уже сама по себе плохая идея?
Мне кажется тут явная путаница именно каркаса с контентом...
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367450
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Пока именно каркасом можно предложить следущее...


Код: 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.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="body">
	<div id="head">head</div>
	<div id="menu">
		<h1>menu</h1>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
			<li>Item 7</li>
			<li>Item 8</li>
			<li>Item 9</li>
			<li>Item 10</li>
			<li>Item 11</li>
			<li>Item 12</li>
			<li>Item 13</li>
		</ul>
	</div>
	<div id="content">
		<p>Реферат по литературоведению</p>
		<h1>
			Тема: «Прозаический ритмический рисунок: ритмический рисунок или 
			линеаризация мышления?»
		</h1>
		<p>
			Первое полустишие аллитерирует хорей, но языковая игра не приводит 
			к активно-диалогическому пониманию. Весьма перспективной представляется 
			гипотеза, высказанная И.Гальпериным: быличка однородно интегрирует 
			поэтический одиннадцатисложник, таким образом, очевидно, что в нашем 
			языке царит дух карнавала, пародийного отстранения. Гиперцитата параллельна. 
			Парономазия интегрирует мифологический ритм, именно об этом говорил 
			Б.В.Томашевский в своей работе 1925 года. Матрица начинает конструктивный 
			речевой акт, и это является некими межсловесными отношениями другого типа, 
			природу которых еще предстоит конкретизировать далее. 
		</p>
		<p>
			Цезура начинает механизм сочленений, так как в данном случае роль 
			наблюдателя опосредована ролью рассказчика. Декодирование стабильно. 
			Несобственно-прямая речь, чтобы уловить хореический ритм или 
			аллитерацию на "л", пространственно выбирает мелодический пастиш, 
			таким образом в некоторых случаях образуются рефрены, кольцевые 
			композиции, анафоры. Тоника вероятна. Обсценная идиома дает 
			мифологический пастиш, и это ясно видно в следующем отрывке: 
			«Курит ли трупка мой, – из трупка тфой пихтишь. / Или мой кафе 
			пил – тфой в щашешка сидишь». Ударение текуче. 
		</p>
		<p>
			Матрица традиционно представляет собой экзистенциальный палимпсест, 
			тем не менее узус никак не предполагал здесь родительного падежа. 
			Ямб аллитерирует метафоричный реформаторский пафос, тем не менее 
			узус никак не предполагал здесь родительного падежа. Диалогичность 
			отталкивает словесный речевой акт, несмотря на отсутствие единого 
			пунктуационного алгоритма. Диахрония доступна.
		</p>
	</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367451
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Млин, ЦСС забыл вставить...

Код: css
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.
* {
    margin: 0px;
    padding: 0px;
}
html,
body {
	width: 100%;
	height: 100%;
}
#body {
	position: relative;
	width: 100%;
	height: 100%;
}
#head {
	height: 30px;
	background-color: aqua;
}
#menu {
	position: absolute;
	top: 30px;
	left: 0;
	bottom: 0;
	width: 100px;
	overflow: auto;
	background-color: lime;
}
#content {
	position: absolute;
	top: 30px;
	left: 100px;
	right: 0;
	bottom: 0;
	overflow: auto;
}

...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38367607
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsaА до этого писал о фиксированой высоте...
вот именно для того чтоб они все были фиксированы, думал оформить каждую строку как отдельный div.

krvsaМне кажется тут явная путаница именно каркаса с контентом...
скажем так, это мое представление что должно получиться в конечном виде :).

Спасибо, буду копаться дальше..
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38368054
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вот что у меня пока получилось, если сильно не "кошерно" разрешаю попинать, но не больно :))
Код: css
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.
* {
    margin: 0px;
    padding: 0px;
}
html,body {width: 100%;
           height: 100%;
           overflow:hidden;}
           
#body {position: relative;
       height:100%; 
       width:100%; 
       border:0px;
       border-style:solid; }

#hheader {position: relative; 
          width: 100%;
          padding: 10px;
          height: 100px;
          }

#hmenu {position: absolute;
        overflow:auto;
        float:left;
        display:block;
        width:180px;
        height:calc(100% - 103px);
        top:102px;
        left:0px;
        bottom:5px;
        background-color:#E3EDF2;}

#hcontent {position:absolute;
           left:182px;
           display:block;
           height:calc(100% - 103px);
           top:102px;
           bottom:0;
           width: 100%;}

#header  {position:relative;
          height:30px;
          border-style:solid; 
          border-width:1px;
          background-color:#E3EDF2;}

#menu    {position:relative;
          height:35px;
          background-color:#E3EDF2;}
          
#filter  {position:relative;
          height:30px;
          background-color:#E3EDF2;}

#content {position:absolute;
          top:0px;
          left:0px;
          right:180px;
          bottom:5px;
          overflow:auto;}


Код: 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.
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	  var m=$('div.menu').length;
  if (m==0){m=1;}
  var f=$('div.filter').length;
  if (f==0){f=1;}
  var l = $('#header').height()+ $('#menu').height()*m+$('#filter').height()*f;
  $('#content').css('top',l); 
})
</script>
</head>
<body>
<div id="body">
	<div id="hheader"><h1>Header!!</h1></div>
	<div id="hmenu">
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
			<li>Item 7</li>
			<li>Item 8</li>
			<li>Item 9</li>
			<li>Item 10</li>
			<li>Item 11</li>
			<li>Item 12</li>
			<li>Item 13</li>
			<li>Item 14</li>
			<li>Item 15</li>
			<li>Item 16</li>
			<li>Item 17</li>
			<li>Item 18</li>
			<li>Item 19</li>
			<li>Item 20</li>
		</ul>
	</div>
	<div id="hcontent">
	  <div id="header">
	  	<h2>Muster 01</h2>
		</div>

	  <div id="menu">
	  	<button>Show</button>
	  	<button>edit</button>
		</div>
			
	  <div id="filter">
			<p>test Filter 01</p>
		</div>			
	  
	  <div id="content">
			<table>
				<thead>
					<tr>
						<th>Head 01</th><th>Head 01</th>
					</tr>
				</thead>
			<tbody>
			<tr><td>Feld 01</td><td>Feld 01</td></tr>
			<tr><td>Feld 02</td><td>Feld 02</td></tr>
			<tr><td>Feld 03</td><td>Feld 03</td></tr>
			<tr><td>Feld 04</td><td>Feld 04</td></tr>
			<tr><td>Feld 05</td><td>Feld 05</td></tr>
			<tr><td>Feld 06</td><td>Feld 06</td></tr>
			<tr><td>Feld 07</td><td>Feld 07</td></tr>
			<tr><td>Feld 08</td><td>Feld 08</td></tr>
			<tr><td>Feld 09</td><td>Feld 09</td></tr>
			<tr><td>Feld 10</td><td>Feld 10</td></tr>
			<tr><td>Feld 11</td><td>Feld 11</td></tr>
			<tr><td>Feld 12</td><td>Feld 12</td></tr>
			<tr><td>Feld 13</td><td>Feld 13</td></tr>
			<tr><td>Feld 14</td><td>Feld 14</td></tr>
			<tr><td>Feld 15</td><td>Feld 15</td></tr>
			<tr><td>Feld 16</td><td>Feld 16</td></tr>
			<tr><td>Feld 17</td><td>Feld 17</td></tr>
			<tr><td>Feld 18</td><td>Feld 18</td></tr>
			<tr><td>Feld 19</td><td>Feld 19</td></tr>
			<tr><td>Feld 20</td><td>Feld 20</td></tr>
			</tbody>
		</table>	
		</div>			
	</div>
</div>
</body>
</html>


высоту #content' я выставляю в скрипте, возможно эту запись можно сократить...
по скроллингу таблицы с фиксированой шапкой я пока ничего интересного тоже не нашел, в основном делят таблицу на две, в одной рисуют шапку в другой тело.
Решение легкое, но оно ломается если где то в таблице строка без переноса шире заданой велечины...
...
Рейтинг: 0 / 0
прошу помощи с правильным построением скелета
    #38368058
vladimir74
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
хмм а код тут не автоматом сворачивается?
Админы если можно подправьте плз!!
...
Рейтинг: 0 / 0
25 сообщений из 25, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / прошу помощи с правильным построением скелета
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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