Как поднять изображение вверх css
Перейти к содержимому

Как поднять изображение вверх css

  • автор:

Как поднять картинку вверх?

joeberetta

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

AppAlex @AppAlex Автор вопроса

Дмитрий, ну не ругайся. Тупанул

5e60f394661bf514645498.png

Решения вопроса 1

lie2

Можно и такой код прописать в div картинки:

НО смотря чего Вы хотите добиться.
Вообще мне хочется предложить её добавить к фону, либо подгрузить к фону.
Тут же можно поработать с index.
Так что опиши свои желания.

Ответ написан более трёх лет назад
AppAlex @AppAlex Автор вопроса

 

Если так, то никаких движений нет

lie2

AppAlex, Есть) там каждый % влияет) вот код в див:
Ответы на вопрос 2

Seasle

5e60f24543625751237086.png

Просто оставлю это здесь.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

ThunderCat

ThunderCat @ThunderCat Куратор тега HTML

5e60f72de9b88516653846.png

AppAlex, У тебя картинка в одном блоке с надписью, которая неверно сверстана (должна вместе с верхней надписью быть в кол-6 и разбита уже там на роу-кол-12). Тогда в правом кол-6 будет твоя картинка, и там уже можно как хочешь нормально позиционировать.

как поднять элемент выше?

введите сюда описание изображения

элемент «video» ниже, чем надо. Выровнять с помощью padding и margin не вышло. Как выровнять элемент выше?

Отслеживать
задан 11 авг 2020 в 15:01
33 1 1 серебряный знак 4 4 бронзовых знака

1 ответ 1

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

а как надо? Рисунок в студию.

паддингами вы его не выравняете, т.к. паддинги — это отступы ВНУТРИ него.

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

float тут в принципе лишний.

а еще есть свойство transform:translate(x,y) . Попробуйте его.

Отслеживать
ответ дан 11 авг 2020 в 15:13
Инквизитор Инквизитор
5,945 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков

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

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

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

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

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

Как поднять кнопочку со ссылкой вверх при помощи css?

Как поднять кнопочку со ссылкой вверх при помощи css?

Спасибо за ответ. Прописал ниже, все равно, кэш не хочет работать. Дело в том что в dle15 работало все нормально.

dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
14-02-2024, 16:21

$tpl->clear();

я думаю должен быть ниже create_cache
dj-avtosh | Яндекс начал мудрить с заголовками якобы . 5

Фото dj-avtosh

dj-avtosh
Яндекс начал мудрить с заголовками якобы MySQL Fatal Error, что за ерунда?
14-02-2024, 16:10

Через сохраненную копию можно посмотреть и тело ошибки
Апельсин | Яндекс начал мудрить с заголовками якобы . 5

Апельсин
Яндекс начал мудрить с заголовками якобы MySQL Fatal Error, что за ерунда?
12-02-2024, 03:11

Падает сервер. Вот и вся проблема.

  • Перенести категории из правого бл… 1
  • Dle Профиль сделать 3
  • Адаптация для ДЛЕ 17 Мультивыбор … 5
  • Перенести функцию из загрузчика ф… 2
  • Добавление мерчанта (платежной си… 2
  • Куплю модуль «парсер актеров… 1
  • Cоздание сайтов (DLE) на тематику… 2
  • Настроить модуль WebShop 1
  • Доп. поле с выбором вариантов мет… 2
  • Вывод fullstory на главной страни… 6
  • Создание простого сайта отзывов (… 0
  • Кастомные стикер/смайлы для комме… 0
  • Бесконечная подгрузка полной ново… 0
  • Запоминание открытой вкладки и со… 0
  • Авторизация пользователей через Т… 0
  • GeoIP — показ информации в зависи… 0
  • Push-уведомление через OneSignal.… 0
  • Giphy for comments (TinyMCE) 4
  • Множественные опросы — модуль Mul… 0
  • Расширенные закладки 0

Правильный путь к изображению в CSS: решение ошибок

Чтобы установить фоновое изображение, используйте свойство background-image с функцией url() . Учитывайте, что пути интерпретируются относительно расположения вашего стилевого файла или HTML-документа. Обязательно правильно указывайте имя файла и его расширение, а также путь к директории.

Понимание ссылок на пути

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

Относительный путь: Возвращаемся к основам

Для перемещения между каталогами используйте ../ , чтобы подняться на уровень вверх, и ../../ , чтобы подняться на два уровня в иерархии от вашего CSS-файла.

Скопировать код

/* Поднимаемся на одну директорию выше и находим изображение! */ background-image: url('../images/puppy.jpg');

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

Корневые относительные пути: Ваша навигационная звезда

Начиная с / , корневые относительные пути позволяют оставаться консистентными независимо от местоположения файла CSS, всегда ведя к корневому каталогу сайта.

Скопировать код

/* Независимо от нашей "корневой позиции", мы всегда найдем изображение */ background-image: url('/images/sunshine.jpg');

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

Станьте детективом в поисках путей

Обязательно проверяйте имена файлов: спеллинг и регистр — важные детали. Используйте слеш / , даже если операционная система использует другие символы. Вот несколько ключевых аспектов:

  • Точность имен директорий и файлов, включая их расширения
  • Корректное написание и учет регистра
  • Правильное связывание файла стилей с HTML-документом

Лучшие советы

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

Проверка в браузере

Не уверены в правильности пути? Проверьте его прямо в адресной строке браузера.

Встроенный CSS: Наставник по путям

Встроенный CSS предоставляет возможность экспериментировать с путями прямо в HTML-документе:

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

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