Слайдер контента

Есть чем поделится? нашли красивое нестандартное решение задачи? выкладываем здесь.

Слайдер контента

Сообщение Колпаков Александр » 31 янв 2012, 10:21

Итак, уважаемые web-мастера, web-мастерицы и web-мастерята, представляю Вашему вниманию слайдер контента (если конечно можно так его обозвать).
Открываем у себя, смотрим, тестируем...
Если, что не так, сильно не пинайте. Я старался...
Осознаю, что данная тема не новая, но тем не менее...
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>slider</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Основной блок -->
   <div id="main">
<!-- Блок меню -->   
        <div id="menu">
       <ul>
          <li><a href="#one">1</a></li> <!-- Цепляем якорь к блокам с контентом(div#one, div#two...) -->
         <li><a href="#two">2</a></li>
         <li><a href="#three">3</a></li>
         <li><a href="#four">4</a></li>
         <li><a href="#five">5</a></li>
         <li><a href="#six">6</a></li>
      </ul>
       </div>
<!-- Блок с вкладками -->      
      <div id="block">
          <div id="one">
         Если Вы уже прошли курс обучения по учебнику HTML (http://webremeslo.ru/html/glava0.html) или же хорошо знакомы с HTML почерпнув необходимые знания из других источников, то настало время взяться за изучение CSS. CSS (Cascading Style Sheets) - Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
         </div>
         <div id="two">
         Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился! Приведу ряд доводов в пользу использования CSS: HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников "Как убрать подчеркивание ссылки?" или "Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?" с помощью одного HTML этого никак не сделать!! А сколько их еще таких "больных вопросов"? - тьма.. Тут то и приходит на помощь CSS, который решает большинство задач касающихся дизайна сайта.
            </div>
         <div id="three">
         Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта?
         </div>
         <div id="four">
         Допустим: все заголовки делать красным цветом, параграфы писать курсивам, ссылки не подчёркивать :) фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги  и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.
            </div>
         <div id="five">
         Ввиду того, что CSS позволяет выносить повторяющиеся стилевые описания одних и тех же элементов в один файл происходит значительная "разгрузка" документов HTML, а это экономия объема, трафика, времени, денег.. HTML код становится лёгким, удобным для чтения и редакции.
            </div>
         <div id="six">
         Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS (http://webremeslo.ru/spravka/spravka4.html) где собранны и кратко описаны свойства CSS и их возможные значения.
            </div>
      </div>
   </div>
</body>
</html>

CSS
Код: Выделить всё
body, html, div, ul{margin:0; padding:0;}
      
#main{
      width:500px; /*Стилизуем основной блок*/
     height:280px;
     background:white;
     border:5px double #000;
     margin:0 auto;
     margin-top:50px;
     }
          
#menu{
      width:100%; /*Стилизуем блок меню*/
     height:30px;
     background:rgb(30%, 70%, 50%);
     }
          
#menu ul{
       list-style:none;
       }

#menu ul li{
        float:left;
      font-weight:bold;
      text-align:center;
      }
               
#menu ul li a{
        display:block;
        width:73px;
        height:20px;
        text-decoration:none;
        background:black;
        margin:3px 0 0 5px;
        color:#fff;
        border:2px solid silver;
        }
       
#menu ul li a:hover{background:white; color:#000; border:2px solid black;}
      
#block {
      overflow:hidden;/*Скрываем все, что превышает height:250px;.*/
      height:250px;
      }
      
#block div{ 
         padding:10px;       
         height:230px;       /*Высота блока родителя(#block)-20px(padding 10px сверху и 10px снизу). Ширину не вычитаем, так как она явно не задана.*/
        text-align:justify; /*Как следствие, будет отображаться содержимое только каждого отдельно взятого элемента */
       font-size:15px;
       background:black;
       color:#fff;
       }
   

Валидный код: xhtml и css.
Кроссбраузерно, включая IE6.(Проблема возникла только с оперой версии 9.65, но возможно она у меня "битая").
Единственное, что у меня не получилось сделать(из задуманного) - это активные вкладки на css. Если у кого-то есть мысли как это сделать без javascript и jquery, пишите.
С уважение, Александр
P.S. Я прекрасно осознаю, что то-же самое можно реализовать с помощью jquery(и будет работать гораздно эффектней), но я преследовал другую цель - показать возможности css.
Не стесняемся, пишем отзывы.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: Слайдер контента

Сообщение Женечка » 03 авг 2012, 23:13

Знаете Саша! Очень здорово, что Вы такой весь активный. Но мне кажется что это направление деятельности как "решения"(если так можно сказать) лучше вывести из форума и переместить непосредственно среди страниц учебного материала сайта. Просто потому, что начинающие выходят в форум с конкретной проблемой-экспериментировать и ваять в свое удовольствие они еще не могут- силенок не хватает. И заглядывая в свое прошлое возможно даже еще не понимают о чем вообще идет речь. ;))?
Женечка
 
Сообщения: 50
Зарегистрирован: 03 ноя 2011, 00:44

Re: Слайдер контента

Сообщение Колпаков Александр » 16 авг 2012, 11:45

Женечка, спасибо за совет, но есть одно "НО": я не являюсь администратором данного форума и вышеуказанного сайта так, что Ваш комментарий вероятнее всего должен быть адресован Алексею.
С уважением, Александр.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: Слайдер контента

Сообщение renyli » 18 сен 2012, 18:02

Спасибо, конечно,большое, но ничего невозможно скопировать.
Ирина.
renyli
 
Сообщения: 5
Зарегистрирован: 16 сен 2012, 00:39

Re: Слайдер контента

Сообщение Алексей » 19 сен 2012, 00:53

но ничего невозможно скопировать

В смысле?
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: Слайдер контента

Сообщение Encoder » 29 мар 2014, 13:54

Наверно привыкли видеть кнопку скопировать, когда нажимаешь на нее и весь код копируется в буфер обмена.
Аватара пользователя
Encoder
Модератор
 
Сообщения: 360
Зарегистрирован: 21 фев 2011, 11:15


Вернуться в Решения

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron
Рейтинг@Mail.ru