Помогите с CSS

12
Jarerd
На сайте с 08.03.2012
Offline
102
1152

в worpress шаблоне, прописан стиль для выведения картинок в сообщении:

}

.entry img {
padding: 3px;
border: 1px solid #cdcccc;
background: #fff;

..благодаря этому картинки в сообщении постятся в рамке, создавая как-бы объемный эффект... Но проблема в том, что если я хочу запостить gif-баннер внутри сообщения, получается картинка внутри огромного белого квадрата:

...png тоже с обрамлением, но поменьше:

...если удалить этот стиль из CSS, все ок, НО тогда и "заглавная" картинка сообщения вылазит без обрамления, и из-за этого теряется весь стиль шаблона, картинки к постам становятся "плоскими", некрасиво кароче....

Так вот, как сделать чтобы стиль применялся только к первой картинке в сообщении???...Может можно картинки/баннеры внутри поста закрыть в какий-то теги чтоб на них этот стиль не распространялся??

Garin33
На сайте с 31.08.2009
Offline
169
#1

Прописывайте для картинок, которым не нужны рамки свой стиль и все дела.

Потому что Drupal - это круто.
wwwwww
На сайте с 29.04.2011
Offline
195
#2

Покажите код страницы.

Видишь? Свободная подпись.
DS
На сайте с 09.01.2011
Offline
21
#3

Добавьте в css:

.entry img.noborder {padding: 0; border: none; background: none;}

И добавляйте к картинкам, которые не нужно обрамлять класс noborder.

ИЛИ

Все картинки, какие хотите оставить без рамки кидаете в блок с классом noborder

<div class="noborder"></div>

только в css сейчас добавляете

.entry .noborder img {padding: 0; border: none; background: none;}

ИЛИ

Пользуемся псевдоклассами, css

.entry img:first-child {padding: 3px;border: 1px solid #cdcccc;background: #fff;}
.entry img {padding: 0; border: none; background: none;}

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

Jarerd
На сайте с 08.03.2012
Offline
102
#4

1.

Прописывайте для картинок, которым не нужны рамки свой стиль и все дела.

это было первое что мне пришло в голову...

Все картинки, какие хотите оставить без рамки кидаете в блок с классом noborder
<div class="noborder"></div>

..именно это я и прописал первым делом, НО не помогло.....я не спец в кодинге, но предполагаю не сработало потому что:

<div class="noborder"><a href="http://www.site.com" target="_blank"><img src="http://site.com/images/button.gif" width="200" height="50" border="0" alt="Download" /></a></div>

...смотрим по порядку:

<div class="noborder"> - применяется стиль без рамки, НО дальше по ссылке идет <img src= и соответственно ОПЯТЬ срабатывает стиль ".entry img" - тот что с рамкой.....ХЗ может чушь написал, но это моя логика почему не работает.....

2.

Пользуемся псевдоклассами, css
.entry img:first-child {padding: 3px;border: 1px solid #cdcccc;background: #fff;}
.entry img {padding: 0; border: none; background: none;}

....попробовал, не помогло:(, почему этот не работает, вообще не понимаю 😕

---------- Добавлено 18.08.2012 в 20:55 ----------

Покажите код страницы.

...скинул в личку...

[Удален]
#5

Можете сделать на jquery.

удаляете этот стиль:

.entry img {

padding: 3px;

border: 1px solid #cdcccc;

background: #fff;

}

В файле index.php между тегами <head> и </head>

вставляете этот код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('.entry img:first').css({'padding':'3px','border':'1px solid #cdcccc','background-color':'#fff'})

});

</script>

Работает,проверено.

Jarerd
На сайте с 08.03.2012
Offline
102
#6
В файле index.php между тегами <head> и </head>
вставляете этот код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.entry img:first').css({'padding':'3px','border':'1px solid #cdcccc','background-color':'#fff'})
});
</script>
Работает,проверено.

....ну почти))):o....на странице с постом все красиво, первая картинка в рамке, остальные без, Но когда выходим в index блога, там на странице 10 сообщений у меня, рамка есть только у самого первого, остальные без..((

Abrupt
На сайте с 13.01.2011
Offline
117
#7
Jarerd:

и соответственно ОПЯТЬ срабатывает стиль ".entry img" - тот что с рамкой...

Не должно срабатывать, пропишите в CSS просто .noborder img без .entry

З.Ы. JQ для таких целей юзать не кошерно.

[Удален]
#8
Jarerd:
....ну почти))):o....на странице с постом все красиво, первая картинка в рамке, остальные без, Но когда выходим в index блога, там на странице 10 сообщений у меня, рамка есть только у самого первого, остальные без..((

Ну посмотрите в какой класс присвоен дивам в которых 10 сообщений и допишите в код.

вместо $('.entry img:first').

как то так $('.entry img:first, .еще_какой_то_класс img').

Jarerd
На сайте с 08.03.2012
Offline
102
#9
Abrupt:
Не должно срабатывать, пропишите в CSS просто .noborder img без .entry

З.Ы. JQ для таких целей юзать не кошерно.

...ну не знаю, в css

.noborder img {

padding: 0;
border: none;
background: none;
}

линк -

<div class="noborder"><a href="http://www.site.com" target="_blank"><img src="http://site.com/images/button.gif" width="200" height="50" border="0" alt="Download" /></a></div>

...Все как вы сказали, не работает.....

Abrupt
На сайте с 13.01.2011
Offline
117
#10
Jarerd:
...ну не знаю, в css

...Все как вы сказали, не работает.....

ХЗ тогда. Только что аналогичный шаблон сверстал, все работает. Оперой инспектором кода тогда надо смотреть, откуда там img стиль наследует или что там у вас где конфликтует.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий