Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS - откуда пробелы? / 15 сообщений из 15, страница 1 из 1
14.03.2013, 23:40
    #38184830
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
Всем еще раз привет!
Есть такая конструкция:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
div.scale {
    font-size: 1em;
}

div.marks div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

div.ordinary {
    width: 0.7em;
    height: 0.7em;
    background: rgb(240,240,240);
}


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<div class="scale">
	<div>
		<p></p>
	</div>
	<div class="marks">
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
	</div>
</div>


Я не могу понять, откуда между этими квадратиками появился пробел :). Chrome показывает, что padding/margin равен нулю.
Заранее спасибо за подсказку!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 00:54
    #38184875
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
И второй вопрос по этому элементу появился:
Как лучше всего реализовать логику выравнивания по высоте для всех DIV'ов внутри <div class="marks">?
Нужно так же учесть, что часть из внутренних DIV'ов могут быть увеличены по высоте.
У меня есть 2 варианта:

Делаю всем элементам выравнивание по вертикали таким образом:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
div.marks {
    position: relative;
}

div.ordinary {
    position: absolute;
    top: 50%;
    margin: 0em 0em 0em -0.2em;
}


На этом шаге они все собрались слева прижатые к левой границе. Дальше я создаю 10 правил для каждого элемента, и в каждом правиле с определенным шагом увеличиваю отступ слева с помощью атрибута 'left'.

Второй вариант заключается в том, что бы использовать 'display:table' у <div class="marks">. Дальше каждый элемент отображаю в отдельной ячейке и выравниваю по вертикали с помощью 'vertical-align:middle'. Но я не знаю, как тут с margin и padding будет дело обстоять.

Что выбрать? Есть более правильный вариант?
Заранее спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 02:41
    #38184907
FireLion
FireLion
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
MaximuS_G,

отступы создают символы из контейнера
решить красиво можно так:
задаешь диву со шкалой размер шрифта 0
div.scale {
font-size: 0;
}
а т.к. он наследуется потомками, то возвращаешь размер шрифта в классе marks
div.marks div {
font-size: 14px;
margin: 0px;
padding: 0px;
display: inline-block;
}

Теперь, если добавишь границу к кубикам, то пробелов не увидишь.
кстати такая ерунда не для всех браузеров нужна, но для кроссбраузерности - вариант решения)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 02:45
    #38184909
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
Угу. Согласен, самый простой. Как вариант - float:left, но зачастую он неуместен. Помню, что было третье решение, но навскидку не приходит.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 03:04
    #38184914
FireLion
FireLion
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
кстати, если адаптировать под старые версии браузеров и некоторые веб-устройства, то можно еще в родителе добавить:

line-height:0; чтоб убрать в некоторых версиях отступ сверху
letter-spacing:-1px; чтоб заставить все-таки некоторые устройства не делать отступ

а потомку вернуть оба свойства на normal
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 04:57
    #38184937
FireLion
FireLion
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
MaximuS_GИ второй вопрос по этому элементу появился:
Как лучше всего реализовать логику выравнивания по высоте для всех DIV'ов внутри <div class="marks">?
Нужно так же учесть, что часть из внутренних DIV'ов могут быть увеличены по высоте.
 
У меня есть 2 варианта:

Делаю всем элементам выравнивание по вертикали таким образом:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
div.marks {
    position: relative;
}

div.ordinary {
    position: absolute;
    top: 50%;
    margin: 0em 0em 0em -0.2em;
}


На этом шаге они все собрались слева прижатые к левой границе. Дальше я создаю 10 правил для каждого элемента, и в каждом правиле с определенным шагом увеличиваю отступ слева с помощью атрибута 'left'.

Второй вариант заключается в том, что бы использовать 'display:table' у <div class="marks">. Дальше каждый элемент отображаю в отдельной ячейке и выравниваю по вертикали с помощью 'vertical-align:middle'. Но я не знаю, как тут с margin и padding будет дело обстоять.

