Границы

alexandr_v-vich · May 6, 2012

Как-то вот сразу два вопроса возникло (точнее актуализировалось). Спасибо, если поможете мне разобраться)

Вопрос #1.

Есть background-clip и background-origin. Можно по-простому как-нибудь или просто подробнее, в чём разница-то?

И ещё, я так понимаю влияние оказывается исключительно на отображение фона? На размеры границ и отступов и их логику не влияет, да?

Вопрос #2.

Вот, частенько сталкивался — а, ведь, опыт у меня мизерный, ужасающе мизерный — с проблемой определения ширины border в резиновой вёрстки. И чо-то как-то и не помню как решал эти проблемы, по-моему это было не совсем правильно и просто по-другому строилась вёрстка. Интересно услышать ваши варианты выхода из ситуации. Пока знаю 2 варианта:

box-sizing. Но есть одно замечание. Написано, что в IE работает в режиме совместимости. Это, как понимаю, с <!DOCTYPE html> уже не работает в нём?
Подложка другого дива, с выступающей шириной и/или высотой. Крайний случай да и некрасивый, но 100%-ый, кроссбраузерный и безотказный… но неудобный… но наверняка

!! Замечание: Проблема вылилась в 25ый пост. И решилась в 26ом

Edited May 7, 2012 by alexandr_v-vich

Viper · May 6, 2012

И ещё, я так понимаю влияние оказывается исключительно на отображение фона? На размеры границ и отступов и их логику не влияет, да?

Да

Есть background-clip и background-origin. Можно по-простому как-нибудь или просто подробнее, в чём разница-то?

Даже не знаю как более понятнее обьснить(чем по указанным сылкам)... Может попробуете как-то конкретизировать вопрос?

С помощью background-clip фон можно "запихнуть" под border(незаметно, если border - solid). А с помощью background-origin, фон можно позиционировать от краев padding'а елемента...

Svatov · May 6, 2012

1. Да, влияют только на background. Разница в том, что background-origin влияет на background-image, а background-clip на background-color и backround-image*, логика у них немного разная и значения по умолчанию.

* влияет только в той степени, когда например background-origin:border-box, а background-clip:padding-box, соответственно второе свойство обрежет картинку несмотря на background-origin.

С помощью background-clip фон можно "запихнуть" под border(незаметно, если border - solid).

А ничего, что по умолчанию background-color находится под бордером? Просто из-за того, что зачастую бордер solid этого не видно.

2. Не сталкивался.

Edited May 6, 2012 by Svatov

alexandr_v-vich · May 6, 2012

Viper, Svatov, разобрался с первым, спасибо ребят) В общем-то в названии всё и сказано))

2. Не сталкивался.

:blink:

Ну это, на самом деле, более существенный и важный вопрос…

Svatov · May 6, 2012

А есть какой-то конкретный пример? Вместе подумаем Просто я не до конца понимаю вопрос...да и честно не встречал в резиновых макетах, чтобы бордер растягивался (менял размеры)

alexandr_v-vich · May 6, 2012

да и честно не встречал в резиновых макетах, чтобы бордер растягивался (менял размеры)

Во, вот об этом и речь.

Есть у нас 2 колонки. Каждая должна занимать половину ширину. И между ними должен проходить border. Т.е. в идеале должно было бы быть — каждая из колонок по 49,5% и border в 1%… но он фикс. Соответственно, что делать?

Ну в голову приходит ещё <hr>… и по-моему это и есть самые популярные решения. Но как бы в этом и вопрос — кто как выходит из ситуации?)

Svatov · May 6, 2012

А <hr> каким образом, вертикальное разделение? А так вроде эмуляция с помощью доп. блока(как ты говорил наиболее кроссбраузерно) и так же всякие танцы с background-size.

Edited May 6, 2012 by Svatov

alexandr_v-vich · May 6, 2012

border-image?? :blink: В процентах??

Это как так получается? Т.е. единственное, где я могу задать border в процентах это border-image??? Зашибись то как :facepalmxd:

(нет, я вообще не думал, что его хоть где-то можно в процентах записать, но если можно, какого чёрта только так?).

Хотя всё равно IE отлетает, а значит и смысла нет…

А <hr> каким образом, вертикальное разделение?

Ну что-то типо того — http://jsfiddle.net/vWyL3/5/

Svatov · May 6, 2012

border-image?? В процентах??
Это как так получается? Т.е. единственное, где я могу задать border в процентах это border-image??? Зашибись то как
(нет, я вообще не думал, что его хоть где-то можно в процентах записать, но если можно, какого чёрта только так?).
Хотя всё равно IE отлетает, а значит и смысла нет…

Ах, не бери в голову, я просто хотел написать про box-sizing: border-box; ...но как раз думал про border-image вот и опечатался).

