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

Новые темы	Объявления	Свободное общение
20:17 Биржи ссылок в 2026 - реально ли новичку с одним сайтом поднять копейку? 19:40 adsense в 2026: кто реально выводит копейку через киргизию? 14:09 2Index - быстрая индексация страниц сайта и обратных ссылок 12:26 Очередной взлом через плагин. Хакеры получают админку без пароля 12:12 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 23:24 Яндекс Нейро и выдача в 2026 - остались ли лазейки для маленьких сайтов? 23:05 Раскрутка форума	17:18 SOCKS5 приватные прокси на 30 дней для PayPal 17:16 Google Voice аккаунты для бесплатных SMS и звонков 17:16 PayPal аккаунты для любых целей 15:11 HH.ru Работадателя вериф 14:49 4G/LTE Mobile Proxy 30+ geo 14:43 [UPDATE] CryptoMonitor — обмен BTC, USDT, XMR \| актуальная тема сервиса 13:32 Мониторинг обменников Сrypto-scout.io	23:48 Точные прогнозы на футбол 22:38 Огородники 19:36 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 16:47 Какой фильм вы любите посмотреть перед сном? 15:46 молодильные яблоки и живая вода 10:11 О природе путешествий. 15:04 Сайты Рунета