Дизайн интерфейса
Модератор: immortal
-
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: Дизайн интерфейса
> Alex: Уж коль вы css и js только неделю осваиваете, не подкинете полезных ссылок для изучения, тож въеду
Э, не-ет. Осваиваю я почти год (без особого успеха), а вот въехал я только недавно.
Самая лучшая методика обучения это практика. Ну и не полениться и посвятить несколько дней изучению теории. Ставите себе задачу и пытаетесь её реализовать. За вопросами в поисковую систему. Если сообразительный — быстро поймёте что к чему, если такой как я, то через год.
Э, не-ет. Осваиваю я почти год (без особого успеха), а вот въехал я только недавно.
Самая лучшая методика обучения это практика. Ну и не полениться и посвятить несколько дней изучению теории. Ставите себе задачу и пытаетесь её реализовать. За вопросами в поисковую систему. Если сообразительный — быстро поймёте что к чему, если такой как я, то через год.
-
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: Дизайн интерфейса
Попробовал.
display:none и js
творят чудеса. По нажатию элементов интерфейса появляются и пропадают блоки. Из этого можно сделать всё, что угодно.
То, что надо! Проблем больше нет, осталась творческая работа. Всем спасибо за помощь.
display:none и js
творят чудеса. По нажатию элементов интерфейса появляются и пропадают блоки. Из этого можно сделать всё, что угодно.
То, что надо! Проблем больше нет, осталась творческая работа. Всем спасибо за помощь.
-
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: Дизайн интерфейса
Вопрос к lavstudia. Требуется ваша помощь.
Когда вкладок становится много, они начинают занимать вторую (третью...) строки, что никуда не годится. Вы можете сделать так, чтобы вместо занимания лишних строк, появлялась прокрутка по горизонтали?
Когда вкладок становится много, они начинают занимать вторую (третью...) строки, что никуда не годится. Вы можете сделать так, чтобы вместо занимания лишних строк, появлялась прокрутка по горизонтали?
-
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: Дизайн интерфейса
Alex - c ходу
<!doctype html>
<html>
<head>
<title>Горизонтальный скролл на CSS</title>
<style>
.wrap {
width: 800px;
height: 200px;
overflow-x: auto;
overflow-y: hidden;
}
.wrap ul {width: 2500px;}
.wrap li {
display: inline-block;
vertical-align: top;
width: 200px;
height: 200px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
<li><p>8</p></li>
<li><p>9</p></li>
<li><p>10</p></li>
</ul>
</div>
</body>
</html>
Не совсем гибкий подход ( .wrap ul {width: 2500px;} - преходится задавать вручную, но можно расчитать скриптом при загрузке), можно адаптировать!
2) http://jsfiddle.net/pDRE9/
<!doctype html>
<html>
<head>
<title>Горизонтальный скролл на CSS</title>
<style>
.wrap {
width: 800px;
height: 200px;
overflow-x: auto;
overflow-y: hidden;
}
.wrap ul {width: 2500px;}
.wrap li {
display: inline-block;
vertical-align: top;
width: 200px;
height: 200px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
<li><p>8</p></li>
<li><p>9</p></li>
<li><p>10</p></li>
</ul>
</div>
</body>
</html>
Не совсем гибкий подход ( .wrap ul {width: 2500px;} - преходится задавать вручную, но можно расчитать скриптом при загрузке), можно адаптировать!
2) http://jsfiddle.net/pDRE9/
-
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: Дизайн интерфейса
Подождите, подождите, я совсем другое имел в виду. Видимо, я не так выразился. Посмотрите на скриншот — нужно, чтобы табы не залезали на второй ряд, а появлялась прокрутка табов справа в первом ряду.
- Вложения
-
- 2r.png (7.93 КБ) 11048 просмотров
Последний раз редактировалось Alex Пт мар 21, 2014 6:49 am, всего редактировалось 1 раз.
-
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: Дизайн интерфейса
Alex - думаю первый вариант (выше) подходит (попробуйте создать html страницу и посмотреть)
или нужен вертикальный скрол справа?
или нужен вертикальный скрол справа?
-
- Сообщения: 31
- Зарегистрирован: Вт фев 04, 2014 9:29 am
- Благодарил (а): 0
- Поблагодарили: 4 раза
Re: Дизайн интерфейса
Как обещал - выкладываю частично "причёсанный" шаблон. Все далеко не идеально и не все заявленное (выше) еще сделано (iframe остались, табличная верстка в шапке, js код в шаблоне). Начало положено - возможно и другие проникнуться идеей, буду очень рад. Работа проверена в браузере Google Chrome
Мини инструкция:
Данный шаблон извлечь из архива и поместить файл default.html и папку css с содержимым в папку templates_alt (если у вас там уже есть default.html, можно временно переименовать)
Мини инструкция:
Данный шаблон извлечь из архива и поместить файл default.html и папку css с содержимым в папку templates_alt (если у вас там уже есть default.html, можно временно переименовать)
-
- Сообщения: 2357
- Зарегистрирован: Пт апр 20, 2012 12:53 pm
- Благодарил (а): 42 раза
- Поблагодарили: 262 раза
Re: Дизайн интерфейса
> думаю первый вариант (выше) подходит
- Вложения
-
- 1.png (6.24 КБ) 10983 просмотра
-
- 2.png (9.9 КБ) 10983 просмотра