Изменение стиля маркера.

[Webkit]

Добрый день!

Как сделать так чтобы элемент #div_after шел после содержимого элемента #div с фиксированной высотой?

<style>
#div {
	background: #fcc;
	height: 10px;
}
#div_after {
	background: #ccf;
	height: 10px;
}
</style>
<div id="div">1<br/>2</div>
<div id="div_after">3</div>

Как должно быть и как есть:

Решение тут.

Проблема подробнее:

Пытаюсь контролировать стиль маркера не через картинку или свойство list-style, а через css свойства height, width, background, и т.п.

Одна проблема: при переносе строки во вложенном в список элементе div (можно использовать другой, к примеру span), эти строки загораживают следующий элемент т.е. следующий элемент li идет так словно предыдущий занимает одну строку.

Как сделать так, чтобы элемент li шел после последней строки элемента div, вложенного в предыдущий элемент li.

Использование :before не подходит. Помогите решить пожалуйста.

<style>
ul {
	background: #f99;
	padding: 0;
}
li {
	margin-bottom: 24px;
	background: #9f9;
	list-style: none;
	display: block;
	height: 6px;
	width: 6px;
}
div {
	margin-left: 18px;
	background: #99f;
}
</style>
<ul>
	<li><div>1<br/>2<br/>3</div></li>
	<li><div>a<br/>b</div></li>
	<li><div>A</div></li>
</ul>

Edited March 28, 2012 by Webkit

[alexandr_v-vich]

Ну и извращение))

Если хотите, можете увеличить margin-botom. До 55, например. - это вам нужно?

[Webkit]

Ну и извращение))

Если хотите, можете увеличить margin-botom. До 55, например. - это вам нужно?

И для каждого элемента li, отличающегося количеством строк (высотой), устанавливать свой margin-botom? - Тоже извращение. =)

Edited March 28, 2012 by Webkit

[NeoXidizer]

line-height?

[Webkit]

line-height?

Не, не подходит. Устанавливать для каждого элемента li разный line-height...

[alexandr_v-vich]

Webkit, Вы не поняли. Это не решения не подходят. Это пример такой))))

Другого варианта нет. Здесь само задание у вас противоречивое.

Если хотите маркеры не через list-style, используйте хотя бы ":before"

Edited March 28, 2012 by alexandr_v-vich

[Webkit]

Webkit, Вы не поняли. Это не решения не подходят. Это пример такой))))

Другого варианта нет. Здесь вашего задания противоречивая.

Если хотите маркеры не через list-style, используйте хотя бы ":before"

:before не хочу исользовать т.к. для ie до 8 версии не работает.

Может решение в свойстве display, только какое значение для какого элемента ставить?

Edited March 28, 2012 by Webkit

[alexandr_v-vich]

Webkit, Вы понимаете, что вы требуете?

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

При таком раскладе, я думаю вам нужно что-то типа добавлять в каждый li дополнительный элемент и делать его маркером...а такие стили стереть)

Типа этого, чтоли - http://jsfiddle.net/khnMm/15/ (Переделал ваш див тот, что в Ли был, не знаю, нужен ли он вам)

отпозиционировать только под ваши нужды

Edited March 28, 2012 by alexandr_v-vich

[Webkit]

Webkit, Вы понимаете, что вы требуете?

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

При таком раскладе, я думаю вам нужно что-то типа добавлять в каждый li дополнительный элемент и делать его маркером...а такие стили стереть)

Типа этого, чтоли - http://jsfiddle.net/khnMm/15/ (Переделал ваш див тот, что в Ли был, не знаю, нужен ли он вам)

отпозиционировать только под ваши нужды

Ладно, спасибо. Наверно буду использовать :before.

Пользовался бы свойством list-style: square; просто в разных браузерах размер стороны квадрата разный (к примеру firefox и opera). А мне нужен был размер везде 6px или 0.375em от 12pt (16px) для зависимости размера маркера от размера шрифта.

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

Что-то примерно такое и хотел, в том как это сделать и заключается вопрос. Если найдется способ, то мне будет очень удобно. JS не хочу...

Возможно лучше будет сформулировать задачу так - как сделать так чтобы элемент #div_after шел после содержимого элемента #div с фиксированной высотой?

<style>
#div {
	background: #fcc;
	height: 10px;
}
#div_after {
	background: #ccf;
	height: 10px;
}
</style>
<div id="div">1<br/>2</div>
<div id="div_after">3</div>

Как должно быть и как есть:

Edited March 28, 2012 by Webkit

[alexandr_v-vich]

Если найдется способ, то мне будет очень удобно.

Я думаю не только вам

[psywalker]

Webkit, А ты можешь показать скриншоты с разными вариантами, как должно быть вначале и потом.

[Webkit]

Webkit, А ты можешь показать скриншоты с разными вариантами, как должно быть вначале и потом.

Как должно быть и как есть:

Edited March 28, 2012 by Webkit

[alexandr_v-vich]

Webkit, А почему вам мой вариант не подошёл?

[Alma]

