На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> границы сдвига элементов при изменении размеров страницы (css)
    Всем привет
    У меня вопрос - можно ли только с помощью css и html тегов (без привлечения JS) реализовать следующую вещь:

    есть 2 элемента -


    один всегда находится слева сверху страницы

    ExpandedWrap disabled
      img.corner_lt {
          width:              200px;
          border:             0px;
          display:            block;
          position:           absolute;
          left:               10px;
          top:                10px;
          z-index:            1000;
      }


    второй - сверху по центру экрана (div в котором находится текст)

    ExpandedWrap disabled
      div.menu {
          width:              100%;
          height:             30px;
          padding:            15px 0px 15px 0px;
          border-style:       none;
          display:            block;
          position:           absolute;  
          text-align:         center;
      }


    Когда окно браузера начинает уменьшаться (по ширине), то текст (из div.menu) рано или поздно начинает наползать на изображение (img.corner_lt).
    А хотелось бы получить следующее поведение

    1. пока текст не наползает на изображение, то он находится по центру страницы
    2. как только он начинает наползать на изображение (ну или лучше не доползать до него 10px), то дальнейшее смещение текста прекращается, а у окна появляется горизонтальная прокрутка (как будто работает min-width)


    Такое поведение можно реализовать?
      Ничего не приходит в голову, к тому же position: absolute; кажется мне неправильным в принципе.

      Подумайте, может подойдёт @media с указанием ширины, т.е. сделать два стиля под разную ширину окна.
      0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
      0 пользователей:


      Рейтинг@Mail.ru
      [ Script execution time: 0,0307 ]   [ 15 queries used ]   [ Generated: 28.03.24, 16:35 GMT ]