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

Новые темы	Объявления	Свободное общение
17:03 Устали от Пустых Обещаний? Market-Place.su даёт реальные деньги! 15:08 Стоит ли добавлять сайт в Rambler топ 100? 14:14 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 19:33 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 09:02 Как продвигать сайт с неуникальным контентом 08:57 Absence в Армении 14:50 Индексация страниц	19:43 CactusPay.PRO \| Умная платёжная система с выводом в USDT TRC-20 19:24 Продам аккаунты HH.RU 17:46 Terminal.cash - надежный обмен криптовалюты 16:18 Volna.money 16:13 swapsfera.com 16:04 GoodsMoney.io 13:27 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру)	21:28 Ну что, кто куда деваете свои сайты? 20:48 Точные прогнозы на футбол 22:09 Добро пожаловать в цифровой мир... 19:42 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 22:08 Накрутка поисковых подсказок 14:01 Union Pharm - топовая фарма-партнерка для профессионалов! 10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди