PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Bombermag
Отправлено: 29 Июля, 2019 - 21:41:33
Post Id


Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Июнь 2019  


Помог: 0 раз(а)




CODE (html):
скопировать код в буфер обмена
  1. <style>
  2. @media only screen and (min-width: 1024px)
  3. {
  4.     .dropdown
  5.     {
  6.         display: inline-block;
  7.     }
  8.  
  9.     .dropdown-content
  10.     {
  11.         z-index: 1;
  12.         display:none;
  13.         position: absolute;
  14.         background-color: #000;
  15.  
  16.        
  17.         padding: 46px 24px 40px;
  18.     }
  19.  
  20.     .dropdown:hover .__open
  21.     {
  22.         background-color: #000;
  23.         color: #4a4a4a;
  24.     }
  25.  
  26.     .dropdown:hover .dropdown-content
  27.     {
  28.         display:block;
  29.     }
  30. }</style>
  31. <header>
  32.         <a class="LOGO" href="#">LOGO</a>
  33.         <nav>
  34.                 <div style="">
  35.                         <a class="" href="#">Ссылка 1</a>
  36.                         <a class="" href="#">Ссылка 2</a>
  37.                         <a class="" href="#">Ссылка 3</a>
  38.                         <div class="dropdown">
  39.                                 <a class="__open" href="#">Ссылка 4</a>
  40.                                 <div class="dropdown-content"></div>
  41.                         </div>
  42.                         <a class="" href="#">Ссылка 5</a>
  43.                         <a class="" href="#">Ссылка 6</a>
  44.                 </div>
  45.         </nav>
  46. <hedaer>
  47.  


Какая задача, как сделать чтобы размер вылетающего блока dropdown-content был по всей ширине экрана и не превышал 1358px т.е если это экран ноута допустим 1366px в ширину то размер блока dropdown-content был 1358 и находися по центру экрана, если это монитор в 1280px то блок dropdown-content был по всей ширине экрана но и не превышал 1358px

(Отредактировано автором: 29 Июля, 2019 - 21:52:21)

 
 Top
LIME
Отправлено: 29 Июля, 2019 - 23:23:12
Post Id


Активный участник


Покинул форум
Сообщений всего: 10732
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




margin: auto
max-width
 
 Top
Bombermag
Отправлено: 30 Июля, 2019 - 00:18:15
Post Id


Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Июнь 2019  


Помог: 0 раз(а)




[quote=LIME][/quote]max-width 1358 пробовал вылетает за экран контент скажем так при 1280 и других ниже экранах, а нужно чтобы была width 100% но не превышала max-width 1358, т.е если экран 1280 то 100% а если 1366 или 1680 и т.д то окно не должно быть больше 1358 а если меньше чем 1366 например 1280 то 100%

(Отредактировано автором: 30 Июля, 2019 - 02:19:54)

 
 Top
Vladimir Kheifets
Отправлено: 30 Июля, 2019 - 12:46:26
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 872
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




Bombermag пишет:

Какая задача, как сделать чтобы размер вылетающего блока dropdown-content был по всей ширине экрана и не превышал 1358px т.е если это экран ноута допустим 1366px в ширину то размер блока dropdown-content был 1358 и находися по центру экрана, если это монитор в 1280px то блок dropdown-content был по всей ширине экрана но и не превышал 1358px

Добрый день!
Попробуйте:
1. Oпределить viewport
Например:
CODE (html):
скопировать код в буфер обмена
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">  

2. В CSS width и height задавать в vw и vh
Например:
CODE (html):
скопировать код в буфер обмена
  1. width:100vw; /* 100% width Viewports */
  2. height:40vh; /* 40% height Viewports */

Удачи!

(Отредактировано автором: 30 Июля, 2019 - 12:47:55)

 
 Top
Bombermag
Отправлено: 30 Июля, 2019 - 16:30:48
Post Id


Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Июнь 2019  


Помог: 0 раз(а)




[quote=Vladimir Kheifets][/quote]
Добавил, но вопрос остался как сделать чтобы блок был по центру экрана равномерно расположен?

left:50%
margin-left:-50%; пытался в общем приклеивает к левой части экрана и всё
Прикреплено изображение (Нажмите для увеличения)
Untitled.png

(Отредактировано автором: 30 Июля, 2019 - 17:36:01)

 
 Top
Bombermag
Отправлено: 31 Июля, 2019 - 01:37:11
Post Id


Новичок


Покинул форум
Сообщений всего: 16
Дата рег-ции: Июнь 2019  


Помог: 0 раз(а)




Ладно забейте надоело мне задалбываться с этим окном по другому сделал
 
 Top
armancho7777777 Супермодератор
Отправлено: 31 Июля, 2019 - 11:32:09
Post Id



Активный участник


Покинул форум
Сообщений всего: 4527
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




Bombermag, так может надо было вопрос раскрыть более подробно?
Что у Вас есть выпадающее меню, подменю которого должно быть не более такой-то ширины и по центру экрана. И ещё скриншот прикрепить как должно быть.
Так надо?
_https://jsfiddle.net/armancho/o5vzmq01/7/embedded/result,html,js,css
Максимальную ширину указал 1200px чтобы наглядно было.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB