вопрос к залу по 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%;
Как уже выше писали, для мобильников и планшетов располагать их один под другим,
а с определённой ширины эти элементы просто выстроить сбоку.
А мне нравится другой вариант - всё наоборот.
На широком экране всё выстраивается сбоку справа вертикальной колонкой.
при переходе на мобильник эта колонка становится горизонтальной и помещается вниз.
понял, сделал пока для десктопной версии на дивах , буду спотреть когда они будут ломатся , и делать под мобильную
А зачем лишняя работа?
Почему сразу не предусмотреть мобильную версию.
Кстати сразу скажу, что разделить полосу на 5 частей по горизонтали- это много. Ну от силы 4 для мобильной версии.
Вообще, считается лучше делать сначала именно мобильную версию,
но иногда есть ситуации когда это особой роли не играет.
И даже если делать мобильную версию сначала, то нужно будет сделать то же самое.
Сначала построить эти элементы один под другим,
а потом от определённой ширины выстроить их сбоку один от другого.
ну тогда озвучте концепт :-)
У меня под рукой нет примеров, показать что я пробую высказать(я не дома, в гостях).
Но попробую опять на словах.
Современная страница должна представлять три колонки, ну пусть даже две.
Левая клонка основная, правая колонка - это в основном ссылки, так выглядит на широких экранах.
При переходе на мобильные правая колонка становится горизонтальной и помещается под основную вниз.
Уже сразу горизонтальных ссылок не должно быть много. Привычная куча ссылок над лого и под лого в виде полосы - это уже не хорошо.
Вообще, считается лучше делать сначала именно мобильную версию,
Это точно.
Я сейчас занимаюсь и только вначале в диапазоне меньше 580px, потом меньше 960px И только уж потом свыше 960px.
Переделать предыдушие любительские страницы и под мобильники не удаётся, надо всё по-новой.
есть другой вопрос , хочу сделать в футере полосу скажем в 20 пх и в ней чтобы было 5 полей по 20% каждый и разных цветов ,
А можно сделать сразу две полосы друг за другом по горизонтали, в одной 2-3 дива, в другой оставшиеся дивы.
И прописать в стилях, что при переходе на мобильные правая полоса-див сместится вниз под левую полосу.
Я уже несколько раз делал подобное.
это же будет просто декоративная полоска , без каких либо функций,
я попробовал сжимать ее, так она сжимается без всяких изломов до минимума , поэтому и делать ничего не надо
поставил просто через дивы
я же сказал , что не в хидере мне это надо, а в футоре ! вот и не могу понять,как там это прикрутиь
Так же, через вставку в теги - style, нужных стилей. Единственно это как бы не правильно, да и в чём собственно проблема, если стили будут в head?
А вообще, это плохой стиль и неудобно, вставлять стили в хтмл странице, правильней подключить в head файл типа - style.css, и в нём все стили прописывать, и забыть про хтмл файл для этого.
на всю ширину экрана ? какой вес у не был бы ?
Даже учитывать не стоит.
Другое дело, стоит ли картинку-полосу использовать вместо дивов.
Вот здесь надо подумать, но в простейшем случае не обязательно использовать картинку.