ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Посоветуйте как организовать компоновку страницы
11 сообщений из 11, страница 1 из 1
Посоветуйте как организовать компоновку страницы
    #39908332
Integrator2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Integrator2
Гость
Здравствуйте!
Надо сделать элементарную HTML-страницу со списком статей.
Но, чтобы краткие описания каждой статьи могли быть либо снизу, либо сбоку справа.
И чтобы это регилировалось красными кнопками как на скриншоте.
Как бы это сделать?
HTML-таблицу в основе заложить? Но тогда ее элементы <td> пне смогут "прыгнуть" вправо.
Или DIV-ы ?

При этом компоновка данная должна сохраняться на очень широких мониторах и не превращаться в одну линию вправо.
А вот под мобильные должно наверное все в узкий вертикальный столбик выстроиться.

Подскажите, пожалуйста, с HTML-кодом. Заранее спасибо.
...
Рейтинг: 0 / 0
26.12.2019, 11:14
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39908447
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Integrator2 , на фотке это "с подписями снизу"?
Как тогда будет смотреться "с подписями справа"?

Не ленись, сделай тестовую страницу с контентом. Не нам же его за тебя писать...
...
Рейтинг: 0 / 0
26.12.2019, 14:06
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39908885
Integrator2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Integrator2
Гость
Имел в виду - если делать HTML-таблицу в основе, то ее элементы <TR> пне смогут "прыгнуть" вправо.
...
Рейтинг: 0 / 0
27.12.2019, 11:08
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39908924
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Integrator2 , то, как ты компонуешь элементы "справа" можно сделать только "табличными" свойствами ЦСС...

ХТМЛя с текстом видно от тебя не дождаться...
...
Рейтинг: 0 / 0
27.12.2019, 12:18
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39908966
Integrator2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Integrator2
Гость
На данный момент вот как сделано
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<ol>
<li class="CLi"><a href="ArticleCRM.htm"><strong>Что такое CRM-система?</strong></a></li>

<p>
В последнее время в нашу бизнес реальность входит термин CRM. Что же это такое?..
</p>

<li class="CLi"><a href="ArticleDB.htm"><strong>Чем базы данных превосходят файлы Excel?</strong></a></li>

<p>
С первого взгляда возможности и функции СУБД (системы управления базами данных, например MS Access) во многом напоминают  принципы работы программы электронных таблиц Microsoft Excel. Тем не менее, они имеют существенные принципиальные различия...
</p>

<li class="CLi"><a href="ArticleSantehnika.htm"><strong>О конфигурации "Магазин сантехники"</strong></a></li>

<p>
Конфигурация «Магазин сантехники» является специализированной, но наиболее полно отражающей все аспекты современной торговой точки...
</p>
...
Рейтинг: 0 / 0
27.12.2019, 13:22
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39908972
Integrator2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Integrator2
Гость
Может по клику на кнопку "С подписями справа" выствлять на JavaScript свойство в одну линию Inline (NOWREP)
для того или иного элемента?

Или что придумать?

Не две же версии HTML-кода делать (с TABLE и без).
...
Рейтинг: 0 / 0
27.12.2019, 13:26
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39908997
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Integrator2
На данный момент вот как сделано

