Задача по CSS

psywalker · October 27, 2011

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

Дано:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Задачка по CSS</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	.nav { list-style: none;}
		.nav > li { 
			display: inline-block; 
			width: 100px; 
			border: 1px solid #000;
			vertical-align: top;
		}
</style>

</head>

<body>

	<ul class="nav">
		<li>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
		</li>
		<li>Пункт 2</li>
		<li>Пункт 3</li>
		<li>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
		</li>
		<li>Пункт 5</li>
	</ul>
</body>
</html>

Задача:

Нужно, чтобы при сужении экрана, не помещающиеся пункты меню, как и сейчас, переходили на другую строку, НО только те, которые перешли - должны исчезать, так же, как и с помощью oveflow : hidden; Т.е. нужно, чтобы по сути у нас была одна строка пунктов, верхняя, а все остальные пункты, которые переходили на следующую (в связи с нехваткой места) - обрезались.

Да, кажется легко, скажите вы. "Поставь oveflow : hidden; + нужную высоту и будет тебе счастье". Но в том-то и дело, что высота пунктов должна учитываться, т.е. фиксированную я задать не могу, а в пунктах может быть очень много материала.

Возможно ли такое сделать на чистом CSS, и если да, то интересуют любые варианты.

http://jsfiddle.net/wsWtf/

hedgehog · October 27, 2011

не уверен, что до конца правильно понял задачу... с ul {float: left} они кое-как переносятся, но врядли то то, что нужно...

SelenIT · October 27, 2011

Моей извращенной фантазии пока хватило лишь на такое, но, увы, ожидаемым образом оно работает только в IE9 (в IE8 — не скрывает, в Опере — скрывает текст, но оставляет блоки, в Хроме — показывает пустую рамку вообще без текста, а в FF вообще глючит по-невообразимому). Просто "пропадание" блоков еще можно сымитировать как-то так, но вот как быть с высотой контейнера...

psywalker · October 28, 2011

hedgehog,

не уверен, что до конца правильно понял задачу... с ul {float: left} они кое-как переносятся, но врядли то то, что нужно...

Да можно использовать любые методы (float: left, inline-block, или ещё чё нить, пофиг), лишь бы был результат.

SelenIT,

К сожалению первый вариант не подходит, косячный. И второй к сожалению тоже, потому что при переходе на другую строку - высота списка увеличивается, а нужно, чтобы она оставалась такой же, как самый высокий пункт в первой строке (верхней) :facepalmxd:

Но всё равно, спасибо за помощь, и тогда уж помучаю заодно:

Что происходит в этом примере, когда ты делаешь margin-left: -1000%; text-indent: 1000%;? И за счёт чего нижние элементы исчезают? :unsure:

SelenIT · October 28, 2011

Они не исчезают, а просто тупо прячутся за левую границу окна (блок как бы расширяется в 11 раз и 10/11 его ширины туда уходит), а первая строчка возвращается в видимую область отступом. Проценты тут, конечно, неоптимальны, это я от бессонницы нахимичил, лучше было бы что-то типа 30000px (поближе к оперному лимиту общей ширины в 32k px, но с небольшим запасом). И то сильная завязка на то, что пунктов мало и невидимая часть второй строки не заполнится. Впрочем, решения на этом пути найти так и не удалось, [censored] высота строки никак не поддается дрессировке, а с отрицательным маргином для li теряется связь с высотой контейнера

Первый вариант, на мой взгляд — близкое к максимальному приближение к решению по букве и духу спеки (самый "лобовой" способ отделить первую строку от других плюс разрешенные для :first-line приемы). И пример IE9 (да и FF8 в статике) показывает, что "в принципе" это может работать. Но для др. браузеров, видимо, это слишком сложно...

DjTarik · October 28, 2011

А white-space + height + overflow разве не поможет?

