Question

В связи с ситуацией в стране и в мире, решено было прикруть к сайту раздел дистанционное обучение. Сайт сделан на основание стандартного шаблона. и в первом контейнере я решил вставить аккордеон. Аккрдеон получилось вставить, но исходник аккордеона предпологал использование текста в заголовке(при щелчке по которому все разворачиается), а мне нужна картинка и вот эта картинка и вылезла за пределы контейнера

 

Вот так это вписано в контейнере

<ul id="accordion" class="accordion">
 
    <div class="link"><img src="http://schoz.ucoz.org/image/ban/distancionnoe.png" alt="Дистанционное обучение"></div>
 <ul class="submenu">
 <li><a href="https://docs.google.com/spreadsheets/d/16o7He8MG1EdRvIlm95Jkt8w2iw4xUDY7/edit#gid=1840654020" target="_blank">1 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1zWfcBkHgZmDpJmomdB5KeCPy_ZW5srC0/edit#gid=1840654020" target="_blank">2 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/133hEVBX5iF_VjlZG3hH2qdLzFv1ILDC_/edit#gid=1840654020" target="_blank">3 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1l8t2Q20yCf_SVN42PW-VGevJOVqF1jWD/edit#gid=1840654020" target="_blank">4 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1G0iorScbA1K1pO9GmULgYGdtxfHF2ihZ/edit#gid=1840654020" target="_blank">5 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1HHnfHscD8UGksIywPzllPrQWtw2-A9yE/edit#gid=1840654020" target="_blank">6 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1TUjX7wkmF72VI2ZerPwS-u4vsWD9VBKj/edit#gid=1840654020" target="_blank">7 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/158mBZ6_G2oIFCEj_4n6rmATRm0sr6sk2/edit#gid=1840654020" target="_blank">8 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1WVwFfhpBlmErpYWQfF4e-pehsFxdpldT/edit#gid=1840654020" target="_blank">9 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1hfEuYqb_4X_m37RcI06yU4ChN3Lfxirm/edit#gid=1840654020" target="_blank">10 класс</a></li>
 <li><a href="https://docs.google.com/spreadsheets/d/1-IhGViXjq6XjDhUR2mwb8kYoTPxgVe5u/edit#gid=1840654020" target="_blank">11 класс</a></li> 
 </ul>
 
  </ul>

 

Это используемые стили

* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

body {
 background: #2d2c41;
 font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
 list-style-type: none;
}

a {
 color: #b63b4d;
 text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/
h1 {
 color: #FFF;
 font-size: 24px;
 font-weight: 400;
 text-align: center;
 margin-top: 80px;
 }

h1 a {
 color: #c12c42;
 font-size: 16px;
 }

 .accordion {
 width: 100%;
 max-width: 450px;
 margin: 30px auto 20px;
 background: #FFF;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 }

.accordion .link {
 cursor: pointer;
 display: block;
 padding: 15px 15px 15px 42px;
 color: #4D4D4D;
 font-size: 14px;
 font-weight: 700;
 border-bottom: 1px solid #CCC;
 position: relative;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}

.accordion li:last-child .link {
 border-bottom: 0;
}

.accordion li i {
 position: absolute;
 top: 16px;
 left: 12px;
 font-size: 18px;
 color: #595959;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
 right: 12px;
 left: auto;
 font-size: 16px;
}

.accordion li.open .link {
 color: #b63b4d;
}

.accordion li.open i {
 color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/**
 * Submenu
 -----------------------------*/
 .submenu {
 display: none;
 background: #F8F8FF ;
 font-size: 14px;
 }

 .submenu li {
 border-bottom: 1px solid #4b4a5e;
 }

 .submenu a {
 display: block;
 text-decoration: none;
 color: #000000;
 padding: 10px;
 padding-left: 42px;
 -webkit-transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
 transition: all 0.25s ease;
 }

 .submenu a:hover {
 background: #83b4d;
 color: #FFF;
 }

Сосбтвенно вопросов у меня 2. 

1.Как сделать что бы картинка уместилась в контейнер а не была такой сдвинутой

2.Как сделать текст, который вываливается, побольше, что бы он не был столь мелким. ну и точки убрать перед текстом

Answer 1

1. У вас там прописано фото:

<img src="http://schoz.ucoz.org/image/ban/distancionnoe.png" alt="Дистанционное обучение" style="max-width: 100%;">

допишите выделенное красным, это поможет.

2. Чтобы точек не было, в стили пропишите такую строку:

ul.submenu {list-style:none;}

3. Строку 125 удалите:

.submenu a:hover { background: #83b4d; color: #FFF; }

от нее пользы нет, лишь вред.

4. Чтобы увеличить шрифт, ищем стили строка номер 114:

 .submenu a {
 font-size: 20px;
 display: block;
 text-decoration: none;
 color: #000000;
 padding: 10px;
 padding-left: 42px;
 -webkit-transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
 transition: all 0.25s ease;
 }

добавить выделенное, вместо 20 прописать нужный размер текста.

Comments

Отлично. спасибо вам большое.

А как можно переместить картинку влево?

 

 

---

Папшев Михаил,

В стилях строка номер 54:

.accordion .link {
 cursor: pointer;
 display: block;
 padding: 15px 15px 15px 42px;
 color: #4D4D4D;
 font-size: 14px;
 font-weight: 700;
 border-bottom: 1px solid #CCC;
 position: relative;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}

удалите выделенное красным.