Что выбрать? Есть более правильный вариант?
Заранее спасибо!

есть следующее предложение:
т.к. кубики зафиксированы в эмах, то, предполагаю, более крупные кубики тоже будут в эмах, но с большим значением, так?
если так, то калькуляцией можем легко выровнять:
1. все-таки марки оставляем релетив (добавил красную рамочку для лучшей видимости). свойство не наследуется, поэтому "на всякий случай" (вдруг стандартные настройки браузера пользователь поменяет) прописал наследование потомкам
2. создаем еще один вид дивов ordinary_passed с бОльшим размером
3. в атрибуте top меньших дивов ставим результат вычисления = (меньший - больший)/2. В бОльших дивах при необходимости топ обнулить

и вот что из этого получится:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
div.marks div {
    position: relative;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: inline-block;
    }

div.ordinary {
    width: 0.7em;
    height: 0.7em;    
    top: -0.4em;
    background: rgb(240,240,240);
}
div.ordinary_passed {
    width: 0.7em;
    height: 1.5em;
    background: rgb(0,250,0);





Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
	<div class="marks">
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary_passed"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
		<div class="ordinary"></div>
	</div>



если все же хочется обойтись без математики или градация размеров оооочень широкой палитры, то тогда, думаю, лучше уже прибегнуть к таблице, и в ней выравнивать по ячейкам
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 04:59
    #38184939
FireLion
FireLion
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
FireLion... прописал наследование потомкам
...

сорри, забыл вставить с наследованием:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
div.ordinary {
    position: inherit;    
    width: 0.7em;
    height: 0.7em;    
    top: -0.4em;
    background: rgb(240,240,240);
}
div.ordinary_passed {
    position: inherit; 
    width: 0.7em;
    height: 1.5em;
    background: rgb(0,250,0);
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 08:31
    #38185008
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
MaximuS_GЯ не могу понять, откуда между этими квадратиками появился пробел :).
Вот откуда.

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div.scale {
    font-size: 1em;
}
.marks {
	border: 1px solid;
}
div.marks div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}
div.ordinary {
    width: 0.7em;
    height: 0.7em;
    background: rgb(240,240,240);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="scale">
	<div>
		<p></p>
	</div>
	<div class="marks">
		<div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div>
	</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 08:32
    #38185009
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
MaximuS_GКак лучше всего реализовать логику выравнивания по высоте
...
Что выбрать? Есть более правильный вариант?
Нужно выбирать таблицу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 08:39
    #38185013
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
FireLionотступы создают символы из контейнера
решить красиво можно так:
задаешь диву со шкалой размер шрифта 0
Код: css
1.
2.
3.
div.scale {
    font-size: 0;
}

а т.к. он наследуется потомками, то возвращаешь размер шрифта в классе marks
Код: css
1.
2.
3.
4.
5.
6.
div.marks div {
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
}


Теперь, если добавишь границу к кубикам, то пробелов не увидишь.
кстати такая ерунда не для всех браузеров нужна, но для кроссбраузерности - вариант решения)
Как альтернативное решение...