Не, не поможет) недочитал задание... =(

Edited October 28, 2011 by DjTarik

Great Rash · October 28, 2011

Без JS задачу не решить, смирись

paracelso · October 28, 2011

По-моему, решение есть, но не очень кошерное. Делай общий контейнер с дублированным содержанием каждого ul, в css пишем у ul: margin-right:-100px; visibility:hidden; overflow: hidden.

Таким образом, получаем фиксированную относительно видимых ul высоту общего контейнера. Далее - по той же схеме, но с одним исправлением: высоту видимых ul ставим на 100%, и при переносе они исчезнут.

Будет время - напишу и проверю.

Пояснение: подобную обрезку, на мой взгляд, без общего контейнера мы не сделаем, т.к. надо урезать аттрибуты переносимых списков. Выходит, надо получить внешний контейнер с заданой высотой. Заданая высота без js будет только при дублировании содержимого. Поправьте, если ошибся. Кошерно будет только с js.

Edited October 28, 2011 by paracelso

paracelso · October 28, 2011

Вот. Edited October 28, 2011 by paracelso

Great Rash · October 28, 2011

Вот.

Это не решение. Прочитайте еще раз первый пост внимательно.

psywalker · October 28, 2011

Они не исчезают, а просто тупо прячутся за левую границу окна (блок как бы расширяется в 11 раз и 10/11 его ширины туда уходит), а первая строчка возвращается в видимую область отступом. Проценты тут, конечно, неоптимальны, это я от бессонницы нахимичил, лучше было бы что-то типа 30000px (поближе к оперному лимиту общей ширины в 32k px, но с небольшим запасом). И то сильная завязка на то, что пунктов мало и невидимая часть второй строки не заполнится. Впрочем, решения на этом пути найти так и не удалось, [censored] высота строки никак не поддается дрессировке, а с отрицательным маргином для li теряется связь с высотой контейнера Первый вариант, на мой взгляд — близкое к максимальному приближение к решению по букве и духу спеки (самый "лобовой" способ отделить первую строку от других плюс разрешенные для :first-line приемы). И пример IE9 (да и FF8 в статике) показывает, что "в принципе" это может работать. Но для др. браузеров, видимо, это слишком сложно...

Ага, понял тебе, дружище. Спасибо за решения. Значит видимо без ЖС тут действительно не обойтись.

Без JS задачу не решить, смирись

Ну всё, теперь я точно в этом уверен :facepalmxd:

По-моему, решение есть, но не очень кошерное. Делай общий контейнер с дублированным содержанием каждого ul, в css пишем у ul: margin-right:-100px; visibility:hidden; overflow: hidden.Таким образом, получаем фиксированную относительно видимых ul высоту общего контейнера. Далее - по той же схеме, но с одним исправлением: высоту видимых ul ставим на 100%, и при переносе они исчезнут.Будет время - напишу и проверю.Пояснение: подобную обрезку, на мой взгляд, без общего контейнера мы не сделаем, т.к. надо урезать аттрибуты переносимых списков. Выходит, надо получить внешний контейнер с заданой высотой. Заданая высота без js будет только при дублировании содержимого. Поправьте, если ошибся. Кошерно будет только с js.

Спасибо за идею, жаль, что не подошло)

paracelso · October 28, 2011

Это не решение. Прочитайте еще раз первый пост внимательно

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

Поясни, почему это не решение.

Псай, чем именно не удовлетворило?

psywalker · October 28, 2011

Псай, чем именно не удовлетворило?

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

Покажи полноценное решение всех проблем.

paracelso · October 28, 2011

Понимаю. У меня тут кстати всегда вопрос назревал, заодно и задам. Какие негативные стороны абсолютного позиционирования основной части сайта?

Если не затрагивать сторону медали с "ну, блоки не будут автоматически упорядочиваться" и прочие спорные моменты вопроса, а обсуждать именно теоретическую часть стандартов, что абсолютка может за собой повлечь?

test11 · October 28, 2011

Понимаю. У меня тут кстати всегда вопрос назревал, заодно и задам. Какие негативные стороны абсолютного позиционирования основной части сайта?
Если не затрагивать сторону медали с "ну, блоки не будут автоматически упорядочиваться" и прочие спорные моменты вопроса, а обсуждать именно теоретическую часть стандартов, что абсолютка может за собой повлечь?

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

Так что "Плохое позиционирование" - это и есть то, когда ты его используешь не там, где нужно.

paracelso · October 29, 2011

Из всей кучи слов, написанных с целью показаться значительнее, нельзя ли что-то кроме фиксированной высоты выделить?

Keep it real, будьте проще. Русский красив тогда, когда не пытаешься в предложение впихнуть десять лишних слов с целью удовлетворить возможные отклонения читателя.

Nekromancer · October 29, 2011

По моему всё чаще и чаще начинают на форуме нести бред ...

psywalker · October 30, 2011

Из всей кучи слов, написанных с целью показаться значительнее, нельзя ли что-то кроме фиксированной высоты выделить?
Keep it real, будьте проще. Русский красив тогда, когда не пытаешься в предложение впихнуть десять лишних слов с целью удовлетворить возможные отклонения читателя.

