Question

Как прописать класс иконки и потом позиционировать ее в ксс

Answer 1

Перейдите в верхнюю часть сайта http://pes16club.ucoz.net/panel/?a=tmpl;m=1;t=AHEADER и найдите подобный код:

<div id="logoBlock"><a href="http://pes16club.ucoz.net/"><img src="http://pes16club.ucoz.net/logo/Untitled-1.png"></a>

<h1><!-- <logo> --><!-- <img src=""></logo> --></h1>
<img src="http://pes16club.ucoz.net/icons/Premier_League_Logo1.png">
</div>

замените на:

<div id="logoBlock"><a href="http://pes16club.ucoz.net/">
<img src="http://pes16club.ucoz.net/logo/Untitled-1.png">
<img src="http://pes16club.ucoz.net/icons/Premier_League_Logo1.png"></a>
</div>

после в стилях вы сможете управлять первой и второй иконкой с помощью стилей:

#logoBlock img:nth-child(1) {} /*стили для первой иконки*/
#logoBlock img:nth-child(2) {margin: 0;position:relative;left:100px;} /*стили для второй иконки*/

ссылки вам выше уже подсказали что почитать, еще не мешало бы:

• http://htmlbook.ru/css/left
• http://htmlbook.ru/css/right

вот вам и готовые стили и возможность далее работать и настраивать под себя.

Comments

Gianluigi Buffon,

вам вроде и пример наводишь, а вы все по своему делаете, ладно, обращайтесь к фрилансерам  - https://upartner.pro/ извините, но нет настроения все за вас делать, так как вы даже не можете сделать так как говорят и все по своему пишите

---

А что не так то? Вот смотрите задал там 700px а иконка и с места не сдвигается!

<div id="logoBlock"><a href="http://pes16club.ucoz.net/">
<img src="http://pes16club.ucoz.net/logo/Untitled-1.png">
 
<a href="http://pes16club.ucoz.net/forum/8"><img src="http://pes16club.ucoz.net/icons/Premier_League_Logo1.png"></a>
<a href="http://pes16club.ucoz.net/forum/9"><img src="http://pes16club.ucoz.net/icons/Liga_bbva32.png"></a>
<a href="http://pes16club.ucoz.net/forum/10"><img src="http://pes16club.ucoz.net/icons/Serie-A-logo.png"></a>
<a href="http://pes16club.ucoz.net/forum/11"><img src="http://pes16club.ucoz.net/icons/Ligue1212.png"></a>
<a href="http://pes16club.ucoz.net/forum/13"><img src="http://pes16club.ucoz.net/icons/champions-league.png"></a>
<a href="http://pes16club.ucoz.net/forum/14"><img src="http://pes16club.ucoz.net/icons/20.png"></a>
</div>

 

#logoBlock img:nth-child(1) {} /*стили для первой иконки логотип*/
#logoBlock img:nth-child(2) {position:relative;right: 700;} /*стили для 2 иконки*/
#logoBlock img:nth-child(3) {position:relative;right: 0;} /*стили для 3 иконки*/
#logoBlock img:nth-child(4) {position:relative;right: 0;} /*стили для 4 иконки*/
#logoBlock img:nth-child(5) {position:relative;right: 0;} /*стили для 5 иконки*/
#logoBlock img:nth-child(6) {position:relative;right: 0;} /*стили для 6 иконки*/
#logoBlock img:nth-child(7) {position:relative;right: 0;} /*стили для 7 иконки*/

---

Gianluigi Buffon,

Замените стили выше на:

#logoBlock a:nth-child(1) {} /*стили для первой иконки логотип*/
#logoBlock a:nth-child(2) {position:relative;left: 690px;} /*стили для 2 иконки*/
#logoBlock a:nth-child(3) {position:relative;left: 700px;} /*стили для 3 иконки*/
#logoBlock a:nth-child(4) {position:relative;left: 710px;} /*стили для 4 иконки*/
#logoBlock a:nth-child(5) {position:relative;left: 720px;} /*стили для 5 иконки*/
#logoBlock a:nth-child(6) {position:relative;left: 730px;} /*стили для 6 иконки*/
#logoBlock a:nth-child(7) {position:relative;left: 740px;} /*стили для 7 иконки*/

вот так будет более правильно.

---

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

---

Вроде остольное получилось у меня. Спасибо Вам!

Answer 2

Чтоб не плодить вопросы, почитайте.... и вообще пройдитесь по сайту.
http://htmlbook.ru/css/cat/position
http://htmlbook.ru/html/attr/class

Comments

Я думал этот сайт в помощь новичкам. Я прочитал книгу всю Head First html css но вот забыл как это делается.