Код: css
1.
2.
3.
.marks {
	word-spacing: -4px;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 13:27
    #38185533
FireLion
FireLion
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
krvsaMaximuS_GЯ не могу понять, откуда между этими квадратиками появился пробел :).
Вот откуда.

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div.scale {
    font-size: 1em;
}
.marks {
	border: 1px solid;
}
div.marks div {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}
div.ordinary {
    width: 0.7em;
    height: 0.7em;
    background: rgb(240,240,240);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="scale">
	<div>
		<p></p>
	</div>
	<div class="marks">
		<div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div><div class="ordinary"></div>
	</div>
</div>
</body>
</html>



действительно причина именно в этом - в расположении вертикальным столбцом. но не очень-то читабельно располагать большое кол-во дивов в строку
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 13:47
    #38185568
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
Всем спасибо большое! Особенно FireLion за расширенные комментарии.
FireLionотступы создают символы из контейнера
А где прочитать про это можно? Я вбил в google "символы из контейнера", но что-то не получил нужно информации. Может есть правильнее название? Контейнеры шрифта ? Или объясните, пожалуйста, в топике, как они образуются.
FireLionесть следующее предложение:
т.к. кубики зафиксированы в эмах, то, предполагаю, более крупные кубики тоже будут в эмах, но с большим значением, так?

Да, верно. Я просто буду менять класс тег, и он будет увеличиваться, по отношению к остальным. Во вложении прикрепил, что хочется получить на выходе.
FireLion1. все-таки марки оставляем релетив (добавил красную рамочку для лучшей видимости). свойство не наследуется, поэтому "на всякий случай" (вдруг стандартные настройки браузера пользователь поменяет) прописал наследование потомкам
2. создаем еще один вид дивов ordinary_passed с бОльшим размером
3. в атрибуте top меньших дивов ставим результат вычисления = (меньший - больший)/2. В бОльших дивах при необходимости топ обнулить
Не понял, зачем оставляем relative. Можете объяснить?
Я так понял, вариант, который Вы предлагаете, заключается в том, что бы сделать общую высоту div.marks равную высоте div.ordinary_passed, и не выравнивать их посредине, а div.ordinary уменьшать по высоте (height: 0.7em;) по сравнению с div.marks и выравнивать по средине с помощью (top: -0.4em;)?
krvsaВот откуда.
Спасибо, но к сожалению так и не понял, откуда они появились. Вы можете объяснить свой пример?
krvsaНужно выбирать таблицу.
Спасибо, а какие у них будут преимущества по сравнению с решением FireLion?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 14:35
    #38185657
FireLion
FireLion
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
MaximuS_GВсем спасибо большое! Особенно FireLion за расширенные комментарии.
FireLionотступы создают символы из контейнера
А где прочитать про это можно? Я вбил в google "символы из контейнера", но что-то не получил нужно информации. Может есть правильнее название? Контейнеры шрифта ? Или объясните, пожалуйста, в топике, как они образуются.

называются "отступы между строчными элементами"

MaximuS_Gкак они образуются.

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

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

MaximuS_GЯ так понял, вариант, который Вы предлагаете, заключается в том, что бы сделать общую высоту div.marks равную высоте div.ordinary_passed, и не выравнивать их посредине, а div.ordinary уменьшать по высоте (height: 0.7em;) по сравнению с div.marks и выравнивать по средине с помощью (top: -0.4em;)?
верно. установить общую высоту по высоте максимального блока. а чтоб меньший блок отцентровать по высоте (без таблицы иначе не получится), нужно либо сверху, либо снизу сделать рассчитанный отступ. Я предпочитаю верхний отступ (как распространенная мера борьбы со схлопыванием)

MaximuS_G какие у них будут преимущества по сравнению с решением FireLion?
можно использовать именно центрование по вертикали внутри ячейки, а не рассчитанный отступ сверху. если бы не была фиксированной высота кубика, то таблица была бы единственным решением.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.03.2013, 20:50
    #38186320
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
MaximuS_Gно к сожалению так и не понял, откуда они появились. Вы можете объяснить свой пример?
У тебя строчные элементы разделены <возврат_каретки><перевод_строки>. Получается аналог
Код: html
1.
<p>пример простого текста</p>


или (как в твоём случае)
Код: html
1.
2.
3.
4.
5.
<p>
   пример 
   простого 
   текста
</p>


Т.е. это именно пробелы между "словами"...

MaximuS_Gа какие у них будут преимущества по сравнению с решением FireLion?
Нет никаких танцев с бубнами...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2013, 00:29
    #38186442
MaximuS_G
MaximuS_G
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS - откуда пробелы?
FireLion , krvsa
Спасибо, все понятно кажется! Удачи!)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS - откуда пробелы? / 15 сообщений из 15, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 559ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448587]:
 0ms
get settings:
 8ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 204ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 68ms
get tp. blocked users:
 1ms
others: 238ms
total:  559ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]