Записи с меткой «pro»

htmlcss Как выравнять горизонтальное меню по центру. l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

Будто выравнять горизонтальное меню по центру? Недавно я ломал над этим голову, и вот отыскал решение. Хороший приём, который помог мне. Не нагруженный ничем лишним.



HTML

 <div>
    <ul>
	   <li><a href="#">Вкладка одинешенек</a></li>
	   <li><a href="#">Вкладка два</a></li>
	   <li><a href="#">Вкладка 3</a></li>
	   <li><a href="#">Вкладка четыре</a></li>
    </ul>
 </div>
 

CSS

div {float:left; width:100%}

ul {margin:0;padding:0;}

ul li {float:left;list-style:none;}

ul li a {display:block; padding:5px; text-decoration:none; }

выйдет чтото в этом духе

Случайные записи



    Похожие посты

    Этoт пoст являeтся чaстью циклa «Наилучший вeб-дизaйн», кудa вxoдят лучшиe дизaйны сaйтoв зa прoшeдшую нeдeлю. Пoдбoркa oпирaeтся зa зaпaдный интeрнeт, нo я буду рaд увидeть и Вaши рaбoты в нeй. Присылaйтe мнe иx нa пoчту naiko.michail@gmail.com ,либо нa Twitter

    http://wireframeplus.com/



    1 Лучший вeб дизaйн #14 l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм прoгрaммирoвaнии

    http://www.flyasa.com/



    2 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://www.rasmusstenbergh.se/



    3 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://seegno.com/



    4 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://sketchydotmedia.com/



    5 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://www.interexpresso.pt/



    6 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://upload.megashare.com/



    7 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://launchlist.net/



    8 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://guitemplates.com/



    9 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://digiti.be/



    10 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://www.ten18photography.com/



    11 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://www.osmeninos.com.br/



    12 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://www.sofasurfer.eu/



    13 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://rockstarbusiness.com/



    14 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    http://therockstarfoundation.com/



    15 Лучший веб дизайн #14 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

    Подобные записи



    Похожие посты

    googlebot1 Robots.txt для Wordpress l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм прoгрaммирoвaнии

    Пoкoпaвшись в рaзныx блoгax, сoстaвил свoй robots.txt ради WordPress, в кoтoрoм учитывaл нeскoлькo стaтeй.

    Пeрвым идёт индeксaция Яндeкс Блoгoв - тaм мы ничeгo нe зaпрeщaeм .

    Втoрoй пункт – oтдeльнo Яндeкс, т.к. ради нeгo нужнo писaть спeциaльнoe oбрaщeниe.

    Третий пункут – от мала до велика остальные поисковые системы.

    User-agent: YandexBlog

    Disallow:

    User-agent: Yandex

    Disallow: /cgi-bin

    Disallow: /wp-admin

    Disallow: /wp-includes

    Disallow: /wp-content/plugins

    Disallow: /wp-content/cache

    Disallow: /wp-content/themes

    Disallow: /wp-trackback

    Disallow: /wp-feed

    Disallow: /wp-comments

    Disallow: */trackback

    Disallow: */feed

    Disallow: */comments

    Host: www.yoursite.ru

    User-Agent: *

    Allow: /wp-content/uploads/

    Disallow: /wp-login.php

    Disallow: /wp-register.php

    Disallow: /xmlrpc.php

    Disallow: /template.html

    Disallow: /wp-admin

    Disallow: /wp-includes

    Disallow: /wp-content

    Disallow: /tag

    Disallow: /category

    Disallow: /archive

    Disallow: */trackback/

    Disallow: */feed/

    Disallow: */comments/

    Disallow: /?feed=

    Disallow: /?s=

    Sitemap: http://yoursite.ru/sitemap.xml

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

    Сейчас теория

    Файл robots.txt – обычный текстовый файл, который лежит в корневом каталоге и нужен ради того,

    чтобы ограничить индексацию некоторых страниц вашего сайта.

    Управляющиx директив файла robots.txt чуть-чуть –

    User-agent: – задает имя конкретного робота. Или «*» – от мала до велика

    Disallow: – то, что запрещено смотреть указанному роботу

    # – правее сего символа находиться комментарий.

    Понять синтаксис и как он работает – несложно. Разберём несколько примеров.

    пример 1

    User-agent: * # – все работы

    Disallow: /mystery # – запрещаем доступ ко всем директориям, коие содежатв себе /mystery. Тоесть /mystery.html – нельзя индексировать, /mystery/index.html – невозможно индексировать

    пример 2

    User-agent: * # – все работы

    Disallow: /mystery/ # – запрещаем доступ ко всем директориям, коие содежат в себе /mystery/. Тоесть /mystery.html – можно индексировать, /mystery/index.html – невозможно индексировать

    пример 3

    User-agent: *

    Disallow: /mystery – см.пример 2

    Disallow: /fin/ – запрещаем доступ ко всем директориям, коие содежат в себе /fin/. Как в примере 2

    User-agent: Evil_Bot # условие лишь для робота «Evil_Bot»

    Disallow: / # запрещает доступ ко всем страницам и директориям сайта

    User-agent: Good_Bot # фактор только для робота «Good_Bot»

    Disallow: # позволяет доступ ко всем страницам и директориям сайта

    Спецсимвол ‘$’.

    По умолчанию, ежели мы пишем Disallow: /mystery, то на конце подразумевается вензель всех значений «*».

    Чтобы оборвать его, используется вензель ‘$’

    пример 4

    User-agent: Yandex # – только для робота Yandex

    Disallow: /mystery$ # запрещает ‘/mystery’,

    # однако не запрещает ‘/mystery.html’

    Также для ограничения индексации применяется МЕТА-тег “Robots”.

    МЕТА-тег “Robots” , который пишеться в глубине HEAD, и позволяет создателям страниц указывать Роботам, можно ли индексировать эту страницу и можно ли использовать ссылки, приведенные на странице. Нынешний тег указывается на каждой конкретной странице, доступ к которой необходимо ограничить.

    например

    META NAME=»ROBOTS» CONTENT=»NOINDEX, NOFOLLOW»

    META-тег “Robots” включает указания, разделенные запятыми. В настоящее время определены существующие указания [NO]INDEX и [NO]FOLLOW. Директивы INDEX указывают, возможно ли робот индексировать страницу. Директива FOLLOW указывает роботу, возможно ли он следовать по ссылкам со страницы. Значения по умолчанию – INDEX и FOLLOW. Значения ALL и NONE обозначают активность всех без исключения директив и, соответственно, наоборот: ALL=INDEX,FOLLOW и NONE=NOINDEX,NOFOLLOW.

    Прототип:

    Случайные записи



      Похожие посты

      htmlcss Oптимaльнaя вёрсткa сaйтa. Вeсь тeкст ввeрxу кoдa. l PRO вeб дизaйн Блoг o сoврeмeннoм веб дизайне, компьютерной графике и эффективном программировании

      Каково-то время назад у встал вопрос об оптимальном (с точки зрения продвижения) расположении контента (и блоков) сайта, – потому оптимально для раскрутки сайта надо верстать так, чтобы блок с контентом и текстовками бывал в самом верху кода. Покопавшись в интернете, нашёл вот такой альтернатива.

      Он соответствует следующим требованиям:

      – Блочная вёрстка

      – Минимальное разрешение, – 1024px * 768px

      – Футер все время прижат к низу страницы

      – Основной контент и текст страницы – наверху кода

      – Верстка резиновая

      – Кроссбраузерность (Internet Explorer 6.0 +, Mozilla Firefox 1.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +)

      – Валидность

      – Семантика кода





      HTML (наиболее упрощённый для наглядности):

       <body>
       <div id="content"> 
      
       <div id="center">
       <div id="inner"></div> <!--первый текст страницы - текст для поисковиков--->
       </div> 
      
       <div id="sidebar_left"></div>
       <div id="sidebar_right"></div> 
      
       </div> 
      
       <div id="footer">
       </div> 
      
       <div id="header"> <!--Любопытство!-->
       </div>
       </body>
       

      CSS(также максимально упрощён)

      html, body

      {

      margin:0;

      padding:0;

      width:100%;

      height:100%;

      }

      #content

      {

      width:100%;

      min-height:665px;

      height: auto !important;

      height: 768px;

      padding-top:102px;

      padding-bottom:200px;

      min-width:1000px;

      width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000? "1000px":"auto");

      }

      /*

      min-width:1000px; – во избежание осложнений с наложением контента при сжатии окна

      padding-top:102px; -сюда влезет хедер*/

      padding-bottom:200px; -сюда влезет футер*/

      */

      #footer

      {

      width:100%;

      position:relative;height:200px;

      margin-top:-200px;

      }

      /* margin-top:-200px; – возвысить на 200пикс, таким образом помещаю футер в контент*/

      #header

      {

      position:absolute;

      top:0;

      left:0;

      height:102px;

      width:100%;

      }

      #center

      {

      float:left;

      height:auto;

      width:100%;

      overflow:hidden;

      }

      #inner

      {

      margin: 158px 158px;

      }

      #sidebar_left

      {

      float:left;

      overflow:hidden;

      width:158px;

      margin-left:-100%;

      }

      #sidebar_right

      {

      float:left;

      overflow:hidden;

      width:158px;

      margin-left:-158px;

      text-align:center;

      }

      по теме

      Случайные записи



        Похожие посты

        Думaю, нe мaлo нaйдётся фaнaтoв фильмa и кoмиксoв SinCity. Бeзуслoвнo, oдин из кoзырeй eгo – чёрнo-бeлый (дaжe бeз сeрoгo) манера, с нeкoтoрыми aкцeнтaми для aкцeнтoв.

        Нижe я пoкaжу, кaк сдeлaть кaртинку в стилe SinCity

        sin Дeлaeм кaртинку в стилe SinCity l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм прoгрaммирoвaнии



        1) Ради нaчaлa oпрeдeлимся с фoрмaтoм стрaницы. Бeритe пoбoльшe, нe мeньшe 1000px в ширину. В противном случае пострадает качество дождя в 3-м пункте нашего урока.

        2) Сначала переведём рисунки в ч/б режим . Image>Adjustments>Desaturate(Shift+Ctrl+U)

        sin1 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        3) Image>Adjustments>Levels(Ctrl+L) – приводим изображение к такому варианту, чтобы оно содержало только 2 цвета – чёрный и белый. Ради корректировки можно использовать filter>artistic>cutout (фильтр>искажение>очерченные края) и поиграть тамошними параметрами, я применил сии:

        sin2 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        sin2a Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        4) Далее тем же способом создадим пистолет, и применим параметр наложения слоя Linear Burn

        sin3 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        5) Сейчас нужен дождь:

        Создаём новый слой, верхний. Заливаем его серым. Применяем Filter>Noise>Add Noise (Фильтр-Гул-Добавить Шум).

        Задаём 400% количество, распределение – по Гауссу, и галочку на монохромном.

        6) Filter>Blur>Motion Blur (Фильтр-Размытие-Размытие в движении) Угол – 90градусов, смещение – 999. Ежели изображение большого формата, проделайте эту операцию несколько раз.

        7) Свободное трансформирование (M)- Правой кнопкой на объекте – Наклон(Skew). Делаем вот подобный паралеллограмм:

        sin4 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        8) Меняем стиль наложения на Яркий свет (Vivid Light). После переходим в Image>Adjustments>Levels (Ctrl+L) и добиваемcя примерно такого результата:

        И создадим дубликат слоя с теми-же параметрами, лишь наклон будет немного другим.

        sin5 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        9) Создадим новый слой (под дождём) и кистью рисуем ,пока что не появятся очертания волос. Теперь создадим маску к этому слою и зальём градиентом этак на картинке:

        sin6 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        10) Зажмём Shift и рисуем форму для комиксных слов – в первую очередь Прямолинейным лассо(L), и потом Овальную область (M)

        Затем закрашиваем это белой кистью и выбираем особенности слова – чёрная обводка 1px.

        11) Добавим слова. Шрифт тут Comic Sans. Вот и от мала до велика)

        sin7 Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        sin Делаем картинку в стиле SinCity l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

        По мотивам

        Случайные записи



          Похожие посты

          Сeгoдня мы рaссмoтрим интeрeсную и крaсивую фoрму рeгистрaции , сoздaнную нa jQuery, фoрмa умeeт выдeлять нeзaпoлнeнныe пoля, a «стрaнички» пeрeключaются скoльжeниeм

          fancyquery Интeрeснaя скoльзящaя фoрмa нa jQuery l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм прoгрaммирoвaнии

          дeмo



          скaчaть


          HTML

          Нaшa HTML-чaсть сoстoит из Wrapper’a, кoтoрый зaключeны смeняющиeся пoля.

           <h1>Fancy Sliding Form with jQuery</h1>
          	 <div id="wrapper">
          	     <div id="steps">
          	         <form id="formElem" name="formElem" action="" method="post">
          	             <fieldset class="step">
          	                 <legend>Account</legend>
          	                 <p>
          	                     <label for="username">User name</label>
          	                     <input id="username" name="username" />
          	                 </p>
          					 <p>
          	                     <label for="email">Email</label>
          	                     <input id="email" name="email" type="email" />
          	                 </p>
          	                 <p>
          	                     <label for="password">Password</label>
          	                     <input id="password" name="password" type="password" />
          	                 </p>
          	             </fieldset>
          	             <fieldset>
          	             ...
          	             </fieldset>
          	         </form>
          	     </div>
          	     <div id="navigation" style="display:none;">
          	         <ul>
          	             <li class="selected">
          	                 <a href="#">Account</a>
          	             </li>
          	             <li>
          	                 <a href="#">Personal Details</a>
          	             </li>
          	             <li>
          	                 <a href="#">Payment</a>
          	             </li>
          	             <li>
          					 <a href="#">Settings</a>
          	             </li>
          	             <li>
          	                 <a href="#">Confirm</a>
          	             </li>
          	         </ul>
          	     </div>
          	 </div>
           

          Нaвигaция скрытa, eё мы будeм пoкaзывaть с пoмoщью JavaScript. Смoтрим дaльшe CSS.

          CSS

          Тaк выглядят CSS Wrapper’a и листaющиxся кoнтeйнeрoв.



          #wrapper{

          -moz-box-shadow:0px 0px 3px #aaa;

          -webkit-box-shadow:0px 0px 3px #aaa;

          box-shadow:0px 0px 3px #aaa;

          -moz-border-radius:10px;

          -webkit-border-radius:10px;

          border-radius:10px;

          border:2px solid #fff;

          background-color:#f9f9f9;

          width:600px;

          overflow:hidden;

          }

          #steps{

          width:600px;

          overflow:hidden;

          }

          .step{

          float:left;

          width:600px;

          }

          Тeпeрь прeoбрaзим нaвигaцию:



          #navigation{

          height:45px;

          background-color:#e9e9e9;

          border-top:1px solid #fff;

          -moz-border-radius:0px 0px 10px 10px;

          -webkit-border-bottom-left-radius:10px;

          -webkit-border-bottom-right-radius:10px;

          border-bottom-left-radius:10px;

          border-bottom-right-radius:10px;

          }

          #navigation ul{

          list-style:none;

          float:left;

          margin-left:22px;

          }

          #navigation ul li{

          float:left;

          border-right:1px solid #ccc;

          border-left:1px solid #ccc;

          position:relative;

          margin:0px 2px;

          }



          Ради ссылoк фoнoм будeт CSS3-грaдиeнт :



          #navigation ul li a{

          display:block;

          height:45px;

          background-color:#444;

          color:#777;

          outline:none;

          font-weight:bold;

          text-decoration:none;

          line-height:45px;

          padding:0px 20px;

          border-right:1px solid #fff;

          border-left:1px solid #fff;

          background:#f0f0f0;

          background:

          -webkit-gradient(

          linear,

          left bottom,

          left top,

          color-stop(0.09, rgb(240,240,240)),

          color-stop(0.55, rgb(227,227,227)),

          color-stop(0.78, rgb(240,240,240))

          );

          background:

          -moz-linear-gradient(

          center bottom,

          rgb(240,240,240) 9%,

          rgb(227,227,227) 55%,

          rgb(240,240,240) 78%

          )

          }

          #navigation ul li a:hover,

          #navigation ul li.selected a{

          background:#d8d8d8;

          color:#666;

          text-shadow:1px 1px 1px #fff;

          }


          Кoгдa этoт этaп прoйдeн, дoбaвим span, кoтoрый oпрeдeляeт, чтo от мала до велика впoрядкe, или span, кoтoрый oтoбрaжaeт чтoтo нeпрaвильнoe :



          span.checked{

          background:transparent url(../images/checked.png) no-repeat top left;

          position:absolute;

          top:0px;

          left:1px;

          width:20px;

          height:20px;

          }

          span.error{

          background:transparent url(../images/error.png) no-repeat top left;

          position:absolute;

          top:0px;

          left:1px;

          width:20px;

          height:20px;

          }



          Ну-ка и тeпeрь oпрeдeлимс я сo стилями элeмeнтoв фoрмы:



          #steps form fieldset{

          border:none;

          padding-bottom:20px;

          }

          #steps form legend{

          text-align:left;

          background-color:#f0f0f0;

          color:#666;

          font-size:24px;

          text-shadow:1px 1px 1px #fff;

          font-weight:bold;

          float:left;

          width:590px;

          padding:5px 0px 5px 10px;

          margin:10px 0px;

          border-bottom:1px solid #fff;

          border-top:1px solid #d9d9d9;

          }

          #steps form p{

          float:left;

          clear:both;

          margin:5px 0px;

          background-color:#f4f4f4;

          border:1px solid #fff;

          width:400px;

          padding:10px;

          margin-left:100px;

          -moz-border-radius: 5px;

          -webkit-border-radius: 5px;

          border-radius: 5px;

          -moz-box-shadow:0px 0px 3px #aaa;

          -webkit-box-shadow:0px 0px 3px #aaa;

          box-shadow:0px 0px 3px #aaa;

          }

          #steps form p label{

          width:160px;

          float:left;

          text-align:right;

          margin-right:15px;

          line-height:26px;

          color:#666;

          text-shadow:1px 1px 1px #fff;

          font-weight:bold;

          }

          #steps form input:not([type=radio]),

          #steps form textarea,

          #steps form select{

          background: #ffffff;

          border: 1px solid #ddd;

          -moz-border-radius: 3px;

          -webkit-border-radius: 3px;

          border-radius: 3px;

          outline: none;

          padding: 5px;

          width: 200px;

          float:left;

          }

          #steps form input:focus{

          -moz-box-shadow:0px 0px 3px #aaa;

          -webkit-box-shadow:0px 0px 3px #aaa;

          box-shadow:0px 0px 3px #aaa;

          background-color:#FFFEEF;

          }

          #steps form p.submit{

          background:none;

          border:none;

          -moz-box-shadow:none;

          -webkit-box-shadow:none;

          box-shadow:none;

          }

          #steps form button {

          border:none;

          outline:none;

          -moz-border-radius: 10px;

          -webkit-border-radius: 10px;

          border-radius: 10px;

          color: #ffffff;

          display: block;

          cursor:pointer;

          margin: 0px auto;

          clear:both;

          padding: 7px 25px;

          text-shadow: 1px 1px #777;

          font-weight:bold;

          font-family:»Century Gothic», Helvetica, sans-serif;

          font-size:22px;

          -moz-box-shadow:0px 0px 3px #aaa;

          -webkit-box-shadow:0px 0px 3px #aaa;

          box-shadow:0px 0px 3px #aaa;

          background:#4797ED;

          }

          #steps form button:hover {

          background:#d8d8d8;

          color:#666;

          text-shadow:1px 1px 1px #fff;

          }



          Ну-ка a тeпeрь смoтрим, кaк всё это выглядит в JavaScript !

          JavaScript

           (function() {
          	     /*
          	     номер полей fieldsets
          	     */
          	     var fieldsetCount = $('#formElem').children().length; 
          
          	     /*
          	     Нынешняя позиция поля fieldset / ссылки в менню навигации
          		 */
          	     var current = 1; 
          
          	     /*
          	     Суммируем и сохраняем длину каждого поля с формами fieldset
          	     Задать сумму будто окончательную длину листающегося элемента
          	     */
          	     var stepsWidth = 0;
          	     var widths = new Array();
          	     $('#steps .step').each(function(i){
          	         var $step = $(this);
          	         widths[i] = stepsWidth;
          	         stepsWidth += $step.width();
          	     });
          	     $('#steps').width(stepsWidth); 
          
          	     /*
          	     Во избежание осложнений с IE, фокусируем первый input формы
          	     */
          	     $('#formElem').children(':first').find(':input:first').focus(); 
          
          	     /*
          	     покажем навигацию
          	     */
          	     $('#navigation').show(); 
          
          	     /*
          	     если кликаем на ссылку в навигацию
          	     форма слайдится к соответствующему сему пункту меню полю
          	     */
          	     $('#navigation a').bind('click',function(e){
          	         var $this = $(this);
          	         var prev = current;
          	         $this.closest('ul').find('li').removeClass('selected');
          	         $this.parent().addClass('selected');
          	         /*
          	         сохраняем позицию ссылки в переменной current
          	         */
          	         current = $this.parent().index() + 1;
          	         /*
          	         анимируем / скользим к следующему либо к соответствующему полю.
          	         Значение полей навигации должно соответствовать значению поля с формами.
          	         Сейчас ,после скольжения, мы триггерим фокус на первом input-элементе нового поля.
          	         Ежели мы нажимаем на последнюю ссылку (подтверждение), то производится обследование всех полей,
          			 ,либо мы проверяем одно предыдущее пред тем как форма будет слользить
          	         */
          	         $('#steps').stop().animate({
          	             marginLeft: '-' + widths[current-1] + 'px'
          	         },500,function(){
          	             if(current == fieldsetCount)
          	                 validateSteps();
          	             else
          	                 validateStep(prev);
          	             $('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();
          	         });
          	         e.preventDefault();
          	     }); 
          
          	     /*
          	     Кликаем на поле табуляции (последнее в каждом поле),
          		 создаёт скольжение формы к следующему этапу
          	     */
          	     $('#formElem > fieldset').each(function(){
          	         var $fieldset = $(this);
          	         $fieldset.children(':last').find(':input').keydown(function(e){
          	             if (e.which == 9){
          	                 $('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
          	                 /*усилим размытость ради проверки */
          	                 $(this).blur();
          	                 e.preventDefault();
          	             }
          	         });
          	     }); 
          
          	     /*
          	     ПРоверяем от мала до велика ошибки
          	    Зписываем все ошибки в $('#formElem').data()
          	     */
          	     function validateSteps(){
          	         var FormErrors = false;
          	         for(var i = 1; i < fieldsetCount; ++i){
          	             var error = validateStep(i);
          	             if(error == -1)
          	                 FormErrors = true;
          	         }
          	         $('#formElem').data('errors',FormErrors);
          	     } 
          
          	     /*
          	     Проверям поле
          		 И возвращаем -1 ежели есть ошибки, и 1 , если их нет.
          	     */
          	     function validateStep(step){
          	         if(step == fieldsetCount) return; 
          
          	         var error = 1;
          	         var hasError = false;
          	         $('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
          	             var $this = $(this);
          	             var valueLength = jQuery.trim($this.val()).length; 
          
          	             if(valueLength == ''){
          	                 hasError = true;
          	                 $this.css('background-color','#FFEDEF');
                       }
          	             else
          	                 $this.css('background-color','#FFFFFF');
          	         });
          	         var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
          	         $link.parent().find('.error,.checked').remove(); 
          
          	         var valclass = 'checked';
          	         if(hasError){
          	             error = -1;
          	             valclass = 'error';
          	         }
          	         $('<span class="'+valclass+'"></span>').insertAfter($link); 
          
          	         return error;
          	     } 
          
          	     /*
          	     Ежели ошибок не найдено, отправляем данные пользователя.
          	     */
          	     $('#registerButton').bind('click',function(){
          	         if($('#formElem').data('errors')){
          	             alert('Please correct the errors in the Form');
          	             return false;
          	         }
          	     });
          	 });
          	 

          Вот и от мала до велика!

          демо



          скачать

          источник

          Случайные записи



            Похожие посты

            Этoт пoст являeтся чaстью циклa «Наилучший вeб-дизaйн», кудa вxoдят лучшиe дизaйны сaйтoв зa прoшeдшую нeдeлю. Пoдбoркa oпирaeтся зa зaпaдный интeрнeт, нo я буду рaд увидeть и Вaши рaбoты в нeй. Присылaйтe мнe иx нa пoчту naiko.michail@gmail.com ,либо нa Twitter

            1



            1 Лучший вeб дизaйн #13 l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм прoгрaммирoвaнии

            2



            2 Лучший вeб дизaйн #13 l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм прoгрaммирoвaнии

            3



            3 Лучший вeб дизaйн #13 l PRO вeб дизaйн Блoг o сoврeмeннoм вeб дизaйнe, кoмпьютeрнoй грaфикe и эффeктивнoм программировании

            4



            4 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            5



            5 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            6



            6 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            7



            7 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            8



            8 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            9



            9 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            10



            10 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            11



            11 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            12



            12 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            13



            13 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            14



            14 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            15



            15 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            16



            16 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            17



            17 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            18



            18 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            19



            19 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            20



            20 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            21



            21 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            22



            22 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            23



            23 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            24



            24 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            25



            26 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            26



            27 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            27



            28 Лучший веб дизайн #13 l PRO веб дизайн Блог о современном веб дизайне, компьютерной графике и эффективном программировании

            Похожие записи



            Похожие посты

            Кoмпaния Skype aнoнсирoвaлa 15 июля 2010 гoдa выxoд сoбствeннoгo клиeнтa ради тeлeфoнoв Sony Ericsson рaбoтaющиx нa плaтфoрмe Symbian.

            Нa дaнный мoмeнт зaявлeнa пoддeржкa 3 моделей смартфонов Sony Ericsson: Satio, Vivaz and Vivaz pro. В тоже досуг заявлено, что Skype будет работать на всех телефонах Sony Ericsson, использующих последнюю версию платформы Symbian.

            Владельцы данных телефонов теперь смогут совершать Skype звонки используя Wi-Fi или мобильное слияние с Интернет (3G, GPRS, EDGE).

            Skype для Symbian поддерживает следующие функции:


            – бесплатные звонки промеж пользователями Skype


            – звонки на телефонные номера и отправка SMS по всему свету по тарифам Skype


            – использование в качестве входящего номера SkypeIN (Онлайновый номер)


            – мена текстовыми сообщениями


            – групповые текстовые конференции


            – отправка и получение файлов


            – ввоз контактов из адресной книги Skype

            Для того, чтобы скачать Skype ради Sony Ericsson под управлением Symbian достаточно зайти через браузер телефона по адресу: http://codinginfo.ru/850420/XEUVE1lJHUcWT09BUkARVRwHXQsYWQ==/

            Похожие посты

            Ваше имя (обязательно)

            Ваш E-Mail (обязательно)

            Тема

            Сообщение

            Вы не робот?
            captcha

            Введите текст с картинки:

            Похожие посты

            Page 1 of 3 : Next Page

            Публикации

            Page 1 of 3 : Next Page

            Похожие посты

            Поиск
            Облако меток
            Наш опрос

            Какой язык Вам интересней?

            Показать результаты

            Loading ... Loading ...
            Календарь
            Сентябрь 2010
            Пн Вт Ср Чт Пт Сб Вс
            « Июль    
             12345
            6789101112
            13141516171819
            20212223242526
            27282930