Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Как опустить картинку на уровень текста
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Как опустить картинку на уровень текста

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

1. grafillo - 27 Ноября, 2013 - 12:38:42 - перейти к сообщению
Добрый день, есть потребность выровнять картинку на уровень текста, картинка поднята выше примерно на одну строку http://krym4anka[dot]com/novosti , изменение маржина в стиле не помагают((

CODE (html):
скопировать код в буфер обмена
  1. <img class="newsimg" src="http://krym4anka.com/wp-content/uploads/novosti/cenioae.jpg" alt="" width="150" />
  2. <h5><a href="http://krym4anka.com/obvalil-ceny-na-tury-v-oae" target="_blank">
  3. Обвал цены на туры в ОАЭ
  4. </a></h5>
  5. <font size="1">26.11.2013</font>
  6. <p style="text-align: justify;">Конкуренция авиаперевозчиков на направлении ОАЭ заставляет туроператоров снижать цены на туры в эту страну на 25-30%. «По этим направлениям операторы работают на грани рентабельности, и горящие предложения можно найти по всем...</p>


CODE (html):
скопировать код в буфер обмена
  1.  
  2. </style>
  3. .newsimg {
  4.     float:left;
  5.     margin: 0px 7px 7px 0;
  6.  
  7. <style>
  8.  
  9.  
2. Deonis - 27 Ноября, 2013 - 13:10:08 - перейти к сообщению
У вас стили перекрываются . Для того, чтоб для этого класса изменить margin, добавьте параметр !important или измените приоритетность:
CODE (css):
скопировать код в буфер обмена
  1. .art-article .leftimg {
  2.    // особый стиль
  3. }
3. grafillo - 27 Ноября, 2013 - 13:21:59 - перейти к сообщению
как это перекрываются, почему перекрываются?
4. Deonis - 27 Ноября, 2013 - 13:31:56 - перейти к сообщению
Вот часть вашего реального css-кода:
CODE (css):
скопировать код в буфер обмена
  1.  
  2. .art-article img, img.art-article, .art-block img, .art-footer img {
  3.     border: 1px solid rgb(206, 138, 44);
  4.     margin: 10px;
  5. }
  6. .leftimg {
  7.     float: left;
  8.     margin: 0px 7px 7px 0px;
  9. }
Так вот margin 10px перекрывает margin: 0px 7px 7px 0px;. В FireFox правой клавишей на ваше изображение > "Исследовать элемент", в Chrome - "Просмотр кода элемента". В обоих случаях, вы увидите (по умолчанию справа) окно со стилями, относящемуся к данному элементу.

P.S. Кстати, в осле, даже 10-ой версии, у вас совсем беда с разметкой...
5. IllusionMH - 27 Ноября, 2013 - 13:47:22 - перейти к сообщению
grafillo, вы блин вообще видите разницу между тем что написали и тем что на странице?
Изображение завернуто в абзац, а в ссылках в заголовке куча br
6. grafillo - 27 Ноября, 2013 - 14:02:27 - перейти к сообщению
пипец точно проблемы с эксплорером((
а что же делать?
7. IllusionMH - 27 Ноября, 2013 - 14:10:45 - перейти к сообщению
grafillo, вы вообще живые сайты видели где список новостей был?
Каждая новость в отдельном блоке должна быть, IE тут вообще не при делах с такой версткой

*лицовруках*
8. grafillo - 27 Ноября, 2013 - 14:28:09 - перейти к сообщению
как я могу это сделать это вордпресс настроен до меня((
лучше подскажите как сделать так чтобы мои классы перекрывали все остальные
9. Deonis - 27 Ноября, 2013 - 14:34:30 - перейти к сообщению
grafillo пишет:
лучше подскажите как сделать так чтобы мои классы перекрывали все остальные
Я ж вам писал, что надо изменить приоритетность. В большинстве случаев поможет добавление параметра !important, но варинты не исключены, т.к. тот, кто делал что-то до вас, тоже мог понапихать этот параметр куда надо и не надо. Поэтому разбирайте каждый случай отдельно.
10. IllusionMH - 27 Ноября, 2013 - 15:03:19 - перейти к сообщению
grafillo, изменить шаблон.
Изучайте что такое специфичность селекторов.
!important пихать не стоит. Только в случае крайнего отчаяния и невозможности редактирования стилей, где уже впихнули !important
11. grafillo - 27 Ноября, 2013 - 15:09:34 - перейти к сообщению
можно на примере показать как впихнуть импотант, и почему его не стоит впихивать объяснить?
12. Deonis - 27 Ноября, 2013 - 15:29:33 - перейти к сообщению
grafillo пишет:
можно на примере показать
Мде... Ну, возьмем такой код:
CODE (html):
скопировать код в буфер обмена
  1. <div id="parent">
  2.     <span>Simple SPAN</span>
  3.     <span class="child">SPAN with Class</span>
  4. </div>
  5.  
К нему кто-то раньше добавил стили:
CODE (css):
скопировать код в буфер обмена
  1. #parent span {
  2.     color: #F00;
  3. }
  4.  

Вы решили изменить цвет у класса "child":
CODE (css):
скопировать код в буфер обмена
  1. #parent span {
  2.     color: #F00;
  3. }
  4. .child {
  5.     color: #060;
  6. }
  7.  

Работать не будет, т.к. id подавляет class.:
CODE (css):
скопировать код в буфер обмена
  1. #parent span {
  2.     color: #F00;
  3. }
  4. #parent .child {
  5.     color: #060;
  6. }
Работает.
В общем, приоритеты идут в следующем порядке (от большего к меньшему):
стиль прописанный в тэге элемента > селектор id > селектор class > селектор элемент (тэг элемента)
13. IllusionMH - 27 Ноября, 2013 - 15:35:14 - перейти к сообщению
grafillo, вдумчиво почитайте про специфичность. Там должно быть про !important

 

Powered by ExBB FM 1.0 RC1