PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Выравнивание иконки
Спектра
Отправлено: 12 Ноября, 2018 - 14:40:50
Post Id



Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Нояб. 2018  
Откуда: Пермь,Россия


Помог: 0 раз(а)




Здравствуйте всем) Я новичок еще только,тренеруюсь,так сказать. Встала проблема,решила прикрепить иконку рядом названием раздела,иконка встала,но не так,как хотелось бы,как-то не ровно Однако вопрос: Можно как-то ее выровнить?
Если что вот код:
1.
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div class="content">
  2.     <img src='/img/news.png' alt='*'>
  3.     <a href='<?php// ссылка на другую страницу?>'>Новости</a>
  4. </div>

Если возможно,как воплотить это в стилях css?
2.
CODE (css):
скопировать код в буфер обмена
  1. .header{
  2.    background: #838283;
  3.    height: 160px;
  4.    width: 100%;
  5. }
  6.  
  7. .content {
  8.    background: #d2d0d2;
  9.    width: 100%;
  10.    height: 600px;  
  11. }
  12.  
  13. .footer{
  14.    position: absolute;
  15.    width: 100%;
  16.    height: 80px;
  17.    background: #838283;
  18. }

Прикреплено изображение (Нажмите для увеличения)
Opera Снимок_2018-11-12_171339_fich2.png


Отредактировано модератором: armancho7777777, 13 Ноября, 2018 - 09:49:40
 
 Top
ekzetrik
Отправлено: 12 Ноября, 2018 - 15:05:47
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Нояб. 2018  


Помог: 0 раз(а)




присвоить иконке класс , и поиграться с margin-top пробовали ?
 
 Top
Спектра
Отправлено: 12 Ноября, 2018 - 19:21:07
Post Id



Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Нояб. 2018  
Откуда: Пермь,Россия


Помог: 0 раз(а)




ekzetrik пишет:
присвоить иконке класс
margin-top -это отступ? А как присвоить класс иконке?Попробовала margin-top. В общем,нужно класс создать,действительно,но как создать класс именно для своей иконки,в формате png?

(Отредактировано автором: 12 Ноября, 2018 - 19:36:29)

 
 Top
ekzetrik
Отправлено: 13 Ноября, 2018 - 07:15:08
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Нояб. 2018  


Помог: 0 раз(а)




Спектра пишет:
ekzetrik пишет:
присвоить иконке класс
margin-top -это отступ? А как присвоить класс иконке?Попробовала margin-top. В общем,нужно класс создать,действительно,но как создать класс именно для своей иконки,в формате png?



например <img src="ваш путь до иконки" class="siteIcons"></img>


файл styles.css:


.siteIcons{
margin-top: X px;
}
 
 Top
Vladimir Kheifets
Отправлено: 13 Ноября, 2018 - 08:26:17
Post Id



Посетитель


Покинул форум
Сообщений всего: 292
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 9 раз(а)




ekzetrik пишет:
присвоить иконке класс , и поиграться с margin-top пробовали ?

Добрый день!
Присваивать классы не обязательно (см. соседние селекторы или вложенные селекторы).
http://htmlbook[dot]ru/css/selector
Ещё придумали селекторов nth-child и nth-of-type.

В связи с иконкой, советую обратить внимание на position: relative
http://htmlbook[dot]ru/css/position
Удачи!
 
 Top
Спектра
Отправлено: 13 Ноября, 2018 - 09:11:56
Post Id



Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Нояб. 2018  
Откуда: Пермь,Россия


Помог: 0 раз(а)




