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

Новые темы	Объявления	Свободное общение
01:23 С наступающим Новым годом! АП Яндекс ИКС 23.12.2025 23:07 Как Яндекс индексирует ваш сайт? \| АПдейт выдача 8.12.2025 22:52 Ночной бар в Паттайе: как случайная встреча с "тайкой" и её кадыком перевернула мой взгляд на продвижение сайта в Google 2026 18:44 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 13:12 Покупные ссылки 12:57 Rotapost прикрыли! Чем пользоваться? 17:00 Стоит ли добавлять сайт в Rambler топ 100?	23:01 Ру трафик с джоб сайтов 17:24 JustProxy.Biz - Резидентные прокси без ограничения по трафику 16:38 GhostRocket.pro — Взлетаем в новую эру криптообмена! 15:31 №1 Рассылка / Инвайтинг [TELEGRAM] \| Приватный метод 15:31 Trustpilot Reviews \| Подниму рейтинг вашей компании 15:30 Продвижение YouTube видео в топ поиска \| Любой тип контента \| Гарантия результата 15:29 Установка\|Настройка\|Доработка\|Наполнение сайтов\|Дизайн\|3D\|Видеомонтаж	00:02 С юмором по жизни! 22:59 Про мясо 15:07 Добро пожаловать в цифровой мир... 22:12 BYTIK.shop – сервис по продвижению в популярных социальных сетях 10:10 накрутка трафика в SimilarWeb 16:50 Компьютерная мышь 23:03 Точные прогнозы на футбол