Как скрыть элемент css
Перейти к содержимому

Как скрыть элемент css

  • автор:

Как скрыть элемент сайта с помощью CSS?

Здравствуйте уважаемые форумчане! Хочу скрыть элемент сайта (последние статьи), которые сделаны в основном для людей, а не для поисковиков. Не хочу «разбазаривать» вес страниц. Посмотрите на сайт http://seom.info/ Там ПОПУЛЯРНЫЕ СТАТЬИ в исходном коде представлены следующем образом:

Однако в файле стилей я не нашел как это реализовано. Может, кто подскажет как сделать именно таким образом? Заранее большущее спасибо! 💡

Изготовление контентных сателлитов на WordPress — icq 770-25-77
На сайте с 04.02.2005
22 декабря 2011, 11:00
добавьте в css #top10
На сайте с 04.06.2008
22 декабря 2011, 11:35
Chukcha, вы наверно не поняли. Между тегами

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

На сайте с 04.02.2005
22 декабря 2011, 11:39

«чтобы все было. и ничего за это не было» Прочитайте свои посты. Найдите несоответствие. Задайте вопрос.

На сайте с 24.05.2007
22 декабря 2011, 11:45
Как это нет никакого кода? А это что?

olegich1991:
Chukcha, вы наверно не поняли.

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

Вот в чем вопрос.

А закрыть конструкцию в NOINDEX и ссылки в nofollow?

Ничто не пугает нас страшнее всего,как одинокая маленькая девочка в белом платьице холодной осенней ночью на аллее рядом с кладбищем.

Как скрыть элемент на телефоне, а на пк оставить?

У меня есть элемент на странице, который должен отображаться только на компьютерах. Как мне это сделать? Можно ли это реализовать с помощью css @media?

Отслеживать
задан 3 мар 2022 в 13:31
Alexandr_Yakovlev Alexandr_Yakovlev
683 2 2 серебряных знака 13 13 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В Вашем случае Вы можете использовать, к примеру, медиа-запрос и указывать в нем максимальную ширину экрана (в пикселях или, лучше всего, в относительных единицах, типа em ), на которой указанный Вами элемент будет скрываться либо свойством display: none; , либо visibility: hidden; , в зависимости от того, какого эффекта Вам нужно добиться при скрытии элемента.

Размер экрана, который Вы будете считать уже компьютерным, определите сами, но обычно, это минимум 1024px (или 64em) , но лучше будет указать ширину 1200px (или 75em) .

Это может выглядеть примерно так:

.element < display: block; >@media(max-width: 75em) < .element < display: none; >> 

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

.element < display: none; >@media(min-width: 75em) < .element < display: block; >> 

как скрыть элемент в js

Есть несколько способов скрыть элемент на js, основанные на применении стилей. Например, можем задать определенное CSS-правило для атрибута style самого элемента:

  1. Используя display: none
  2. Используя visibility: hidden

Оба эти способа скрывают элемент, но разница в том, что элемент, скрытый с помощью display: none , не занимает места на странице, в отличие от visibility: hidden .

Рассмотрим вариант применения этих стилей, но с использованием имен CSS-классов и методов classList.add() , classList.remove() для их добавления и удаления. Создадим класс с именем hidden, который содержит свойства для скрытия элемента:

.hidden  display: none; > 

Затем, чтобы скрыть элемент с помощью этого класса, добавим его к элементу:

document.getElementById('myElement').classList.add('hidden'); 

Чтобы показать элемент снова, удалим класс:

document.getElementById('myElement').classList.remove('hidden'); 

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

Как скрыть элемент, который не помещается в CSS Grid

Нужно указать сколько строчек вы хотите отобразить(grid-template-rows), я так поняв в вашем случаи только 1. Далее надо указать размер автоматически добавляемых строк равным нулю (grid-auto-rows). Ну и наконец обрезать содержимое по высоте (overflow-y).

Возможно надо добавить row-gap, но это уже зависит от дизайна.

.grid < width: 500px; border: 1px red solid; display: grid; grid-gap: 11px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; grid-auto-rows: 0; overflow-y: hidden; row-gap: 0; >.item
 
1
2
3
4
5

Отслеживать
ответ дан 17 фев 2022 в 19:20
UserTest013 UserTest013
3,801 1 1 золотой знак 10 10 серебряных знаков 17 17 бронзовых знаков

  • css
  • css-grid
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *