Вид материала [Настройка] - Вид материала [Настройка]

Страница 1 из 2
1
2
»

trem2000 12-02-2018 в 19:53 1

В общем снова решил вернуться в мир html и css, и попробовать создать, что-то своё. И при создании возник вопрос, а именно как убрать оставшиеся промежуток между изображением и информацией в нижней части материала?

HTML

Код

<div class = "vid_new">
<div class = "img_new"><a href ="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"></a></div>
<div class = "info_new"><span><i class="fa fa-eye"></i> $READS$</span><span><i class="fa fa-comment-o"></i> $COMMENTS_NUM$</span></div>
<div class = "game_logo"><span class = "logo"><img src="$OTHER1$" alt="$OTHER2$"></span></div>
</div>

CSS

Код

.vid_new{
margin: 20px;
}
.img_new img{
width: 100%;
height: 250px;
object-fit: cover;
}
.title_new{
height: 40px;
background: #0a151b;
padding-left:6px;
}
.info_new{
height: 40px;
background: #0a151b;
}
.info_new span{
margin-left: 1em;
font-size: 18pt;
}
.game_logo img{
float: right;
width: 400px;
height: 35px;

margin-top: -5%;
}

Я красной линией отметил где остаётся маленький промежуток между изображением и информацией в нижней частим материала. Надеюсь, что всё понятно для вас.

Сайт: ucozfun.usite.pro

прикрепленный файл
5760649.png (431.2 Kb)

Ответить

waak 13-02-2018 в 03:09 2

Здравствуйте вот так

Код

.img_new {
width: 100%;
height: 250px;
}

Ответить

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372 Вебмани R234675901433 Киви 79094024545

Создание сайтов в системе uCoz. Изменение и доработка уже готовых сайтов. Установка шаблонов. Настройка сайтов.

trem2000 13-02-2018 в 11:44 3

waak, а чем это отличается от пропитанного стиля с приставкой img? Просто когда я прописал размер изображения, и чтобы стиль использовался для изображения, я рядом с классом прописал img.

Ответить

trem2000 13-02-2018 в 20:58 4

Приветствую, спасибо за помощь в предыдущем моём вопросе, всё было решено. Но сейчас возник ещё вопрос, прописал данный css код, взятый из вида материала в три колонки, и изменил его на две колонки. Как можно убрать оставшиеся большой промежуток в с права?

Код

width: 40%;
  float: left;
  margin: 10px 2%;

Ещё заметил, что если хочется сделать материал в колонки, то обязательно нужно прописать float. Просто к примеру в виде материала, который используется у меня на основном сайте, а точнее в фотоальбоме, то в стилях float не прописан. Значит float изначально не обязателен?

прикрепленный файл
3743827.png (389.7 Kb)

Ответить

waak 13-02-2018 в 20:59 5

Первое это тем что класс принадлежит блоку а картинка это другой элемент

Ответить

trem2000 13-02-2018 в 21:34 6

waak, Спасибо за ответ, а со вторым вопросом можно помочь?

Ответить

waak 14-02-2018 в 00:39 7

первое! если процент ширины 40% аотступ равен 2% по бокам то будет отступ большой с одной стороны по этому лучше сделать так

Код

width: 46%;
  float: left;
  margin: 10px 2%;

или так

Код

width: 40%;
  float: left;
  margin: 10px 5%;

тогда отступы будут одинаковые

теперь по поводу float он нужен если элемент блочный или в css у него указано

Код

display: block;

Ответить

trem2000 14-02-2018 в 12:02 8

waak, Спасибо огромное за разъяснение, теперь буду знать.

Ответить

trem2000 14-02-2018 в 12:24 9

Надеюсь я со своими вопросами Вам не надоел? Возникла ещё одна трудность, связанная с информацией о том сколько просмотров материала, и сколько комментариев. Решил их расположить по разным сторонам, а именно с права и с лева. Прописал всё что надо. Теперь при подъёме данную инфу выше, заметил, что если их выше поднять, то они скрываются под изображением картинки. Как с этим справится?

И ещё один вопрос, касающихся стилей, которые я прописываю, а именно margin-top: - 5%. Это нормально прописывать в стилях, или лучше использовать другие стили? Если да, то посоветуйте пожалуйста какие стили наилучшем образом могут заменить, то что я ранее написал.

прикрепленный файл
6063025.png (322.8 Kb)

Ответить

waak 14-02-2018 в 22:10 10

Отрицательный отступ в верх лучше в px указывать так как размеры у экранов по высоте очень сильно отличаются и будут проблемы такие как где то иконки будут на картинке чуть чуть а где то почти все

а по поводу того что они прячутся под картинку тут всё просто добавьте им position: relative;

Ответить

Вид материала [Настройка]

Страница 1 из 2
1
2
»