русский
Germany.ruForen → Архив Досок→ Webdesign und Hosting

вопрос к залу по CSS

727  1 2 alle
Brandus знакомое лицо11.10.16 23:16
Brandus
11.10.16 23:16 
Zuletzt geändert 11.10.16 23:18 (Brandus)

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

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

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


#1 
gendy Dinosaur12.10.16 06:24
gendy
NEW 12.10.16 06:24 
in Antwort Brandus 11.10.16 23:16

padding:10px;

Фашизм будет разбит


Человека карают только те боги, в которых он верит

#2 
regrem патриот12.10.16 08:00
NEW 12.10.16 08:00 
in Antwort Brandus 11.10.16 23:16, Zuletzt geändert 12.10.16 08:26 (regrem)

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

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



#3 
Brandus знакомое лицо12.10.16 21:13
Brandus
NEW 12.10.16 21:13 
in Antwort Brandus 11.10.16 23:16

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

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

#4 
Brandus знакомое лицо12.10.16 21:16
Brandus
NEW 12.10.16 21:16 
in Antwort regrem 12.10.16 08:00, Zuletzt geändert 12.10.16 21:18 (Brandus)

так суть не в том, чтобы полоса исчезла , я не понимаю как получается так, что ширина дива 45 , а ширина картинки 60,

если я делаю ее меньше то она не закрывает всю щирину ,

а цель именно такая чтобы все закрывало, что в принципе сейчас и есть ,

только почему так получается ??

картинка верхняя правильная , то что и хотелось достичь

я просто не понимаю принцип , как это так получается ?


#5 
Vovan(ator) коренной житель12.10.16 21:26
Vovan(ator)
NEW 12.10.16 21:26 
in Antwort Brandus 12.10.16 21:16
я просто не понимаю принцип , как это так получается ?

Отсчёт происходит от края 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

#6 
regrem патриот12.10.16 22:03
NEW 12.10.16 22:03 
in Antwort Brandus 12.10.16 21:13

Значит я вопрос не понял, кстати и сейчас не очень.

Я думал, что внизу плоса белая смушает - это бывает и сильно заметно на больших изображениях.

Совсем недавно возился убирая полосу внизу, ну выкрутился, может кому-то интересно будет:


#logo

{

width:100%;

padding-bottom: 27.8%;

height:0;

float:left;

overflow:hidden;

}

<div id = "logo">

<IMG src = "img/dfdfe.jpg"/>

</div>


#7 
DTP-Designer местный житель25.10.16 01:29
DTP-Designer
NEW 25.10.16 01:29 
in Antwort regrem 12.10.16 22:03

box-sizing:border-box

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

#8 
Brandus знакомое лицо26.10.16 00:20
Brandus
NEW 26.10.16 00:20 
in Antwort DTP-Designer 25.10.16 01:29

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

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

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

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


#9 
DTP-Designer местный житель26.10.16 00:39
DTP-Designer
NEW 26.10.16 00:39 
in Antwort Brandus 26.10.16 00:20
background: rgb(255,0,0); background: -moz-linear-gradient(top, rgb(255,0,0) 0%, rgb(255,0,0) 20%, rgb(255,255,0) 20%, rgb(255,255,0) 40%, rgb(0,255,0) 40%, rgb(0,255,0) 60%, rgb(0,255,255) 60%, rgb(0,255,255) 80%, rgb(0,0,255) 80%, rgb(0,0,255) 100%); background: -webkit-linear-gradient(top, rgb(255,0,0) 0%,rgb(255,0,0) 20%,rgb(255,255,0) 20%,rgb(255,255,0) 40%,rgb(0,255,0) 40%,rgb(0,255,0) 60%,rgb(0,255,255) 60%,rgb(0,255,255) 80%,rgb(0,0,255) 80%,rgb(0,0,255) 100%); background: linear-gradient(to bottom, rgb(255,0,0) 0%,rgb(255,0,0) 20%,rgb(255,255,0) 20%,rgb(255,255,0) 40%,rgb(0,255,0) 40%,rgb(0,255,0) 60%,rgb(0,255,255) 60%,rgb(0,255,255) 80%,rgb(0,0,255) 80%,rgb(0,0,255) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0 );
#10 
DTP-Designer местный житель26.10.16 00:43
DTP-Designer
NEW 26.10.16 00:43 
in Antwort Brandus 26.10.16 00:20

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