А <hr> каким образом, вертикальное разделение?
Ну что-то типо того — http://jsfiddle.net/vWyL3/5/

Жесть, извращенцы :lol:

Edited May 6, 2012 by Svatov

alexandr_v-vich · May 6, 2012

Ах, не бери в голову

Да уже выбросил. Понял, спасибо, Svatov)

Жесть, извращенцы

Почему? Всегда ставил вертикальные линии только таким способом. Только использовал их как декоративные элементы, и в резине не было повода употребить. А вот сейчас и вспомнил. Не думаю, что здесь есть что-то извращенское. Стандартная вертикальная линия по-моему. То, что используется для разделения… ну а В общем-то это и есть их основная задача ))

UPD: И что-то мне кажется я на этом варианте и остановлюсь…

Edited May 6, 2012 by alexandr_v-vich

Svatov · May 6, 2012

Жесть, извращенцы
Почему? Всегда ставил вертикальные линии только таким способом. Только использовал их как декоративные элементы, и в резине не было повода употребить. А вот сейчас и вспомнил. Не думаю, что здесь есть что-то извращенское. Стандартная вертикальная линия по-моему. То, что используется для разделения… ну а В общем-то это и есть их основная задача ))
UPD: И что-то мне кажется я на этом варианте и остановлюсь…

<hr> я полагаю пошел от слова horizontal, и считая использование именно в ваших целях не сильно семантично, это просто на уровне эмуляции, как, например, с колонками одинаковой высоты через бордер. Лучше это в таком случае использовать псевдоэлементы.

Edited May 6, 2012 by Svatov

alexandr_v-vich · May 6, 2012

Svatov, Не, ну то что он не для этого предназначен это да). Просто мне казалось… ну не знаю, когда ещё начинал верстать только, читал там, смотрел — думал, что вроде как устоявшийся метод…

Лучше это в таком случае использовать псевдоэлементы.

IE7… =/ … ну по ситуации буду. Порой да, именно это и лучший способ.

Спасибо за ответы.

Edited May 6, 2012 by alexandr_v-vich

Svatov · May 6, 2012

Ну вот, что еще удалось придумать:

.box {
width:100%;
background-color:cyan;
}

.box1 {
position:absolute;
width:49.5%;
height:400px;
background-color:yellow;  
}

.box2 {
float:right;
width:49.5%;
height:400px;
background-color:blue;
border:200px solid red;
}

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>

Edited May 6, 2012 by Svatov

alexandr_v-vich · May 6, 2012

Ну вот, что еще удалось придумать:

Исключительный вариант. На 2 колонки.

Но мысль хороша, что не обязательно ведь вообще границу задавать — например, фон и небольшие отступы вместо этих границ) да, точно)

Edited May 6, 2012 by alexandr_v-vich

Viper · May 6, 2012

width:49.5%;

