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

Спасибо!!! А не могли бы Вы помочь разместить 6 таких иконок в шапке сайта с правой стороны?

---

Gianluigi Buffon,

я вам подсказал как это делается, что там же их размещать элементарно:

<div id="logoBlock"><a href="http://pes16club.ucoz.net/">
<img src="http://pes16club.ucoz.net/logo/Untitled-1.png">
<img src="ссылка на иконку"></a>
<img src="ссылка на иконку"></a>
<img src="ссылка на иконку"></a>
<img src="ссылка на иконку"></a>
<img src="ссылка на иконку"></a>
<img src="ссылка на иконку"></a>
</div>

в стили:

#logoBlock img:nth-child(1) {} /*стили для первой иконки логотип*/
#logoBlock img:nth-child(2) {position:relative;right:0;} /*стили для 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 иконки*/
#logoBlock img:nth-child(8) {position:relative;right:0;} /*стили для 8 иконки*/

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

---

Спасибо большое! Нет конечно, я сам постораюсь. Еще раз спасибо!

---

#logoBlock img:nth-child(2) {position:relative;right:0;} /*стили для 2 иконки*/

 

Ставлю right: 10; или right: 100; но не чего с места не двигается

---

Gianluigi Buffon,

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

---

Ну я попробовал не получилось вот я и вернул все как есть. Вот сейчас поставлю снова

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

Мне бы их разместить справа вверху и с отступами примерно по 10 пикселей от правого края шапки и от верхнего

---

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 но вот забыл как это делается.