привет всем , есть вопрос , не могу понять, почему когда в цсс я цепляю картинку в диве как бакгрвунд

то размер картинки не совпадает с размером этого дива ?

размер картинки сейчас у меня 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 пх то она не закрывает все поле дива , почему ?

Anhang

padding:10px;

Добавь: background-size: 100% 100%;

И белая полоса внизу исчезнет.

Anhang

и что значить паддинг 10 ?? ширина дива 45 пих и если добавить 10 то будет 55

а у меня получается 60 пх полоска , откуда нестыковка ?

так суть не в том, чтобы полоса исчезла , я не понимаю как получается так, что ширина дива 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>

box-sizing:border-box

margin - "внешний" отступ
padding - "внутренний" отступ

есть другой вопрос , хочу сделать в футере полосу скажем в 20 пх и в ней чтобы было 5 полей по 20% каждый и разных цветов ,

вопрос как ее реализовать чтобы была адаптивная ,??

сделать див , в него вложить спанами 5 полей ?

или как ? у кого какие будут советы ?

Цвета можете изменить по-вкусу. (Можно использовать rgba(255,0,0,1) если нужно с альфой. Главное здесь позиция узла в процентах: 100% / 5 = шаг в 20 процентов.

да по цвету у меня нет проблем могу и через #FFFFFF могу через RGB дефинировать,

суть вопроса была в том , как это лучше сделать в хтмл ? через

UL потом 5 LI , а потом каждому Ли дать класс например `Id color RED ?

или есть что то лучше ?

получится должно что то типа такого

Anhang

Задаёшь стилями в head - <style...> ... </style> нужные настройки для тега li как "display: inline; width: xxx; ...", а дальше, что бы на мобильниках всё в столбец было, переопределяешь эти стили в @media (max-width: 767px) { ... }. При разрешении экрана от 768рх, будет в строку на 20%, а ниже будет в столбец на 100%.

А вообще, вот тебе онлайн учебник на русском, там можно найти ответы на все вопросы по хтмл и ксс, если ещё не видал данный сайт.

я же сказал , что не в хидере мне это надо, а в футоре ! вот и не могу понять,как там это прикрутиь

в принципе разницы нет где оно будет.

Можно сделать и через li, можно и через div.

Принцип работы тот же самый.

для статики может и нет разницы , а для резинового наверное все же есть , или я ощибаюсь ?

Можно сделать и через 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, и в нём все стили прописывать, и забыть про хтмл файл для этого.

так я все в css и прописал для этих дивов , и стоит разноцветная полоска как надо 5 цветов ,

но я еще подумаю может я ее и перенесу в хид

это же будет просто декоративная полоска , без каких либо функций,

Ну если это пустые дивы, то это могла бы быть просто картинка.

на всю ширину экрана ? какой вес у не был бы ?

на всю ширину экрана ? какой вес у не был бы ?

Даже учитывать не стоит.

Другое дело, стоит ли картинку-полосу использовать вместо дивов.

Вот здесь надо подумать, но в простейшем случае не обязательно использовать картинку.