Дизайн интерфейса

Alex · Сообщение **Alex** » Ср мар 19, 2014 7:03 pm

> Alex: Уж коль вы css и js только неделю осваиваете, не подкинете полезных ссылок для изучения, тож въеду

Э, не-ет. Осваиваю я почти год (без особого успеха), а вот въехал я только недавно.

Самая лучшая методика обучения это практика. Ну и не полениться и посвятить несколько дней изучению теории. Ставите себе задачу и пытаетесь её реализовать. За вопросами в поисковую систему. Если сообразительный — быстро поймёте что к чему, если такой как я, то через год.

Alex · Сообщение **Alex** » Ср мар 19, 2014 7:03 pm

Попробовал.

display:none и js

творят чудеса. По нажатию элементов интерфейса появляются и пропадают блоки. Из этого можно сделать всё, что угодно.

То, что надо! Проблем больше нет, осталась творческая работа. Всем спасибо за помощь.

Alex · Сообщение **Alex** » Чт мар 20, 2014 3:08 pm

Вопрос к lavstudia. Требуется ваша помощь.

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

lavstudia · Сообщение **lavstudia** » Чт мар 20, 2014 4:15 pm

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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>

</body>
</html>

Не совсем гибкий подход ( .wrap ul {width: 2500px;} - преходится задавать вручную, но можно расчитать скриптом при загрузке), можно адаптировать!

2) http://jsfiddle.net/pDRE9/

Alex · Сообщение **Alex** » Чт мар 20, 2014 6:06 pm

Подождите, подождите, я совсем другое имел в виду. Видимо, я не так выразился. Посмотрите на скриншот — нужно, чтобы табы не залезали на второй ряд, а появлялась прокрутка табов справа в первом ряду.

lavstudia · Сообщение **lavstudia** » Чт мар 20, 2014 9:19 pm

Alex - думаю первый вариант (выше) подходит (попробуйте создать html страницу и посмотреть)
или нужен вертикальный скрол справа?

lavstudia · Сообщение **lavstudia** » Чт мар 20, 2014 11:11 pm

Как обещал - выкладываю частично "причёсанный" шаблон. Все далеко не идеально и не все заявленное (выше) еще сделано (iframe остались, табличная верстка в шапке, js код в шаблоне). Начало положено - возможно и другие проникнуться идеей, буду очень рад. Работа проверена в браузере Google Chrome

Мини инструкция:
Данный шаблон извлечь из архива и поместить файл default.html и папку css с содержимым в папку templates_alt (если у вас там уже есть default.html, можно временно переименовать)

: screen.jpg (121.92 КБ) 11003 просмотра

templates_alt.zip: (2.82 КБ) 443 скачивания

Alex · Сообщение **Alex** » Пт мар 21, 2014 6:47 am

> думаю первый вариант (выше) подходит

lavstudia · Сообщение **lavstudia** » Пт мар 21, 2014 10:28 am

Тогда вот так

tab.zip: (4.74 КБ) 292 скачивания

PAV · Сообщение **PAV** » Пт мар 21, 2014 11:30 am

Визуально отличий не заметил. Скролбар такой же как был.

Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса

Re: Дизайн интерфейса