Ответы пользователя по тегу HTML
  • Как правильно позиционировать внутренний элемент в респонсивной верстке?

    @oiu Автор вопроса
    верстальщик интересуюсь програмированием
    1)Главная задача это поместить несколько блоков с текстом над блоком который будет фоновой картинкой родителем.
    2)Можно давать позиционирование классу ( .Simple_PSD_Template ) который идет после(header).
    3)Можно и правильно ли будет позиционировать класс (.q1) (.q2) внутри (header).
    Ответ написан
    Комментировать
  • Какая должна быть вложенность чтобы сделать такое меню?

    @oiu
    верстальщик интересуюсь програмированием
    на его сайте вероятно можна скачать https://www.youtube.com/watch?v=7H7FE71xS9w
    Ответ написан
    Комментировать
  • Brackets Live Preview не реагирует на нажатие. Вечное "Подключение...", почему?

    @oiu
    верстальщик интересуюсь програмированием
    livereload.com
    Прога не подводит никогда!
    брекет хороший редактор я его использую для того чтобы вытянуть картинки CSS из PSD но как показывает практика пользовался три дня и могу отметить он медленнее чем саблайм вим нотпед++ да еще и глючный-- это я проверял в течении нескольких часов.
    Ответ написан
  • Плавное появление/скрытие картинок?

    @oiu
    верстальщик интересуюсь програмированием
    Вероятно могу дать подсказку -что просто реализуеться на джей квери или джава скрипт)
    Ответ написан
    Комментировать
  • Какие слайдеры использовать для этих решений?

    @oiu
    верстальщик интересуюсь програмированием
    возможно етот можно отредактировать?
    helix.su/tags/jquery+slider/page/7
    Ответ написан
    Комментировать
  • Удаление тегов при переходе по ссылке?

    @oiu
    верстальщик интересуюсь програмированием
    Точнее сформулируйте -- переходить на другой но вырезать пару тегов?
    Ответ написан
  • Как увеличить растояние подчеркивания у ссылок, которые состоят из нескольких строк?

    @oiu
    верстальщик интересуюсь програмированием
    Не подходит ?
    1)text-decoration: none; /* Убираем подчеркивание у ссылок */
    2)border-bottom ? /* Создаем подчеркивание у ссылок но теперь можно регулировать растяние с помощью высоты блока*/ если указан псевдоклас (hover: )конечно.
    Ответ написан
    2 комментария
  • Как добавить иконку(font-awesome) в меню чтобы она перемещалась вместе с текстом?

    @oiu
    верстальщик интересуюсь програмированием
    А я так старался)
    1 вопрос: А иконки шрифта font-family: 'Socialico'; -подходят?
    2 вопрос: (nav.ph-lift1 > ul > li ) допустимо свойство display: inline-block; ?
    Честно говоря не знал о свойстве content: attr(data-title);! Но меня удивляет почему нет display: inline-block; ? мой знакомый говорил что его надо использовать везде -это эстетичнее или я ошибаюсь?
    попробуй это может поможет:
    нужно в проекте добавить паку fonts
    <!DOCTYPE html>
    <html>
      <head>
        <title>Layout Sheet</title>
            <link rel="stylesheet" href="main.css">
            <!-- <meta http-equiv="refresh" content="1; URL=http://zxc-1projekt-work-flru.e/" /> -->
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            
      </head>
      <body>
            <nav class="ph-lift1">
    
                <ul>
                   
                     <li class="active"><a href="#home" data-title="Головна"><div data-title="Головна"><i class="fa fa-home"></i>
                        <div class="new1">
                            <p>E</p>
                        </div>
                            Головна</div></a></li>
                            <li class="active"><a href="#pronas" data-title="Про нас"><div data-title="Про нас">
                        <div class="new1">
                            <p>G</p>
                        </div>
                            Про нас</div></a> </li>
                            <li class="active"><a href="#Novini" data-title="Новини"><div data-title="Новини">
                        <div class="new1">
                            <p>K</p>
                        </div>
                            Новини</div></a> </li>
                            <li class="active"><a href="#galerea" data-title="Документи"><div data-title="Документи">
                        <div class="new1">
                            <p>L</p>
                        </div>
                            Документи</div></a> </li>
                            <li class="active"><a href="#Document" data-title="Галерея"><div data-title="Галерея">
                        <div class="new1">
                            <p>X</p>
                        </div>        
                            Галерея</div></a></li>
                            <li class="active"><a href="#Ozdorov" data-title="Оздоровлення"><div data-title="Оздоровлення">
                        <div class="new1">
                            <p>R</p>
                        </div>
                            Оздоровлення</div></a> </li>
                            <li class="active"><a href="#Pravo" data-title="Правовий захист"><div data-title="Правовий захист">
                        <div class="new1">
                            <p>F</p>
                        </div>
                            Правовий захист</div></a> </li>
                    <li class="active"><a href="#Contact" data-title="Контакти"><span data-title="Контакти">
                        <div class="new1">
                            <p>Y</p>
                        </div>
                        Контакти</span></a> </li>
                <ul>
            </nav>
      </body>
    </html>


    /*new-css*/
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      font-size: 100%;
      vertical-align: baseline; }
    
    
    ol, ul {
      list-style: none; }
    
    
    
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
      display: block; }
    
    
    
    body {
      color: #3e3831;
      background: #f2f2f2 url("bg.jpg") repeat;
      font-family: AgoraSansProRegular;
      line-height: 1.5em;
    }
    nav {
      min-width: 800px;}
    nav ul {
      position: relative; }
    nav > ul:after {
      content: "";
      position: absolute;
      width: 50%;
      border-radius: 40%;
      height: 40px;
      bottom: 0;
      left: 20%;
      box-shadow: 0 0 10px rgba(28, 110, 126, 0.5);
      z-index: -1; }
    nav > ul:hover:after {
      bottom: 5px; }
    nav.ph-lift {
      text-align: center; }
      nav.ph-lift > ul {
        display: inline-block;
        position: relative; }
        nav.ph-lift > ul:after {
          box-shadow: 0 0 10px rgba(0, 128, 128, 0.5); }
      nav.ph-lift ul li {
        /*float: left;*/
              display: inline-block;
        height: 90px;
        line-height: 90px;
        background: white;
        overflow: hidden;
        -webkit-transition: all.6s ease;
        -moz-transition: all.6s ease;
        -o-transition: all.6s ease;
        -ms-transition: all.6s ease;
        transition: all.6s ease;}
        nav.ph-lift ul li:hover {
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
          background: teal; }
      nav.ph-lift ul li a {
          display: block;
          text-decoration: none;
          color: #007e7e;
          padding: 0 45px;
          margin-top: 0;
          -webkit-transition: all.6s ease;
          -moz-transition: all.6s ease;
          -o-transition: all.6s ease;
          -ms-transition: all.6s ease;
          transition: all.6s ease; }
        nav.ph-lift ul li:hover a {
          margin-top: -90px;
          color: white;
          text-shadow: 0 1px 2px  black; }
          nav.ph-lift ul li a:after {
            content: attr(data-title);
            display: block; }
    nav.ph-lift1 {
      text-align: center; }
      nav.ph-lift1 ul {
        display: inline-block; }
        nav.ph-lift1 ul:after {
          box-shadow: 0 0 10px rgba(85, 107, 47, 0.5); }
      nav.ph-lift1 > ul > li {
        /*float: left; */
            display: inline-block;
      }
      nav.ph-lift1 ul li {
        height: 80px;
        line-height: 80px;
        background: white;
        -webkit-transition: all.6s ease;
        -moz-transition: all.6s ease;
        -o-transition: all.6s ease;
        -ms-transition: all.6s ease;
        transition: all.6s ease;}  
        nav.ph-lift1 ul li ul {
          max-height: 0;
          -webkit-transition: all.6s ease;
          -moz-transition: all.6s ease;
          overflow: hidden;
          display: block; }
        nav.ph-lift1 ul li:hover {
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
          background: darkolivegreen; }
        nav.ph-lift1 ul li:hover ul {
          max-height: 300px; }
      nav.ph-lift1 ul li a {
          display: block;
          overflow: hidden;
          text-decoration: none;
          color: #546a2f;
          height: 80px; }
        nav.ph-lift1 ul li ul li a {
          color: #7e7e00; }
        nav.ph-lift1 ul li ul li:hover {
          background: olive; }
      nav.ph-lift1 ul li a div {
            -webkit-transition: all.6s ease;
            -moz-transition: all.6s ease;
            -o-transition: all.6s ease;
            -ms-transition: all.6s ease;
            transition: all.6s ease;
            display: block;
            padding: 0 40px; }
        nav.ph-lift1 ul li:hover > a div {
          margin-top: -80px;
          color: white;
          text-shadow: 0 1px 2px  black; }
        
          nav.ph-lift1 ul li a div:after {
            content: attr(data-title);
            display: block; }
    
    /**/
    /**/
    /*ph13_1518_ Oleg*/
    @font-face {
            font-family: 'Socialico';
            src: url('fonts/Socialico.ttf') format('truetype') ;
            src: url('fonts/Socialico.ttf') format('truetype') ;
            src: url('fonts/Socialico-webfont.ttf') format('truetype') ;
            src: url('fonts/Socialico.ttf') format('truetype') ;
            src: url('fonts/Socialico.ttf') ;
            src: url("fonts/Socialico.eot");
            src: url("fonts/Socialico.eot?#iefix") format("embedded-opentype"),
                 url("fonts/Socialico.woff") format("woff"),
                 url("fonts/Socialico.ttf") format("truetype"),
                 url("fonts/Socialico.svg#JournalRegular") format("svg");
        }
    
        .new1{
            border: 1px solid #4d4d4d;
            color: #4d4d4d;
            /*padding: 2.25% 0% 2.1% 2.72%;*/
            font-size: 1.91em;
            /*width: 3%;*/
            /*width: 7%;*/
            /*width: 15%;*/
            /*width: 20%;*/
            font-family: 'Socialico';
            float: left;
        }
    /*ph13_1518_ Oleg*/
    /**/
    /**/
    Ответ написан
    Комментировать