Дробные проценты по разному воспринимаються некоторыми браузерами(

alexandr_v-vich · May 6, 2012

width:49.5%;
Дробные проценты по разному воспринимаються некоторыми браузерами(

Я думал, это касается сотых частей, ну, всмысле, когда 2 знака после запятой, не?

Svatov · May 6, 2012

Viper, во-первых это пример,

во-вторых, в каких? Из тех, что на слуху только Опера имела с ними проблемы до версии, если не ошибаюсь 10.6(таки ошибся). Давно верстал под нее. Если бы вы это знали, то сказали бы сразу...а так это просто вброс какой-то. И если бы вы верстали под нее то знали бы почему для меня та статья (в принципе можно и по комментам к ней глянуть) смехотворна.

Edited May 6, 2012 by Svatov

Viper · May 6, 2012

Я думал, это касается сотых частей, ну, всмысле, когда 2 знака после запятой, не?

Не, не только(

_http://habrahabr.ru/post/120506/#comment_3952720

_http://forum.htmlbook.ru/index.php?showtopic=30979

Edited May 6, 2012 by Viper

alexandr_v-vich · May 6, 2012

Viper, Да, это я с целыми числами перепутал, ну там типа когда 1 это 100%, 1.2 = 120% и т.д. Спасибо, что вернули мысли на место)

Что-то я вообще уже… голова болит, спать охота, соображаю плохо. Дело в том, что, с одной стороны, границы должны быть одинаковые, что вертикальные, что горизонтальные, одинаково растягиваться. Допустим, вот — http://jsfiddle.net/W6wm9/40/. С границами всё нормальёк (что меня удивило, по-началу). Но блок то при расширении высоту не меняет.

Подумал, ведь img по той же схеме растягивается… :dash: ,

Не, всё, надо на свежую голову, уже запутался.

Viper · May 6, 2012

Viper, во-первых это пример,

А я утверждал, что пример не верен?

во-вторых, в каких? Из тех, что на слуху только Опера имела с ними проблемы до версии, если не ошибаюсь 10.6. Давно верстал под нее. Если бы вы это знали, то сказали бы сразу...а так это просто вброс какой-то. И если бы вы верстали под нее то знали бы почему для меня та статья (в принципе можно и по комментам к ней глянуть) смехотворна.

Ну не стоит вот так горячиться... Проблемы не только в Opera. Меня, например, всегда(и до сих под) останавливал ИЕ7-й. И я верстал под Opera всегда, кроме последних 7-9 мес..

Edited May 6, 2012 by Viper

Svatov · May 6, 2012

ИЕ7, в большинстве случаев нормально считает дробные проценты, только в исключительных ситуациях нужны правки. Большие проблемы только у Оперы...и ее как вижу сейчас еще не исправили.

alexandr_v-vich · May 7, 2012

Ок, пока вопрос промежуточный.

html{height:100%;} — это сколько? Высота монитора? Или высота документа? Или большее из двух? Или ещё что-нибудь?

Edited May 7, 2012 by alexandr_v-vich

troll · May 7, 2012

В браузере - высота области просмотра (viewport).

Edited May 7, 2012 by troll

alexandr_v-vich · May 7, 2012

troll, ага, точняк, и забыл, что меня смутило… ладно, спасибо)

alexandr_v-vich · May 7, 2012

Я уверен, можно и самому со временем найти ответы, но думаю, опытные, знающие люди помогут мне не тратить на то столько времени и дадут какие-нибудь советы.

Дело в резине. Пришёл к тому, что когда мы растягиваем блок по горизонтали (ширине), он должен растягиваться по вертикали (высоте). Короче нужно сохранять пропорции. В озвученным, не так далеко, выше примере эта идея реализована с margin. Возможно такая же тема будет и с padding. И как знаем, именно по такой логике и растягиваются img. Что делать с блоками?

Есть гипотеза. Но это… это вообще. Совершенно другая логика вёрстки. Суть в том, чтобы верстать не блоками, а границами. Т.е. мы ставим отступы, абзацы, границы в процентном режиме. А между ними заполняется чем нужно. Блоки то, конечно, остаются, но уже с пустыми размерами. В общем, это гипотеза, предположение… даже не знаю, как бы это могло сейчас выглядеть)

Очень надеюсь, что выход есть более простой…

И конкретизирую, ещё раз, на всякий случай — как сделать резину с сохранением пропорций?)

Очень буду признателен, если поможете, друзья.

UPD: Если звучит слишком философски, вот тот пример — http://jsfiddle.net/W6wm9/40/. Это типа картинка, шаблон. Сама вёрстка, понятно, неправильная. Нужно, чтобы, растягивая окно в ширину, растягивалось всё и в ширину и в длину, пропорционально.

Вариант, мне кажется, только js`овский, да? Но, если даже и так, на что js писать? Не на каждый же элемент/блок. В этом примере, как понимаю, скорее всего только на класс all. Но это в этом примере, а вообще, какую „границу“ поставить, на что писать этот js? (ну и словоблуд же я). Возможно ли написать js-резину ну там, представим, на body, а дальше уже верстать более-менее привычно?

Edited May 7, 2012 by alexandr_v-vich

alexandr_v-vich · May 7, 2012

Итак,

Решение — http://jsfiddle.net/W6wm9/74/

В чём соль. Берём стандарт. Назначаем его мы сами. Я выбрал „1,1“ (не буду углубляться почему). Это стандарт отношения ширины viewport`a (правильно, viewport же?) к длине. Моя цифра почти случайна, потом её конкретизирую)). Это должна быть самая распространённая пропорция viewport`a для разрешений на которые будет действовать резина. Выходя за разрешения, понятно будет включаться тема адаптивной вёрстки (там, вероятно, тоже следует подобрать свою пропорцию, но не об этом).

А дальше немного строчек js, которые сохранят нашу пропорцию для <html> поскольку это и есть наш viewport (мне так сказали)), но вроде как оно и есть).

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

И вот осталось 2 вопроса, которые меня волнуют.

Вопрос №1

Кто знаком с js, может поможет оптимизировать код, что в примере? Не уверен насколько он кроссбраузерен. И думаю, можно чуть короче, да?

Вопрос №2

Не понимаю — чего такая маленькая отзывчивость в теме? Неужели я говорю о столь привычных и само-собой-разумеющихся вещах, что даже лень отвечать? Или это было сложно? — ну сомнительно… Или никто не заморачивался никогда резиной — ну вообще сомнительно. Это же очень важно, по-моему. М??

UPD: набросал ещё немного — http://jsfiddle.net/W6wm9/96/. Есть косячок небольшой, по-моему из-за неправильных расчётов в классе box, но это не суть. Смотреть стоит на левые и верхние границы.

Edited May 7, 2012 by alexandr_v-vich

Sign In

Границы

Question

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information