Как вариант, сделай так...
Это вариант текста "справа". Но он еще проще переделывается в текст "снизу"

Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.right .CLi {
	display: table;
}
.right .CLi .container {
	display: table-row;
}
.right .CLi a,
.right .CLi p
 {
	display: table-cell;
}
.right .CLi a {
	white-space: nowrap;
	padding-right: 20px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ol class='right'>
	<li class="CLi">
		<div class='container'>
			<a href="ArticleCRM.htm">Что такое CRM-система?</a>
			<p>
				В последнее время в нашу бизнес реальность входит термин CRM. Что же это такое?..
			</p>
		</div>
	</li>
	<li class="CLi">
		<div class='container'>
			<a href="ArticleDB.htm">Чем базы данных превосходят файлы Excel?</a>
			<p>
				С первого взгляда возможности и функции СУБД (системы управления базами данных, например MS Access) во многом напоминают  принципы работы программы электронных таблиц Microsoft Excel. Тем не менее, они имеют существенные принципиальные различия...
			</p>
		</div>
	</li>
	<li class="CLi">
		<div class='container'>
			<a href="ArticleSantehnika.htm">О конфигурации "Магазин сантехники"</a>
			<p>
				Конфигурация «Магазин сантехники» является специализированной, но наиболее полно отражающей все аспекты современной торговой точки...
			</p>
		</div>
	</li>
</ol>
</body>
</html>
...
Рейтинг: 0 / 0
27.12.2019, 13:54
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39909000
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Integrator2 , если у тега ol убирать класс right - получится обычный текст "снизу"...
...
Рейтинг: 0 / 0
27.12.2019, 13:56
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39909002
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.right .CLi {
	display: table;
}
.right .CLi a,
.right .CLi p
 {
	display: table-cell;
}
.right .CLi a {
	white-space: nowrap;
	padding-right: 20px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ol class='right'>
	<li class="CLi">
		<a href="ArticleCRM.htm">Что такое CRM-система?</a>
		<p>
			В последнее время в нашу бизнес реальность входит термин CRM. Что же это такое?..
		</p>
	</li>
	<li class="CLi">
		<a href="ArticleDB.htm">Чем базы данных превосходят файлы Excel?</a>
		<p>
			С первого взгляда возможности и функции СУБД (системы управления базами данных, например MS Access) во многом напоминают  принципы работы программы электронных таблиц Microsoft Excel. Тем не менее, они имеют существенные принципиальные различия...
		</p>
	</li>
	<li class="CLi">
		<a href="ArticleSantehnika.htm">О конфигурации "Магазин сантехники"</a>
		<p>
			Конфигурация «Магазин сантехники» является специализированной, но наиболее полно отражающей все аспекты современной торговой точки...
		</p>
	</li>
</ol>
</body>
</html>
...
Рейтинг: 0 / 0
27.12.2019, 13:58
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39909062
Integrator2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Integrator2
Гость
Так а что должно происходит при клике на красных кнопках в рамках? Где JavaCыcript code или смена стиля?
Просьба, пояснить ваше решение, как оно устроено. Спасибо.
...
Рейтинг: 0 / 0
27.12.2019, 14:44
| Ответить | Цитировать | Написать  
Посоветуйте как организовать компоновку страницы
    #39909078
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Integrator2
Так а что должно происходит при клике на красных кнопках в рамках?

Как вариант...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.right .CLi {
	display: table;
}
.right .CLi a,
.right .CLi p
 {
	display: table-cell;
}
.right .CLi a {
	white-space: nowrap;
	padding-right: 20px;
}
.none .CLi p {
	display: none;
} 
</style>
<script type='text/javascript'>
$(function(){
	var o=$('#test');
	$('#down').click(function(){
		o.removeClass('right').removeClass('none');
	});
	$('#right').click(function(){
		o.removeClass('none').addClass('right');
	});
	$('#none').click(function(){
		o.removeClass('right').addClass('none');
	});
});
</script>
</head>
<body>
<button id='down'>С подписями снизу</button>
<button id='right'>С подписями справа</button>
<button id='none'>Без подписей</button>
<ol id='test'>
	<li class="CLi">
		<a href="ArticleCRM.htm">Что такое CRM-система?</a>
		<p>
			В последнее время в нашу бизнес реальность входит термин CRM. Что же это такое?..
		</p>
	</li>
	<li class="CLi">
		<a href="ArticleDB.htm">Чем базы данных превосходят файлы Excel?</a>
		<p>
			С первого взгляда возможности и функции СУБД (системы управления базами данных, например MS Access) во многом напоминают  принципы работы программы электронных таблиц Microsoft Excel. Тем не менее, они имеют существенные принципиальные различия...
		</p>
	</li>
	<li class="CLi">
		<a href="ArticleSantehnika.htm">О конфигурации "Магазин сантехники"</a>
		<p>
			Конфигурация «Магазин сантехники» является специализированной, но наиболее полно отражающей все аспекты современной торговой точки...
		</p>
	</li>
</ol>
</body>
</html>
...
Рейтинг: 0 / 0
27.12.2019, 14:55
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Посоветуйте как организовать компоновку страницы
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1443584]:
 0ms
get settings:
 11ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 50ms
get topic data:
 11ms
get first new msg:
 7ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 1ms
others: 226ms
total:  372ms
созд. / загр.: 372ms
x
x
Закрыть


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