вопрос к залу по CSS
привет всем , есть вопрос , не могу понять, почему когда в цсс я цепляю картинку в диве как бакгрвунд
то размер картинки не совпадает с размером этого дива ?
размер картинки сейчас у меня 8 на 60 пх а вот что стоит в цсс
.blok1
{
margin:10px auto;
padding:10px;
background-image: url(../images/fon14.jpg);
border:solid 2px #666;
font-family:arial;
font-size:14px;
width: 80%;
height: 45px;
line-height: 45px;
если я делаю картинку на 45 пх то она не закрывает все поле дива , почему ?
Прикреплённые файлы
Прикреплённые файлы
так суть не в том, чтобы полоса исчезла , я не понимаю как получается так, что ширина дива 45 , а ширина картинки 60,
если я делаю ее меньше то она не закрывает всю щирину ,
а цель именно такая чтобы все закрывало, что в принципе сейчас и есть ,
только почему так получается ??
картинка верхняя правильная , то что и хотелось достичь
я просто не понимаю принцип , как это так получается ?
я просто не понимаю принцип , как это так получается ?
Отсчёт происходит от края padding(а)
Die Längenangaben werden vom Rand des padding-Bereichs gemessen,
sodass eine Veränderung des Innenabstands die Position der Hintergrundgrafik nicht verschiebt:
Вот здесь картинка есть: http://www.css4you.de/background-position.html
Значит я вопрос не понял, кстати и сейчас не очень.
Я думал, что внизу плоса белая смушает - это бывает и сильно заметно на больших изображениях.
Совсем недавно возился убирая полосу внизу, ну выкрутился, может кому-то интересно будет:
#logo
{
width:100%;
padding-bottom: 27.8%;
height:0;
float:left;
overflow:hidden;
}
<div id = "logo">
<IMG src = "img/dfdfe.jpg"/>
</div>
есть другой вопрос , хочу сделать в футере полосу скажем в 20 пх и в ней чтобы было 5 полей по 20% каждый и разных цветов ,
вопрос как ее реализовать чтобы была адаптивная ,??
сделать див , в него вложить спанами 5 полей ?
или как ? у кого какие будут советы ?
да по цвету у меня нет проблем могу и через #FFFFFF могу через RGB дефинировать,
суть вопроса была в том , как это лучше сделать в хтмл ? через
UL потом 5 LI , а потом каждому Ли дать класс например `Id color RED ?
или есть что то лучше ?
получится должно что то типа такого
Прикреплённые файлы
Задаёшь стилями в head - <style...> ... </style> нужные настройки для тега li как "display: inline; width: xxx; ...", а дальше, что бы на мобильниках всё в столбец было, переопределяешь эти стили в @media (max-width: 767px) { ... }. При разрешении экрана от 768рх, будет в строку на 20%, а ниже будет в столбец на 100%.
А вообще, вот тебе онлайн учебник на русском, там можно найти ответы на все вопросы по хтмл и ксс, если ещё не видал данный сайт.
Можно сделать и через li, можно и через div. Принцип работы тот же самый.
Да так оно и есть.
Использовать список – это стандартный способ для горизонтального распределения дивов ссылок, которые идут чётко друг за другом, занимая нужную ширину и пропорционально изменясь на разных экранах.
Но в нашем случае это не подойдёт, я думаю.
Проще, надежней это в див загнать 5 одинаковых дивов (с одним общим стилем) и задать классы цветов.
для статики может и нет разницы , а для резинового наверное все же есть , или я ощибаюсь ?
Как уже выше писали, для мобильников и планшетов располагать их один под другим,
а с определённой ширины эти элементы просто выстроить сбоку.
Для мобильной версии: float:none; width:100%;
А для десктопной версии: float:left; width:20%;
Как уже выше писали, для мобильников и планшетов располагать их один под другим,
а с определённой ширины эти элементы просто выстроить сбоку.
А мне нравится другой вариант - всё наоборот.
На широком экране всё выстраивается сбоку справа вертикальной колонкой.
при переходе на мобильник эта колонка становится горизонтальной и помещается вниз.
назад
список