#11 
Brandus знакомое лицо26.10.16 09:43
Brandus
NEW 26.10.16 09:43 
in Antwort DTP-Designer 26.10.16 00:43, Zuletzt geändert 26.10.16 09:56 (Brandus)

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

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

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

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


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

#12 
Sergo2008 старожил26.10.16 14:00
Sergo2008
NEW 26.10.16 14:00 
in Antwort Brandus 26.10.16 09:43

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


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

#13 
Brandus знакомое лицо26.10.16 16:34
Brandus
NEW 26.10.16 16:34 
in Antwort Sergo2008 26.10.16 14:00, Zuletzt geändert 26.10.16 16:35 (Brandus)

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

#14 
Vovan(ator) коренной житель26.10.16 16:43
Vovan(ator)
NEW 26.10.16 16:43 
in Antwort Brandus 26.10.16 16:34

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

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

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

#15 
Brandus знакомое лицо26.10.16 17:16
Brandus
NEW 26.10.16 17:16 
in Antwort Vovan(ator) 26.10.16 16:43

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

#16 
regrem патриот26.10.16 18:11
NEW 26.10.16 18:11 
in Antwort Vovan(ator) 26.10.16 16:43, Zuletzt geändert 26.10.16 18:29 (regrem)
Можно сделать и через li, можно и через div. Принцип работы тот же самый.

Да так оно и есть.

Использовать список – это стандартный способ для горизонтального распределения дивов ссылок, которые идут чётко друг за другом, занимая нужную ширину и пропорционально изменясь на разных экранах.

Но в нашем случае это не подойдёт, я думаю.

Проще, надежней это в див загнать 5 одинаковых дивов (с одним общим стилем) и задать классы цветов.


#17 
Vovan(ator) коренной житель26.10.16 18:23
Vovan(ator)
NEW 26.10.16 18:23 
in Antwort Brandus 26.10.16 17:16
для статики может и нет разницы , а для резинового наверное все же есть , или я ощибаюсь ?

Как уже выше писали, для мобильников и планшетов располагать их один под другим,

а с определённой ширины эти элементы просто выстроить сбоку.


Для мобильной версии: float:none; width:100%;

А для десктопной версии: float:left; width:20%;


#18 
Brandus знакомое лицо26.10.16 18:25
Brandus
NEW 26.10.16 18:25 
in Antwort Vovan(ator) 26.10.16 18:23

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

#19 
regrem патриот26.10.16 18:35
NEW 26.10.16 18:35 
in Antwort Vovan(ator) 26.10.16 18:23, Zuletzt geändert 26.10.16 18:39 (regrem)
Как уже выше писали, для мобильников и планшетов располагать их один под другим,
а с определённой ширины эти элементы просто выстроить сбоку.

А мне нравится другой вариант - всё наоборот.

На широком экране всё выстраивается сбоку справа вертикальной колонкой.

при переходе на мобильник эта колонка становится горизонтальной и помещается вниз.


#20 
Vovan(ator) коренной житель26.10.16 18:39
Vovan(ator)
NEW 26.10.16 18:39 
in Antwort regrem 26.10.16 18:35

ну тогда озвучте концепт :-)

#21 
regrem патриот26.10.16 18:47
NEW 26.10.16 18:47 
in Antwort Brandus 26.10.16 18:25
понял, сделал пока для десктопной версии на дивах , буду спотреть когда они будут ломатся , и делать под мобильную

А зачем лишняя работа?

Почему сразу не предусмотреть мобильную версию.

Кстати сразу скажу, что разделить полосу на 5 частей по горизонтали- это много. Ну от силы 4 для мобильной версии.


#22 
Vovan(ator) коренной житель26.10.16 19:02
Vovan(ator)
NEW 26.10.16 19:02 
in Antwort regrem 26.10.16 18:47

Вообще, считается лучше делать сначала именно мобильную версию,