Пользовался бы свойством list-style: square; просто в разных браузерах размер стороны квадрата разный (к примеру firefox и opera). А мне нужен был размер везде 6px или 0.375em от 12pt (16px) для зависимости размера маркера от размера шрифта.

а нарисовать квадратик и на фон его положить?

или действительно, как alexandr_v-vich предложил?

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

или объяснить не получается у вас...

[Webkit]

Webkit, А почему вам мой вариант не подошёл?

Я уже думал о том чтобы добавить в элемент списка li пустой элемент для использования его вместо маркера, но тогда мне это показалось как-то неправильно (не эстетично). Лучше я буду использовать :before. Сейчас меня больше интересует второй вопрос (первый вопрос в первом посте).

Пользовался бы свойством list-style: square; просто в разных браузерах размер стороны квадрата разный (к примеру firefox и opera). А мне нужен был размер везде 6px или 0.375em от 12pt (16px) для зависимости размера маркера от размера шрифта.

а нарисовать квадратик и на фон его положить?

или действительно, как alexandr_v-vich предложил?

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

или объяснить не получается у вас...

Я делаю разметку для написания мелких статей (на любую тему) и прочего. Не повторяющуюся картинку, как фон для элемента списка, уже использовал, но вариант не подошел т.к. нужно было что бы размер маркера менялся в зависимости от размера шрифта 0.375em от 12pt (16px) обычно это 6px (для 18pt это уже 9px).

В общем ищу ответ на другой вопрос, он сформулирован в начале первого поста.

Edited March 28, 2012 by Webkit

[alexandr_v-vich]

Webkit, задачу расширяйте. Так из положения вы не выйдете...

[JIyHa]

как сделать так чтобы элемент #div_after шел после содержимого элемента #div с фиксированной высотой?

<style>
#div {
	background: #fcc;
	height: 10px;
}
#div_after {
	background: #ccf;
	height: 10px;
}
</style>
<div id="div">1<br/>2</div>
<div id="div_after">3</div>

Как должно быть и как есть:

Webkit, дело в том, что у вас и так #div_after идёт после содержимого элемента #div с фиксированной высотой, а цифра "2" просто вываливается из элемента с фиксированной высотой, хотя цифра "3" идет как раз там где вы задали, как вариант задайте #div overflow:hidden и лишнее из этого тега выпадать не будет, но и видно не будет, а чтобы цифра "3" шла после цифры "2" нужно отказаться от фиксированной высоты, возможен вариант с фоном (для IE7 можно будет pie добавить, чтобы работало)

<style type="text/css">
#div {
	background: -moz-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: -webkit-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: -о-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: -ms-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	min-height: 10px;
	}
#div_after {
	background: #ccf;
	height: 10px;
}
</style>
<div id="div">1<br/>2</div>
<div id="div_after">3</div>

Edited March 28, 2012 by JIyHa

[Webkit]

как сделать так чтобы элемент #div_after шел после содержимого элемента #div с фиксированной высотой?

<style>
#div {
	background: #fcc;
	height: 10px;
}
#div_after {
	background: #ccf;
	height: 10px;
}
</style>
<div id="div">1<br/>2</div>
<div id="div_after">3</div>

Как должно быть и как есть:

Webkit, дело в том, что у вас и так #div_after идёт после содержимого элемента #div с фиксированной высотой, а цифра "2" просто вываливается из элемента с фиксированной высотой, хотя цифра "3" идет как раз там где вы задали, как вариант задайте #div overflow:hidden и лишнее из этого тега выпадать не будет, но и видно не будет, а чтобы цифра "3" шла после цифры "2" нужно отказаться от фиксированной высоты, возможен вариант с фоном (для IE7 можно будет pie добавить, чтобы работало)

<style type="text/css">
#div {
	background: -moz-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: -webkit-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: -о-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: -ms-linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	background: linear-gradient(top, #fcc 0%, #fcc 30%, #fff 30%, #fff 100%);
	min-height: 10px;
	}
#div_after {
	background: #ccf;
	height: 10px;
}
</style>
<div id="div">1<br/>2</div>
<div id="div_after">3</div>

Это всё понятно, но фон тут мне не фон важен, а расположение элементов. Мне нужно что бы положение элемента #div_after зависело от положения (от высоты) элемента #inner, вложеного в элемент #div. Вот тут пример получше описал.

Edited March 28, 2012 by Webkit

[Webkit]

Решение тут.

[NeoXidizer]

а всего лишь нужно было правильно задать вопрос

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

в любом случае, не за что

[Webkit]

а всего лишь нужно было правильно задать вопрос

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

в любом случае, не за что

Ещё раз спасибо. А как решение нашел? Об этом нигде не написано?

Edited March 28, 2012 by Webkit

[NeoXidizer]

Просто опыт. Видно, что согласно "макету", один блочный элемент должен быть прижат к левому краю и на него не должны заступать другие элементы - float:left

а затем фикс, чтобы float:left сбрасывался для последующего элемента - clear:both, в итоге блочные элементы не лезут на друг-друга и расположены так, как нужно