Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Абсолютное позиционирование блока в процентах (HTML,CSS,JS)

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте, Возникла такая не понятная ситуация с позиционированием блоков в блоке.
 
Ниже представлен готовый тестовый пример (html-страничка), просто рядом с ней положить jquery.js и запустить.
 
В этом примере блок #h-phones помещается в самую правую часть блока #header-block, учитывая отступы последнего...
Здесь всё правильно.
НО когда мы начинаем уменьшать размер окна браузера - блок #h-phones "уходит" вправо -- ПОЧЕМУ?
 
ведь #header-block в % и отступ слева для #h-phones в процентах...
 
Для теста скопируйте и запустите следующий код (рядом положить jquery.js):
 

Код:
<!DOCTYPE html>
    <html id="nojs" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style>
    header{
      width:100%;
        background-color: #999999;
        display: block;
        margin-bottom: 10px;
     
    }
    #header-block{
      width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 5px;
        padding-right: 5px;
      border:1px dotted #FFF;
      height:120px
    }
    #header-block:before,
    #header-block:after{
      display: table;
      content: " ";
    }
    #header-block:after{
        clear: both;
    }
    #h-phones ul{
      padding-left: 0;
      list-style: none;
      border:1px solid blue;
    }
    #logo, #alogo, #slogan, #h-phones {
        clear: left;
        cursor: move;
        float: left;
    }
    </style>
   
    <script>
    $(document).ready(function (){
          //все левые отступы #header-block + левый бордюр
        HBbbb = parseFloat(parseFloat($("#header-block").css('margin-left')) + parseFloat($("#header-block").css('padding-left')) + parseFloat($("#header-block").css('border-left-width')));      
        HBwidth = $("#header-block").width(); //ширина #header-block    
        HPwidth = $("#h-phones").width(); //ширина нужного блока
       
        //для теста - просто "приклеить" блок к правому краю
        lleft = HBwidth - HPwidth + HBbbb; //отступ в px
        pleft = parseFloat((lleft / (HBwidth + (HBbbb*2))) * 100);  //отступ в процентах
       
        //Двигаем:
        $("#header-block").css('position','relative');
        $("#h-phones").css({'position':'absolute','top':0,'left':pleft+'%'});
       
    });
    </script>
   
    </head>
   
    <body>
   
   
    <div id="wrap-header">
    <header>
    <div id="header-block">
       
        <div id="h-phones">
          <ul><li>1-800-45-PEACH</li><li>1-800-45-PEACH</li><li>1-800-45-PEACH</li></ul>
        </div>
     
    </div>            
    </header>
    </div>
   
   
   
    </body>
    </html>

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 08:25 18-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kevkev
1) это для соседнего раздела
2) есть же jsfiddle.net  
http://jsfiddle.net/N7Ftx/
3)
Цитата:
блок #h-phones "уходит" вправо -- ПОЧЕМУ

а что с ним должно быть?


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 09:26 18-04-2014
kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Извините, с ошибкой раздела - переместите пожалуйста куда надо.
 

Цитата:
а что с ним должно быть?  

Должен оставаться на своем месте "приклееным" к правой части #header-block

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 09:31 18-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kevkev

Цитата:
Должен оставаться на своем месте "приклееным" к правой части #header-block

зачем вам для этого jQuery??
 
и я не совсем вижу что значит "уходит вправо". заползает на правую полоску при очень узком экране или что?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 10:09 18-04-2014
kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
зачем вам для этого jQuery??  

он нужен не только для этого, по этому используется и здесь
 

Цитата:
и я не совсем вижу что значит "уходит вправо". заползает на правую полоску при очень узком экране или что?

Да, именно, заползает за правую полоску, даже если ширину экрана чуть уменьшить
...в css я же пишу: размещать левый край блока на х% отностиельно родителя...

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 10:25 18-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kevkev

Цитата:
он нужен не только для этого, по этому используется и здесь

но зачем он для позиционирования?  
 

Цитата:
Да, именно, заползает за правую полоску, даже если ширину экрана чуть уменьшить  

у меня в хроме нет такого. только если совсем сжать.
какой браузер?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 10:28 18-04-2014
kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
но зачем он для позиционирования?  

Какая разница чем, если он уже подключен )
 

Цитата:
у меня в хроме нет такого. только если совсем сжать.
какой браузер?

Firefox

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 10:45 18-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kevkev

Цитата:
Какая разница чем, если он уже подключен

большая.. а если человек зашел через opera mini или просто отключен js?
 
вам нужно отлавливать событие ресайза и окна и пересчитывать новые координаты
 
 
$(window).resize(function(){
// пересчитываете координаты
});
 
но это можно сделать и на чистом css, без jquery

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 10:55 18-04-2014
kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
но это можно сделать и на чистом css, без jquery

если не трудно... как?
 
я обновил http://jsfiddle.net/N7Ftx/3/
 
так вроде работает

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 11:03 18-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kevkev

Цитата:
если не трудно... как?  

для начала - что именно вы хотели сделать?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:20 18-04-2014
kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
для начала - что именно вы хотели сделать?

Хочу адаптивности
 
Т.е.:
Блок может находится в любой области #header-block - и мы не знаем где... именно для этого все эти вычисления...
 
при изменении размеров окна, ну или, при открытии странички на устройстве с малым разрешением, он всегда должен быть виден - не сползать и не выползать за пределы header-block

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 10:12 19-04-2014
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
вылазит из-за (вы задаете в % позицию, и закономерно, что при минимальных размерах экрана блок уже не помещается):

Код:
$("#h-phones").css({'position':'absolute','top':0,'left':pleft+'%'});  

поменять на что-то в духе:

Код:
$("#h-phones").css({'float':'right'});  

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 19:00 19-04-2014 | Исправлено: Xrobak, 19:01 19-04-2014
kevkev

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
поменять на что-то в духе:
 
Код:

Код:
$("#h-phones").css({'float':'right'});
 

 
Почему float:right ?
...это в примере мы прижимаем блок к правому краю, а если блок находится ближе к левой части?
 
Вот тут http://jsfiddle.net/N7Ftx/3/, я сделал поправки

Всего записей: 16 | Зарегистр. 30-10-2006 | Отправлено: 11:30 20-04-2014
Xrobak

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Почему float:right ?

наверное потому что

Цитата:
В этом примере блок #h-phones помещается в самую правую часть блока #header-block, учитывая отступы последнего...

 
Честно говоря, я уже запутался. Вам что нужно то? Сформулируйте полные условия.
Зачем вам вообще в % задавать выравнивание, если для таких целей есть float?

Всего записей: 939 | Зарегистр. 16-08-2004 | Отправлено: 17:03 20-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kevkev
вот вам на css - ничто же не залазит?  
http://jsfiddle.net/N7Ftx/4/
 
ну если вы отключите перенос строки, тогда да, не может помещаться и тогда нужно оперировать абсолютным позиционированием и js
http://jsfiddle.net/UG6yn/
с требованием минимальной ширины разберитесь сами.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:54 21-04-2014 | Исправлено: Cheery, 02:57 21-04-2014
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Абсолютное позиционирование блока в процентах (HTML,CSS,JS)


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru