Kredov long

[Решено] Как исправить в CSS и HTML список

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Edmaynert, 17 май 2017.

Статус темы:
Закрыта.
  1. Edmaynert

    Edmaynert

    Регистрация:
    17 май 2017
    Сообщения:
    6
    Симпатии:
    1
    Добрый день, уважаемые форумчане. Я не профи, только учусь. Помогите мне изменить список в css и html. Скачал готовый двухуровневый список из интернета, он мне по виду очень подходит, но мне нужно его изменить: я просто не знаю как.
    Мне нужно: кружки первого и второго уровня менялись в размерах отдельно от шрифта и по цвету раздельно(по уровням) и не нужна нумерация, еще нужно: чтобы свойства этого списка распространялись только для этого списка. А то я подгрузил его себе на сайт, а он мне эти кружки навтыкал везде....

    Вот, что я скачал
    HTML:
    <!DOCTYPE html>
    <html lang="ru">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Стилизуем рецепт драников при помощи content:counter(li)</title>
    <link href='http://fonts.googleapis.com/css?family=Exo+2:400,100&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    </head>
    <body>
    
    <style type="text/css">
    
    /* ---------- style start ----------- */
    
    body{
    font-family: 'Exo 2', sans-serif;
    }
    
    ol {
    counter-reset:myCounter;
    margin-left:0;
    padding-left:5px;
    color: rgb(100,100,100);
    }
    
    li {
    position: relative;
    padding-left: 3em;
    margin: 0.45em 0;
    list-style: none;
    line-height: 1.8em;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }
    
    li:hover {
    color: rgb(0,0,0);
    }
    
    li:before {
    content:counter(myCounter);
    counter-increment:myCounter;
    position:absolute;
    top:0;
    left:0;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    padding:0px;
    color:#fff;
    background:#2980b9;
    font-weight:bold;
    text-align:center;
    border-radius: .9em;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    
    li:hover:before {
    background-color: #2ecc71;
    }
    
    li li:before{
    background-color: #3498db;
    }
    
    li:after {
    position: absolute;
    top: 2.1em;
    left: 0.9em;
    width: 2px;
    height: calc(100% - 2em);
    content: '';
    background-color: rgb(203, 203, 203);
    z-index: 0;
    }
    
    li:hover:after {
    background-color: #2ecc71;
    }
    
    li li {
    font-size: 0.8em;
    }
    
    /* ---------- style end ----------- */
    
    </style>
    
    
    
    
    <h1>Рецепт</h1>
    <ol>
    <li>
    В большой сковороде разогрейте растительное масло.
    </li>
    <li>
    В большой миске смешайте ингридиенты:
    <ol>
    <li>5 тертых картофелин</li>
    <li>2 яйца (взбить)</li>
    <li>1 луковица</li>
    <li>3 ст.л. муки</li>
    <li>соль и перец по вкусу</li>
    </ol>
    </li>
    
    <li>
    Выкладывайте картофельное тесто большой ложкой на сковороду и слегка прижмите оладьи лопаточкой. Жарьте примерно 4 минуты с каждой стороны, пока не подрумянятся.
    </li>
    <li>
    Сразу подавайте на стол
    </li>
    </ol>
    </body>
    </html>
    Спасибо за помощь.
     
    Lasted edited by : 22 май 2017 в 08:34
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    245
    Симпатии:
    87
    Вот, пользуйся
    Рад помочь)))
     
  3. Edmaynert

    Edmaynert

    Регистрация:
    17 май 2017
    Сообщения:
    6
    Симпатии:
    1
    Спасибо, добрый человек. Еще нужно, чтобы задавался размер кругов синих первого уровня, и зеленых второго уровня раздельно(мне нужно уменьшать только зеленые кружки)...., сейчас они масштабируются все вместе.
     
    Lasted edited by : 17 май 2017
  4. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    245
    Симпатии:
    87
    Edmaynert, поправил (в самом низу стили)
     
  5. Edmaynert

    Edmaynert

    Регистрация:
    17 май 2017
    Сообщения:
    6
    Симпатии:
    1
    интернет глючит)))
    Спасибо большое! Все заработало! Прямо гора с плечь......
    --- Добавлено, 17 май 2017 ---
    блин, он вместе с текстом масштабируется)))
    --- Добавлено, 17 май 2017 ---
    мне не нужно текст трогать
     
  6. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    102
    Симпатии:
    24
    Доброго подправил https://jsfiddle.net/Perat/9xz9kket/
    Код:
    .mylist li>li:before {
        background-color: #c2dc27;
        top:0.5em;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        
    }
     
  7. Edmaynert

    Edmaynert

    Регистрация:
    17 май 2017
    Сообщения:
    6
    Симпатии:
    1
    Спасибо! То, что надо!
     
  8. Edmaynert

    Edmaynert

    Регистрация:
    17 май 2017
    Сообщения:
    6
    Симпатии:
    1
    Добрый день.
    Я замучал тебя, наверное.......еще всплыла одна проблема для меня неразрешимая

    вот картинка:
    http://imglink.ru/show-image.php?id=46f89a5244cb1dced5d7545811ca6925

    Спасибо за понимание
     
  9. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    102
    Симпатии:
    24
    Отступ регулируем здесь
    Код:
    .mylist li li {
        padding-left:1.5em;
     
    }
    черточки убираем уменьшая значение
    line-height
    Код:
    .mylist li li {
        padding-left:1.5em;
        line-height: 1.5em;
     
    }
    кориктируем полоски во встроеных списках
    Код:
    .mylist li li:after {
       top: 1.8em;
       left: 0.35em;
    }
    на случай, если текст перелезет на вторую строку
     
    Последнее редактирование: 21 май 2017 в 16:57
  10. Edmaynert

    Edmaynert

    Регистрация:
    17 май 2017
    Сообщения:
    6
    Симпатии:
    1

    Спасибо большое! Вопросов больше нет.
     
    Perat нравится это.
Статус темы:
Закрыта.