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

beliy · October 17, 2012

Уважаемые Гуру форума, как всегда спешу порадовать своей проблемкой и надеюсь на помощь в ее решении...

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

Проблема наглядно:

Скрин как должно быть
Пример где 3 и более заголовка
Пример где менее чем 3 заголовка
Скрин где видно, что не пропадает даже если ставлю просто
```
background: #FFFFFF;
```
, а сделать нужно еще тени и округлости, которые корректно получаются только картинками на background

Заранее спасибо за любую помощь...

SelenIT · October 17, 2012

Для новых браузеров (IE9+) получается так. Приходится указать общий класс заголовкам и этому блочку, чтобы nth-last-of-type мог посчитать их вместе. В старых браузерах типа IE8 блочок будет всегда виден — имхо, вполне "изящная деградация". Ну и красивых закруглений/теней в старых не будет...

Заблуждался. Приношу извинения.

Edited October 19, 2012 by SelenIT

beliy · October 18, 2012

2 SelenIT

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

class="counted"

то выпадает весь блок...

SelenIT · October 19, 2012

Оказывается, я неправильно представлял себе работу :nth-last-of-type(). Прошу прощения, что невольно ввел в заблуждение, в котором пребывал сам.

Тогда, боюсь, на чистом CSS пока никак не сделать. Только скрипты...

ils · October 19, 2012

Как-то так:


<!doctype html>
<html>
	<head>
		<title>Page</title>
		<style>
			#toc {
				display: none;
			}
		</style>
		<script>
			window.onload = function() {
				var counter = 0;
				var cn = document.getElementById('content').childNodes;
				for (var i = 0; i < cn.length; i++) {
					if (cn[i].nodeName == 'H1') counter++;
				}
				if (counter > 3) document.getElementById('toc').style.display = 'block';
			}
		</script>
	</head>
	<body>
		<div id="toc">
			Содержание
		</div>
		<div id="content">
			<h1>Заголовок 1</h1>
			<h1>Заголовок 2</h1>
			<h1>Заголовок 3</h1>
			<h1>Заголовок 4</h1>
		</div>
	</body>
</html>

Или такое извращение (но без JS):


<!doctype html>
<html>
	<head>
		<title>Page</title>
		<style>
			#toc {
				display: none;
			}
			h1 + h1 + h1 + h1 + #toc {
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<h1>Заголовок 1</h1>
			<h1>Заголовок 2</h1>
			<h1>Заголовок 3</h1>
			<h1>Заголовок 4</h1>
			<div id="toc">
				Содержание
			</div>
		</div>
	</body>
</html>

Edited October 19, 2012 by ils

sigma77 · October 19, 2012

beliy,

А есть возможность сместить блок с содержанием по коду вниз?

Тогда бы можно было сделать так - http://jsfiddle.net/GYMfH/

Или менее кроссбраузерно, но более изящно - http://jsfiddle.net/GYMfH/1/

beliy · October 22, 2012

Всем спасибо за советы. Таки получилось домучать экспериментальным путем, взяв за основу идею SelenIT.

P.S. Уважаемые модераторы, а что с возможностью ставить благодарности? Пишет о том что превышен лимит...

Edited October 22, 2012 by beliy

sigma77 · October 22, 2012

P.S. Уважаемые модераторы, а что с возможностью ставить благодарности? Пишет о том что превышен лимит...

А правила при регистрации читали?

beliy · October 22, 2012

P.S. Уважаемые модераторы, а что с возможностью ставить благодарности? Пишет о том что превышен лимит...
А правила при регистрации читали?

А кто их когда читает

Хотя неплохо было бы указать после скольки сообщений Новичок становится Пользователем...

Edited October 22, 2012 by beliy

Sign In

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

Question

beliy

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

beliy

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

ils

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

beliy

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

beliy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information