но иногда есть ситуации когда это особой роли не играет.

И даже если делать мобильную версию сначала, то нужно будет сделать то же самое.

Сначала построить эти элементы один под другим,

а потом от определённой ширины выстроить их сбоку один от другого.

#23 
regrem патриот26.10.16 19:12
NEW 26.10.16 19:12 
in Antwort Vovan(ator) 26.10.16 18:39, Zuletzt geändert 26.10.16 19:28 (regrem)
ну тогда озвучте концепт :-)

У меня под рукой нет примеров, показать что я пробую высказать(я не дома, в гостях).

Но попробую опять на словах.

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

Левая клонка основная, правая колонка - это в основном ссылки, так выглядит на широких экранах.

При переходе на мобильные правая колонка становится горизонтальной и помещается под основную вниз.

Уже сразу горизонтальных ссылок не должно быть много. Привычная куча ссылок над лого и под лого в виде полосы - это уже не хорошо.


#24 
regrem патриот26.10.16 19:20
NEW 26.10.16 19:20 
in Antwort Vovan(ator) 26.10.16 19:02
Вообще, считается лучше делать сначала именно мобильную версию,

Это точно.

Я сейчас занимаюсь и только вначале в диапазоне меньше 580px, потом меньше 960px И только уж потом свыше 960px.

Переделать предыдушие любительские страницы и под мобильники не удаётся, надо всё по-новой.



#25 
Vovan(ator) коренной житель26.10.16 19:31
Vovan(ator)
NEW 26.10.16 19:31 
in Antwort regrem 26.10.16 19:20

по новой они и проще и быстрее получается обычно :-)

#26 
regrem патриот26.10.16 19:46
NEW 26.10.16 19:46 
in Antwort Brandus 26.10.16 00:20
есть другой вопрос , хочу сделать в футере полосу скажем в 20 пх и в ней чтобы было 5 полей по 20% каждый и разных цветов ,

А можно сделать сразу две полосы друг за другом по горизонтали, в одной 2-3 дива, в другой оставшиеся дивы.

И прописать в стилях, что при переходе на мобильные правая полоса-див сместится вниз под левую полосу.

Я уже несколько раз делал подобное.


#27 
Brandus знакомое лицо26.10.16 21:38
Brandus
NEW 26.10.16 21:38 
in Antwort regrem 26.10.16 19:46, Zuletzt geändert 26.10.16 21:42 (Brandus)

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

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

поставил просто через дивы






#28 
Sergo2008 старожил27.10.16 08:30
Sergo2008
NEW 27.10.16 08:30 
in Antwort Brandus 26.10.16 21:38, Zuletzt geändert 27.10.16 08:33 (Sergo2008)
я же сказал , что не в хидере мне это надо, а в футоре ! вот и не могу понять,как там это прикрутиь

Так же, через вставку в теги - style, нужных стилей. Единственно это как бы не правильно, да и в чём собственно проблема, если стили будут в head?

А вообще, это плохой стиль и неудобно, вставлять стили в хтмл странице, правильней подключить в head файл типа - style.css, и в нём все стили прописывать, и забыть про хтмл файл для этого.

#29 
Brandus знакомое лицо27.10.16 10:14
Brandus
NEW 27.10.16 10:14 
in Antwort Sergo2008 27.10.16 08:30, Zuletzt geändert 27.10.16 10:15 (Brandus)

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

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

#30 
regrem патриот27.10.16 14:33
NEW 27.10.16 14:33 
in Antwort Brandus 26.10.16 21:38, Zuletzt geändert 27.10.16 14:34 (regrem)
это же будет просто декоративная полоска , без каких либо функций,

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


#31 
Brandus знакомое лицо27.10.16 15:04
Brandus
NEW 27.10.16 15:04 
in Antwort regrem 27.10.16 14:33

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

#32 
regrem патриот27.10.16 18:08
NEW 27.10.16 18:08 
in Antwort Brandus 27.10.16 15:04, Zuletzt geändert 27.10.16 19:52 (regrem)
на всю ширину экрана ? какой вес у не был бы ?

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

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

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


#33 
1 2 alle