slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 19570
Теги: css, display, position, opacity
Верстка

Иногда появляется необходимость скрыть некоторые элементы с сайта (блоки, картинки, div и так далее), либо просто скрыть текст при помощи CSS. Для этого существует несколько различных способов, которые отличаются по эффекту. Далее вы можете узнать о них.

При помощи свойства display

Это наверное самый универсальный и удобный способ. У свойства display может в качестве значения принимать none, именно это значение и скрывает блок со страницы. В том числе так можно скрыть картинки, текст, таблицы и другие.

CSS код для div, который мы хотим полностью убрать со страницы:

div {display:none;} /* говорит браузеру, что этот элемент не нужно отображать на странице */

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

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

При помощи свойств position и left/right/top/bottom

Суть состоит  в том, что свойству position задается absolute, т.е. абсолютное позиционирование, которое позволяет убрать эффект присутствия элемента на странице - другие элементы его игнорируют. А потом при помощи left/right/top/bottom убрать его за пределы страницы.

CSS код для div, который мы хотим полностью убрать со страницы:

div {
      position:absolute; /* позиционируем блок абсолютно на странице */
      top:-9999px; /* при помощи отрицательного значения убираем блок высоко вверх */
}

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

Когда стоит использовать? Дело в том, что физически элемент остается на странице, просто пользователи его не видят, а вот различные поисковики, анализаторы страниц видят и можно использовать его для них.

При помощи свойства opacity

Свойство opacity задает прозрачность блока, задав в качестве значения 0, получится, что элемент скроется со страницы, но его физическое местоположение останется. Добавив position: absolute; полностью уберет и физическое положение элемента на странице.

CSS код для div, который мы хотим полностью убрать со страницы:

div {
      opacity:0; /* делает элемент полностью прозрачным */
}

Какой эффект он производит? Скрывает блоки, текст со страницы для глаз пользователей, но для других элементов блок и текст на месте.

Когда стоит использовать? Если вы хотите, чтобы текст (или элементы) появлялись при наведении на них.

Комментарии   

+1 # Пётр 03.07.2015 12:46
"а вот различные поисковики, анализаторы страниц видят и можно использовать его для них"

добрый день. беда в том, что в поиск скрытые части текста не попадают. на нескольких сайтах использовали подобное скрытие. часть текста из скрытого блока вставляешь в поиск - не выдаётся.
Ответить | Ответить с цитатой | Цитировать
+1 # Администратор 03.07.2015 16:00
А через какой способ вы это делали?
Может с поисковиками ситуация уже изменилась.
А вот анализаторы - счетчики и т.д. спокойной скрывал в одном из последних проектов, по 2 способу и они работают корректно.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

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

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 1380
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

форма на DataLife Engine 1 день 8 ч. назад
synt аватар
Здравствуйте! Подскажите модуль или решение для создания сложных форм с капчей и возможностью задава...
Перейти в тему
Frontend Разработчик, Москва 1 мес. 3 нед. назад
porohinaio@mail.ru аватар
INMYROOM это контентный проект про интерьеры и маркетплейс дизайнерской мебели с посещаемостью более...
Перейти в тему
anzhelika_bell аватар
Обязанности: Верстка web-интерфейсов по готовым макетам, исправление дефектов верстки. Требования: ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.