Съезжает блок <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)

Новые темы	Объявления	Свободное общение
00:48 Как правильно покупать ссылки для поддомена? 23:34 2025 ВК запустит новую программу монетизации для авторов сообществ 15:28 LGaming - экосистема и партнерская программа в gambling и betting вертикалях 18:51 Роскомнадзор отказал в регистрации трети блогеров-десятитысячников 12:53 где много готовых фавиконок 22:59 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 12:32 «Хлебные крошки» в адресе сайтов исчезнут из результатов поиска Google	04:35 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 21:43 TrueMeds - Революционная Фарма Партнерка! Увеличь свой профит в x2 раза вместе с нами! 21:24 Sectormoney.com - быстрый и удобный обменник 20:33 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 18:54 USMobileSMSBot - 17:18 Продам обменник криптовалюты, а также новый обменник под ключ с обучением. Скидки на скрипты обменника 15:28 Прием платежей для HIGH RISK \| Прием платежей без сайта	08:12 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 07:48 США готовят закон для уничтожения пиратских сайтов во всех странах мира 02:50 Точные прогнозы на футбол 02:10 [Новая партнерка] Goldbet Partners — прямой рекламодатель одноименного казино Goldbet 21:19 С юмором по жизни! 18:15 Telegram уничтожил официальный канал легендарного российского торрент-трекера 18:19 Уникальный сервис SEO продвижения