h1 и скрытие текста

[param]

Здравствуйте.

Хочу поставить лого в заголовок H1. При этом написать в него текстовую версию логотипа. Встал вопрос как лучше скрыть этот текст, я думал visibility:hidden, но не знаю будут ли его индексировать поисковики и как они вообще относятся к данному правилу?

[sammasati]

Для этих целей используют text-indent с большим значением.

[param]

<h1 id="logo">
		  <div id="top_left"><a href="/"><img src="/" width="800" height="145" alt=""></a></div><span id="text_logo">Какой-то текст</span>
        </h1>

#text_logo{
	text-indent:10000px;
}

Вот так вот?

[SelenIT]

Для этого используют много способов (и это далеко не всё). Вариант с огромным отрицательным text-indent'ом, имхо, один из самых неудачных (т.е. с ним нельзя прочитать ничего, если картинки отключены/не догрузились, он противно распирает рамку нажатых ссылок в FF и т.д.).

[sammasati]

Да, только span нужно поменять на p.

[param]

Да действительно методов много, воспользовался первым. Структура простая и всё работает. Спасибо!

[param]

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

[psywalker]

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

Покажи на скриншотах что ты хочешь получить и что не получается. И опиши ситуацию.

[mishka]

Вариант с огромным отрицательным text-indent'ом, имхо, один из самых неудачных (т.е. с ним нельзя прочитать ничего, если картинки отключены/не догрузились, он противно распирает рамку нажатых ссылок в FF и т.д.).

рамка элементарно убирается overflow: hidden;

И как скажешь поступить если картинка png полупрозрачная?

[SelenIT]

Любым другим способом из over 9000. Мне ближе всего этот (да, в примерах там используется text-indent в качестве фоллбэка для IE6-7 — но сейчас уже вполне можно от этого отказаться, пусть IE6-7 довольствуются простым текстом, как при отключенной графике).

Вариант с text-indent для меня прочно стоит в одном ряду с табличной версткой. В качестве грубого и быстрого решения маловажной задачи (какая-нибудь вспомогательная плашка в сайдбаре и т.п.) — годится. Но основная верстка не должна падать в обморок от отключения графики, а основной текст (тем паче заголовок!) должен читаться при любом раскладе. Для контента, верстаемого с любовью, всегда можно выбрать способ получше...

[param]

Суть в том, что второй ДИВ не становится там где надо, из-за того, что от заголовка создаётся текстовая строка.

[cyklop77]

позишн: абсолют тебе в помощь

Edited January 20, 2012 by cyklop77

[param]

cyklop77 спасибо!

Edited January 20, 2012 by param

[param]

Решил сюда же спросить, дабы не создавать новую тему, к тому же вопрос также связан с заголовками. На странице несколько заголовков h2, типа "Меню" или "Новости", под текстовой надписью, должна быть полоска-узор, при этом её длина должна изменяться в зависимости от длины слова. Попробовал поставить её как бэкграунд, к h2, но такой вариант не работает, так как полоска не встаёт непосредственно под словом, да и с управлением размером тоже плохо. Можно конечно загнать полоски в каждый свой див, но надо будет менять длину полоски вручную, в зависимости от слова, а если при этом слова будут периодически меняться, то получается много волокиты. Может какие то ещё есть варианты?

Edited January 20, 2012 by param

[sammasati]

Обернуть текст в заголовке ещё и в span и применять стиль полоски к нему.

[param]

sammasati Хорошее решение.

Edited January 22, 2012 by param