Question

Как в этом месте http://prntscr.com/7mqm26 можно добавить кликабельные иконки,чтоб нажав на нее перекидывала на страницу? Иконки футбольных чемпионатов 5 топовых лиг хочу добавить туда

Answer 1

Здравствуйте! вот вам для облегчения работы код 

В то место где будет блок

<div id="rec_bloc">
        <ul>
          <li><a href="#" alt><img src="img/icon1.png"></a></li>
          <li><a href="#"><img src="img/icon2.png"></a></li>
          <li><a href="#"><img src="img/icon3.png"></a></li>
          <li><a href="#"><img src="img/icon4.png"></a></li>
          <li><a href="#"><img src="img/icon5.png"></a></li>
        </ul>
      </div>

 

 

В таблицу стилей 

#rec_bloc {
  width: 100%;
  height: 60px;
  background: url("../img/bg_rec_bloc.png");
}
#rec_bloc ul {
  list-style: none;
}
#rec_bloc ul li {
  float: left;
  width: 20%;

}
#rec_bloc ul li a{
  display: block;
}
#rec_bloc ul li img{
  margin: 0 40%;
}

Внимание

Теперь вам нужно только изменить ссылки на иконки они выделены крассным

Синем выделена ссылка на фон блока её тоже вам нужно будет заменить на свою

Вид блока 

Comments

Не пойму куда этот код ставить

В то место где будет блок

<div id="rec_bloc">
        <ul>
          <li><a href="#" alt><img src="img/icon1.png"></a></li>
          <li><a href="#"><img src="img/icon2.png"></a></li>
          <li><a href="#"><img src="img/icon3.png"></a></li>
          <li><a href="#"><img src="img/icon4.png"></a></li>
          <li><a href="#"><img src="img/icon5.png"></a></li>
        </ul>
      </div>

---

В какое место вставить подскажите

---

Код выше вставить в верхнюю часть сайта в соответствующее место, где находится верхняя часть сайта, я вам уже ответил в другом вопросе.

Таблица стилей находится по адресу - http://16fifaclub.3dn.ru/panel/?a=tmpl;m=3;t=3 стили ставьте в самый низ.

---

Куда я только не ставил первый код в верх сайта не чего не происходит!

---

Ничего и не будет работать, вы видимо не загрузили данные изображения себе на фтп сайта и ссылки в коде не правильно прописаны и в стилях, везде ошибка 404, вы не проверяли как я вижу, изображения сами не загрузятся и не заработают.

---

Мне дали код без изображений,мне бы его правильно установить, а потом я загружу свои иконки и ссылки переделаю

---

он и так рабочий, но иконки не загружены, вы найдите иконки, загрузите себе на фтп вашего сайта, а после замените в коде на ваши ссылки и в стялих так же иконки не рабочие

---

Это то я заменю, для меня труднее ставитьсам первый код, я не пойму куда именно его ставить

---

так вот он стоял где нужно уже, вы просто когда найдете иконки и загрузите себе на фтп, просто замените иконки и все, а далее уже ссылки пропишите в теге:

<a href="здесь ссылка" >

---

Вот я прописал свои иконки но все равно не пойму куда мне вставить именно этот код

<div id="rec_bloc">
        <ul>
          <li><a href="#" alt><img src="http://16fifaclub.3dn.ru/icons2/2lp1.png"></a></li>
          <li><a href="#"><img src="http://16fifaclub.3dn.ru/icons2/Bundes_Liga_1.png"></a></li>
          <li><a href="#"><img src="http://16fifaclub.3dn.ru/icons2/epl2.png"></a></li>
          <li><a href="#"><img src="http://16fifaclub.3dn.ru/icons2/rbck_9NaG6Ee8yg-q150.png"></a></li>
          <li><a href="#"><img src="http://16fifaclub.3dn.ru/icons2/Serie-A_TIM-2012-.png"></a></li>
        </ul>
      </div>

---

в верхней части замените вместо текущего кода:

<div id="rec_bloc">
 <ul>
 <li><a href="#" alt=""><img src=""></a></li>
 <li><a href="#"><img src=""></a></li>
 <li><a href="#"><img src=""></a></li>
 <li><a href="#"><img src=""></a></li>
 <li><a href="#"><img src=""></a></li>
 </ul>
 </div>

только ссылки вы снова не правильно прописали, все они отдают 404 ошибку

---

Вот так вот?

http://prntscr.com/7n0rmg

А какого размера должны быть иконки?

---

Сылки тут ведь прописываются?

<li><a href="#" alt=""><img src="СЫЛКА"></a></li>

---

Ставлюиконку 128x128 получается http://prntscr.com/7n0tr9

Как мне иконки прописать размером 128x128 Или это не возможно?

---

размер иконок прописан в стилях:

#rec_bloc ul li {
  float: left;
  width: 20%;

}

да, ссылку на изображение писать здесь:

<li><a href="#" alt=""><img src="ССЫЛКА"></a></li>

но писать корректную ссылку, а не придуманную

---

Как ее http://prntscr.com/7n0zhb подогнать повыше?

---

в стилях найдите строку номер 918:

#rec_bloc ul li img{
 margin: 0 10%;
 position: relative;
 top: -60px;
}

поиграйтесь с цифрой выделенной красным, меньше либо больше опустить либо поднять иконку.

---

У меня такого нету там!

---

Это я добавил! Но теперь при добавлении иконок съезжают названия страниц http://prntscr.com/7n1ff3

---

Икогда меняю тут  top: -60px; цифру нечего не меняется. А,нет,меняется,но вотчто у меня http://prntscr.com/7n1i7r сдвинулись названия страниц

---

Иконки то по размеру самое то что нужно, но вот при их добавлении едят названия страниц сайта

---

в таком случае удалите:

position: relative;
 top: -60px;

и ставьте иконки точно по размеру, 48х48 либо 64х64

---

Нарисуйте картинку с видом того что вы хотите сделать и я вам напишу код

и скинте мне в скайпе иконки

скайп tolik-waak

---

Сейчас они у меня распологаются так http://prntscr.com/7n27nd А мне бы хотелось, вот пример http://prntscr.com/7n27ua в таком порядке вверху справа,так как с лева у меня будет логотип,наверно. Как их так расположить подскажите пожалуйста

---

И скажите как мне сделать чтобы при нажатии на первую иконку чемпионат barclays меня перекидывало на форум в чемпионат сюда? http://16fifaclub.3dn.ru/forum/7

---

Можете подсказать куда именно в верхней части сайта надо пихать этот код?

<div id="rec_bloc">
 <ul>
 <li><a href="http://16fifaclub.3dn.ru/forum/7" alt><img src="/img/mg1.png"></a></li>
 <li><a href="http://16fifaclub.3dn.ru/"><img src="/img/mg2.png"></a></li>
 <li><a href="http://16fifaclub.3dn.ru/"><img src="/img/mg3.png"></a></li>
 <div class="clr"></div>
 </ul>
 <ul>
 <li><a href="http://16fifaclub.3dn.ru/"><img src="/img/mg4.png"></a></li>
 <li><a href="http://16fifaclub.3dn.ru/"><img src="/img/mg5.png"></a></li>
 </ul>
 </div>

Answer 2

Можно сделать таблицей можно дивами, без знания основ html и css не сделаете, обратитесь за помощью к фрилансерам сюда http://upartner.pro/ , здесь код с нуля не пишут.