Jump to content
  • 0

Проблемы с позиционированием текста


gumuch
 Share

Question

Добрый день. Нуждаюсь в помощи/совете! 
В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
Сам сайт: http://2metra.com/

Вот код который я прописал:

Скрытый текст

 <style>
  .telefon {
  width: auto;
  height: auto;
  position: absolute;
    top: 75px;
  right: 200px;
       z-index: 999999999999999999999999999999;
}
    </style>
     </head>
    <div class="telefon">
      <p><table cellpadding="5">
      <tr>
      <td valign="top"><img src="/images/tel_icon.png"></td>
       <td valign="bottom"><big><big>+38 (098) 496-19-18</big></big></td>
</tr>
        <tr>
      <td valign="top"><img src="/images/mail_icon.png"></td>
       <td valign="bottom"><big><big>office@2metra.com</big></big></td>
       <td></td>
</tr>
      </table></p>
      </div>

 

 

Edited by gumuch
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

Edited by AlexZaw
Link to comment
Share on other sites

  • 0
3 минуты назад, AlexZaw сказал:

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

Спасибо конечно. Но Вы всего лишь скопировали мне текст который я уже читал на сайте http://htmlbook.ru
Если знаете, прошу Вас объяснить мне этот текст своими словами, что бы я понял, что не так. 

Link to comment
Share on other sites

  • 0

Ну да, оттуда и копировал, а что непонятно то?? У вас блоку .telefon задано абсолютное позиционирование, расположен этот блок в body, body это вся страница, вот относительно нее и располагается .telefon, и если вы задали координаты элементу top:100px, то, как вы не изменяйте размер окна браузера, он будет отодвинут от верхнего края страницы на 100px а, все другие элементы ведут себя так, как-будто этого элемента вообще нет. Что у вас и происходит, когда вы заходите с телефона - все элементы выстраиваются так как вы им указали, а .telefon просто располагается поверх них. 

Link to comment
Share on other sites

  • 0
1 минуту назад, AlexZaw сказал:

Ну да, оттуда и копировал, а что непонятно то?? У вас блоку .telefon задано абсолютное позиционирование, расположен этот блок в body, body это вся страница, вот относительно нее и располагается .telefon, и если вы задали координаты элементу top:100px, то, как вы не изменяйте размер окна браузера, он будет отодвинут от верхнего края страницы на 100px а, все другие элементы ведут себя так, как-будто этого элемента вообще нет. Что у вас и происходит, когда вы заходите с телефона - все элементы выстраиваются так как вы им указали, а .telefon просто располагается поверх них. 

Это я понимаю. Вопрос заключается в том, как исправить ситуацию?

Link to comment
Share on other sites

  • 0

Ну например перенести этот блок в параграф к картинке, убрать у него позиционирование, задать display:inline-block; и

vertical-align:middle;

Более точно уже сами подравняете.

А вообще способов много есть, вопрос в том что вы хотите получить в итоге

Edited by AlexZaw
  • Like 1
Link to comment
Share on other sites

  • 0
В 21.03.2018 в 11:41, gumuch сказал:

Спасибо за совет, буду пробовать. 
Хочу, что бы красиво отображалось как на ПК так и на мобильных устройствах

сделай несколько медиа запросов и поставь так как тебе нужно

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By мурамаса
      Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например
      .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute.
      Как я понимаю float и absolute вместе не работают ?
      Как я понимаю float и absolute вместе не работают ? 
      При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
    • By mr.relax
      Есть страница, c:
      body { 
      max-width: 1200px;
      margin: auto;
      }
      т.е. контент посередине. 

      Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. 
      Ну например: окно браузера уменьшили...

      footer {
      position: fixed;
      bottom: 0;
      }

      "привязывает" <footer> к низу, но растягивает по ширине экрана.
    • By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
    • By iBars
      На сайте есть главное меню (где полоса поиска по сайту) и оно должно прилипать к экрану при прокрутке страницы. В HTML-файле на компьютере это работает, но на хостинге перестает, хотя это просто вёрстка.
      HTML:
      ... <body> <div class="box box-top sticky"> <div class="container"> <div class="menu_main"> ... </div> </div> </div> </body> ...  
      CSS:
      .sticky { position: sticky; top: 0; z-index: 11000; }  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy