Съезжает блок <div> при масштабирование.

Съезжает блок <div> при масштабирование., Номер картинка телефон и рядом номер телефона.

Сообщений: 13 Регистрация: Янв 2015

5 Февраля 2015 10:45

Всем привет!Есть сайт на Вордпрессе.

Решил в шапку сайта добавить 2 номера телефонов, рядом с ними картинку с трубкой, снизу добавить электронку с картинкой письма.
в общем на каком-то форуме нашел информацию, и код.

в шаблоне header.php добавил:

Цитата
<div class="header_text"> <div class="header_phone">+7(926)407--<br>+7(926)407--</div> <div class="header_adr">info@ko*****an.ru</div> </div>

в [COLOR=#222222]style.css [/COLOR]добавил:

Цитата
.header_text { position: fixed; top: 100px; left: 850px; font-size: 12pt; font-family: verdana; font-style: italic; color: #333; border: 1px dashed #38B0E3; padding: 10px; } .header_adr { background: url('./images/addr.png') no-repeat left center; padding-left: 55px; } .header_phone { background: url('./images/phone.png') no-repeat left center; padding-left: 40px; }

В общем: при масштабирование странички CTRL +/- все это дружно смещаетсяпример в картинках.

Надеюсь на Вашу помощь!

Прикрепленные файлы

1.jpg (234.44 КБ) [ Скачать ]

2.jpg (240.14 КБ) [ Скачать ]

Alexey

Сообщений: 128 Регистрация: Мар 2011

5 Февраля 2015 11:18

Используйте размеры не в px, а в процентах.

Одежда оптом от российского производителя

Эмиль Пятков

Сообщений: 13 Регистрация: Янв 2015

5 Февраля 2015 11:28

Цитата
Alexey пишет: Используйте размеры не в px, а в процентах.

Не помогает. Я так понимаю нужно переделать <div class="header_text">
в .css зафиксировать его в одном месте.

Александр

Сообщений: 136 Регистрация: Июл 2012

5 Февраля 2015 13:02

Два вопроса по поводу вашей бредо-верстки. Если ответите правильно сможете решить свою проблему.

Почему у блока позиционирование fixed? Отступ слева 850 пикселей задан от какого места, то есть от границы чего именно?

Эмиль Пятков

Сообщений: 13 Регистрация: Янв 2015

5 Февраля 2015 13:26

Цитата

Александр пишет:
Два вопроса по поводу вашей бредо-верстки. Если ответите правильно сможете решить свою проблему.

Почему у блока позиционирование fixed? Отступ слева 850 пикселей задан от какого места, то есть от границы чего именно?

position: absolute; было, это в ходе эксперементов поменялось на fixed.отступ видать задан от границ браузера)

Эмиль Пятков

Сообщений: 13 Регистрация: Янв 2015

5 Февраля 2015 15:22

Короче ничего не получается...

Starik

Сообщений: 3634 Регистрация: Дек 2011

5 Февраля 2015 16:14

Попробуйте так. Это конечно не выход, но все же работает так как Вам надо.
Уберите для блока <div class="header_text"> стиль position: И весь блок помещаем перед закрытием блока <div class="social_links">. Получится типа такого:

Код

<div class="social-links">
  <a href="http://........ class="rss">
    <span class="icon-rss" alt="rss"></span>
  </a>
  <div class="header_text">
    <div class="header_phone">  
    +7(926)...      
<br>
    +7(926)...    
</div>
    <div class="header_adr">info@....</div>
  </div>
</div>

Эмиль Пятков

Сообщений: 13 Регистрация: Янв 2015

5 Февраля 2015 16:45

Цитата

Starik пишет:
Попробуйте так. Это конечно не выход, но все же работает так как Вам надо.
Уберите для блока <div class="header_text"> стиль position: И весь блок помещаем перед закрытием блока <div class="social_links">. Получится типа такого:

Код

 <div class="social-links">
  <a href="........ class="rss">
    <span class="icon-rss" alt="rss"></span>
  </a>
  <div class="header_text">
    <div class="header_phone">  
    +7(926)...      
<br>
    +7(926)...    
</div>
    <div class="header_adr">info@....</div>
  </div>
</div>

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

Dmitrii Lysjuk

Сообщений: 684 Регистрация: Ноя 2012

5 Февраля 2015 17:16

так если этот блок нужен по центру самого экрана сделайте так: position: absolute; top: 100px; left: 50%; margin-left: -__ширина блока__px; и тогда этот блок будет посредине страницы. или я что-то не так понял?

Dmitrii Lysjuk

Сообщений: 684 Регистрация: Ноя 2012

#10

5 Февраля 2015 17:31

Код

.header_text { 
position: absolute;
width: 300px;
top: 100px;  
left: 50%;
margin-left: -150px;
font-size: 12pt; 
font-family: verdana; 
font-style: italic; 
color: #333; 
border: 1px dashed #38B0E3; 
padding: 10px; 
}

вот такое пропишите к css, если я правильно вас понял, то блок должен быть посредине, независимо от масштаба экрана

Изменено: Dmitrii Lysjuk - 5 Февраля 2015 17:33

Эмиль Пятков

Сообщений: 13 Регистрация: Янв 2015

#11

5 Февраля 2015 17:35

Цитата
Dmitrii Lysjuk пишет: position: absolute; width: 300px; top: 100px; left: 50%; margin-left: -150px; font-size: 12pt; font-family: verdana; font-style: italic; color: #333; border: 1px dashed #38B0E3; padding: 10px; }

Все заработало! Большое человеческое СПАСИБО!!!

Dmitrii Lysjuk Сообщений: 684 Регистрация: Ноя 2012	#12 5 Февраля 2015 17:37 Эмиль Пятков, на здоровье

Похожие темы:

31.01.2024 20:42	Как закрыть от индексации некоторые блоки сайта
26.01.2018 19:49	Как удалить блок?
10.10.2017 22:43	Помогите вывести блок с категорией woocomerce
26.09.2017 17:20	Помогите убрать ненужный блок в корзине woocomerce
06.06.2017 10:22	Как добавить блок

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
22:23 Подскажите нормальный сервис накрутки ПФ 15:44 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 09:57 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 19:33 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 15:12 Несколько статей хорошо выдаются в Гугле, но отвратительно в Яндексе 13:40 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 11:41 2Index - быстрая индексация страниц сайта и обратных ссылок	22:30 SOCKS5 приватные прокси на 30 дней для PayPal 22:29 Google Voice аккаунты для бесплатных SMS и звонков 22:29 PayPal аккаунты для любых целей 20:15 Belurk — высокоскоростные анонимные прокси от 0,24 рублей 19:25 Whatsapp рассылки и реселлерская программа 17:01 Продажа горячих лидов под крипту / Crypto Leads for Sale 13:17 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик]	16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 20:43 Добро пожаловать в цифровой мир... 15:59 Про мясо 23:09 ПП от PMS remote.team - 200$ за команду 13:28 Компьютерная мышь 22:55 Ну что, кто куда деваете свои сайты? 22:34 Используете беспроводные наушники?