За последние 24 часа нас посетили 17495 программистов и 1722 робота. Сейчас ищут 1542 программиста ...

Автоматичеsкое изменение отsтупов

Тема в разделе "HTML и CSS", создана пользователем Qumo, 21 окт 2015.

  1. Qumo

    Qumo Активный пользователь

    С нами с:
    6 июн 2013
    Сообщения:
    160
    Симпатии:
    0
    ахахаха, в том, что у меня не работает буква С=))

    Добавлено спустя 3 минуты 50 секунд:
    Ну да, это я пробовал варианты. Поsтавил auto, т.к. думал, что это поможет мне. Но не помогло.
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.108
    Симпатии:
    1.243
    Адрес:
    там-сям
    ты забавный ) "отступ должен уменьшаться автоматически" это совсем не margin: auto ))) это должно быть что-то вроде margin-left: 5%
    проценты от ширины вместо выравнивание по центру, ок?

    а может быть тебе наоборот стоит сделать margin-auto в любом разрешении, без всяких медиа, тогда всё будет гладко.
     
  3. Qumo

    Qumo Активный пользователь

    С нами с:
    6 июн 2013
    Сообщения:
    160
    Симпатии:
    0
    margin-left:480px должен быть при разрешении 1920px, а чем меньше разрешение, тем меньше отsтуп=) При sамом низком разрешении отsтупа не должно быть вообще(например, как для телефонов)

    Добавлено спустя 19 минут 29 секунд:
    А что еsли sоздать блок div, у котогого будет отsтуп 480px и в него будут входить вsе оsтальные блоки и при уменьшении разрешения они будут изменятьsя из-за главного блока=) в главный блок не будут входить, например, header и footer, т.к. им не нужен этот отsтуп?=) Как вариант? Или это и еsть выход из положения?
     
  4. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.108
    Симпатии:
    1.243
    Адрес:
    там-сям
    будь проще. если что-то кажется слишком сложным, значит ты зашел не с той стороны.
    Код (PHP):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5.  
    6. div {
    7.     margin-left: 50px;
    8. }
    9.  
    10. @media screen and (max-width: 1000px) {
    11.   .smartmargin {
    12.       margin-left: 5%;
    13.   }
    14. }
    15.  
    16. </style>
    17. </head>
    18. <body>
    19. <div>ololo</div>
    20. <div class="smartmargin">ololo</div>
    21. <div>ololo</div>
    22. <div>ololo</div>
    23. <div>ololo</div>
    24. </body>
    25. </html> 
    при ширине 1000px или больше все дивы имеют одинаковый отступ.
    при меньшей ширине у ".smartmargin" начинается "автоматическое уменьшение отступа", причем без резкого скачка, т.к. 50 это 5% от 1000.

    https://jsfiddle.net/z6je3drc/embedded/result/
     
  5. Qumo

    Qumo Активный пользователь

    С нами с:
    6 июн 2013
    Сообщения:
    160
    Симпатии:
    0
  6. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.108
    Симпатии:
    1.243
    Адрес:
    там-сям
    это тот случай, когда
    не надо никаких танцев с бубном

    Добавлено спустя 4 минуты 11 секунд:
    если ты запутался, начни с простого. делай шаг за шагом. одно из двух: или победишь или найдешь в каком случае всё начинает работать не так.
     
  7. Qumo

    Qumo Активный пользователь

    С нами с:
    6 июн 2013
    Сообщения:
    160
    Симпатии:
    0
    что не нравит5я Internet Explorer'у в этом коде?
    Код (PHP):
    1. * {
    2.  margin: 0;
    3.  padding: 0;
    4. }
    5.  
    6. body {
    7.  width: 100%;
    8.  height: 100%;
    9.  font-family:Open Sans;
    10.  background-color:#efefef;
    11. } 
    12. li {
    13.  list-style-type: none;
    14. }
    15.  
    16.  
    17. /*Header*/
    18.  
    19. .header {
    20.  position:relative;
    21.  height:44px;
    22.  width:1920px;
    23.  background: url(../images/substrate.png);
    24.  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.2);
    25.  margin:0;
    26.  max-width: 1920px;
    27.  min-width: 320px;
    28.  z-index: 1;
    29. }
    30.  
    31.  
    32. @media screen and (max-width: 1920px) {
    33. .mainMenu {
    34.  position:relative;
    35.  height:44px;
    36.  border: 0px solid #1FA2E1;
    37.  margin: 0 460px 0 460px;
    38.  z-index: 1;
    39. }
    40.  
    41. .mainMenu ul{
    42.  padding-left: 0px;
    43. }
    44.  
    45. .mainMenu ul li {
    46.  background: url(../images/line.png) 0px 0px no-repeat;
    47.  background-position-y: 15px;
    48.  float:left;
    49.  height: 44px;
    50. }
    51.  
    52. .mainMenu ul li a{
    53.  height: 44px;
    54.  display:block;
    55.  font-size:16px;
    56.  border-right:0px solid #adadad;
    57.  padding: 11px 22px 0 19px;/* Поля вокруг текста */
    58. }
    59.  
    60. .mainMenu a{
    61.  position:relative;
    62.  text-decoration:none;
    63.  font-weight:400;
    64.  font-size: 16px;
    65.  color:#fff;
    66.  text-decoration: none; 
    67. } 
    68.  
    69. .mainMenu ul li:hover{
    70.  background: #2e64b1;
    71.  color:#fff;
    72.  }
    73.  
    74. .middle {
    75.  margin: auto 480px 0 480px;
    76. }
    77.  
    78. #logo {
    79.  position:absolute;
    80.  margin-top:25px; 
    81.  }
    82.  
    83. #name, #info {
    84.  position:absolute;
    85.  left:581px;
    86.  }
    87.  
    88. #name {
    89.  margin-top:37px;
    90.  font-size:20px;
    91.  font-weight:bold;
    92.  color:#333333;
    93.  width: 350px;
    94. }
    95.  
    96. #info {
    97.  font-size:14px;
    98.  margin-top:72px; 
    99.  width: 300px;
    100.  }
    101.  
    102. #slider {
    103.  position:absolute;
    104.  top:0;
    105.  left: 904px;
    106.  }
    107.  
    108. #leftarr {
    109.  position:absolute;
    110.  margin:172px 0 0 465px;
    111. } 
    112.  
    113. #rightarr {
    114.  position:absolute;
    115.  margin:172px 0 0 892px; 
    116. }
    117. }
    118.  
    Он вообще код нормально не во5принимает.
     
  8. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
  9. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    <оффтоп>
    И что, реально проще постоянно раскладку дергать? Я б давно клаву сменил. Даже если речь о ноутбуке - точно так же заказывается, меняется.
    </оффтоп>
     
  10. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    че, правда настолько нет денег, что даже клаву за сто рублей не купить?
     
  11. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    может студент и нет лишнего рубля
     
  12. Qumo

    Qumo Активный пользователь

    С нами с:
    6 июн 2013
    Сообщения:
    160
    Симпатии:
    0
    Это ноутбук=) и я 5тудент=) Нет денег. Зарабатываю 5ам, у родителей не прошу. Вот 5ss изучать начал.

    Добавлено спустя 51 секунду:
    У меня puntoswit5her 5тоит=)
     
  13. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    1) Таки к ноутбуку отлично цепляется внешняя клава.
    2) Таки к ноутбуку отлично цепляется купленная отдельно клава под его модель. Старая выдирается, новая цепляется. По личному опыту - делов на час максимум.
     
  14. Qumo

    Qumo Активный пользователь

    С нами с:
    6 июн 2013
    Сообщения:
    160
    Симпатии:
    0
    В5его 3 usb:
    1 не рабочий -1 usb
    Андройдник раздает вай фай и по5тоянно заряжает5я -1 usb
    Bluetooth мышка -1 usb =))
    Нет денег. Зарабатываю 5ам, у родителей не прошу.
     
  15. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Молодец