Не понял тебя? Я разве что-то не так объяснил?

paracelso · October 30, 2011

Нет-нет, псай, всё отлично. Я ленюсь помечать, кому я пишу. Писал я test11.

psywalker · October 31, 2011

Нет-нет, псай, всё отлично. Я ленюсь помечать, кому я пишу. Писал я test11.

А он плохо разве ответил?

paracelso · October 31, 2011

Да, он ответил плохо.

psywalker · October 31, 2011

Да, он ответил плохо.

А по моему он ответил по существу и правильно.

amelice · November 1, 2011

Они не исчезают, а просто тупо прячутся за левую границу окна (блок как бы расширяется в 11 раз и 10/11 его ширины туда уходит), а первая строчка возвращается в видимую область отступом. Проценты тут, конечно, неоптимальны, это я от бессонницы нахимичил, лучше было бы что-то типа 30000px (поближе к оперному лимиту общей ширины в 32k px, но с небольшим запасом). И то сильная завязка на то, что пунктов мало и невидимая часть второй строки не заполнится. Впрочем, решения на этом пути найти так и не удалось, [censored] высота строки никак не поддается дрессировке, а с отрицательным маргином для li теряется связь с высотой контейнера
Первый вариант, на мой взгляд — близкое к максимальному приближение к решению по букве и духу спеки (самый "лобовой" способ отделить первую строку от других плюс разрешенные для :first-line приемы). И пример IE9 (да и FF8 в статике) показывает, что "в принципе" это может работать. Но для др. браузеров, видимо, это слишком сложно...

Selenit, я пытаюсь понять твое решение. Можешь меня поправить? :unsure:


 margin-left: -1000%;
 text-indent: 1000%;

Ты увеличил nav, но первую строку вернул на место. а вот этим text-indent: 0; ты просто убрал наследование? Когда окно сужается, элементы уходят за пределы левого края окна? Но, так как высоту регулировать не получилось, то высота nav увеличивается?

psywalker · November 1, 2011

cheburek,

margin-left: -1000%;
text-indent: 1000%;
Ты увеличил nav, но первую строку вернул на место. а вот этим text-indent: 0; ты просто убрал наследование? Когда окно сужается, элементы уходят за пределы левого края окна? Но, так как высоту регулировать не получилось, то высота nav увеличивается?

Чинар, я кажись понял, как это работает.

Смотри, мы изначально сдвигаем весь список влево, а потом возвращаем обратно только первую строку, т.е. верхний ряд. Так как text-indent действует только для первой строки)

amelice · November 1, 2011

cheburek,
margin-left: -1000%;
text-indent: 1000%;
Ты увеличил nav, но первую строку вернул на место. а вот этим text-indent: 0; ты просто убрал наследование? Когда окно сужается, элементы уходят за пределы левого края окна? Но, так как высоту регулировать не получилось, то высота nav увеличивается?
Чинар, я кажись понял, как это работает.
Смотри, мы изначально сдвигаем весь список влево, а потом возвращаем обратно только первую строку, т.е. верхний ряд. Так как text-indent действует только для первой строки)

Я тоже так и поняла. Так как все остальные элементы в списке за "первой строкой", они расположились в ряд за ней. а так как text-indent наследуемый, назначив ему 0 убирается наследование элементов списка?

Теперь осенило. Точно, мы же их превратили в строчно-блочные элементы. Поэтому задав text-indent:1000% мы возвращаем первую строку, то есть "верхний ряд".

Edited November 1, 2011 by cheburek

psywalker · November 1, 2011

cheburek,
margin-left: -1000%;
text-indent: 1000%;
Ты увеличил nav, но первую строку вернул на место. а вот этим text-indent: 0; ты просто убрал наследование? Когда окно сужается, элементы уходят за пределы левого края окна? Но, так как высоту регулировать не получилось, то высота nav увеличивается?
Чинар, я кажись понял, как это работает.
Смотри, мы изначально сдвигаем весь список влево, а потом возвращаем обратно только первую строку, т.е. верхний ряд. Так как text-indent действует только для первой строки)
Я тоже так и поняла. Так как все остальные элементы в списке за "первой строкой", они расположились в ряд за ней. а так как text-indent наследуемый, назначив ему 0 убирается наследование элементов списка?
Теперь осенило. Точно, мы же их превратили в строчно-блочные элементы. Поэтому задав text-indent:1000% мы возвращаем первую строку, то есть "верхний ряд".

Ога)

Sign In

Задача по CSS

Question

Link to comment

Share on other sites

26 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