[quote=ekzetrik][/quote]не знаю,правильно ли сделала,но у меня ничего не изменилось,по вашему совету.Может просто иконка большая с лишком?Поэтому криво смотрится?
(Добавление)
[quote=Vladimir Kheifets][/quote]попробовала с селекторами поиграться,не вышло.видать не правильно что-то делаю((

CODE (css):
скопировать код в буфер обмена
  1. .header{
  2.    background: #838283;
  3.    height: 160px;
  4.    width: 100%;
  5.    }
  6. .content {
  7.    background: #d2d0d2;
  8.    width: 100%;
  9.    height: 600px;
  10.        
  11. }
  12.  
  13. .footer{
  14.    position: absolute;
  15.    width: 100%;
  16.    height: 80px;
  17.    background: #838283;
  18. }
  19.  .content img{
  20.   position: relative;
  21.  
  22.  }


Отредактировано модератором: armancho7777777, 13 Ноября, 2018 - 09:47:39
 
 Top
armancho7777777 Супермодератор
Отправлено: 13 Ноября, 2018 - 09:46:59
Post Id



Активный участник


Покинул форум
Сообщений всего: 4483
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 215 раз(а)




CODE (css):
скопировать код в буфер обмена
  1. .content img{
  2.    position: relative;
  3.    top: 5px /* <<--- */
  4. }


-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
Спектра
Отправлено: 13 Ноября, 2018 - 11:43:01
Post Id



Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Нояб. 2018  
Откуда: Пермь,Россия


Помог: 0 раз(а)




armancho7777777 пишет:
CODE (css):
скопировать код в буфер обмена
  1. .content img{
  2.    position: relative;
  3.    top: 5px /* <<--- */
  4. }
спасибо,теперь все гуд)оказывается,просто не добавила эту часть:top: 5px /* <<--- */ Правда вот в этой части в файле content.php код вроде ошибку выдает,типа подсветки красным <div class="content"><img src="img/news.png" class=siteIcons></img><a href='<?php// ссылка на другую страницу?>'>Новости</a>
</div>
Подкрасила закрывающий тэг.Или это так и должно быть?

(Отредактировано автором: 13 Ноября, 2018 - 11:44:10)

 
 Top
Vladimir Kheifets
Отправлено: 13 Ноября, 2018 - 11:53:16
Post Id



Посетитель


Покинул форум
Сообщений всего: 292
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 9 раз(а)




Спектра пишет:
armancho7777777 пишет:
CODE (css):
скопировать код в буфер обмена
  1. .content img{
  2.    position: relative;
  3.    top: 5px /* <<--- */
  4. }
спасибо,теперь все гуд)оказывается,просто не добавила эту часть:top: 5px /* <<--- */ Правда вот в этой части в файле content.php код вроде ошибку выдает,типа подсветки красным <div class="content"><img src="img/news.png" class=siteIcons></img><a href='<?php// ссылка на другую страницу?>'>Новости</a>
</div>
Подкрасила закрывающий тэг.Или это так и должно быть?

У Вас в CSS нет siteIcons, поэтому нужно убрать class=siteIcons
и </img> тоже

(Отредактировано автором: 13 Ноября, 2018 - 12:00:16)

 
 Top
Спектра
Отправлено: 13 Ноября, 2018 - 12:16:39
Post Id



Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Нояб. 2018  
Откуда: Пермь,Россия


Помог: 0 раз(а)




Vladimir Kheifets пишет:
Спектра пишет:
armancho7777777 пишет:
CODE (css):
скопировать код в буфер обмена
  1. .content img{
  2.    position: relative;
  3.    top: 5px /* <<--- */
  4. }
спасибо,теперь все гуд)оказывается,просто не добавила эту часть:top: 5px /* <<--- */ Правда вот в этой части в файле content.php код вроде ошибку выдает,типа подсветки красным <div class="content"><img src="img/news.png" class=siteIcons></img><a href='<?php// ссылка на другую страницу?>'>Новости</a>
</div>
Подкрасила закрывающий тэг.Или это так и должно быть?

У Вас в CSS нет siteIcons, поэтому нужно убрать class=siteIcons
и </img> тоже
спасибо,теперь получилось.благодарю за уроки Закатив глазки
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB