Автор Тема: Проблем с min-height - HTML/CSS  (Прочетена 1256 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

Данаил Рабаджийски

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 57
  • -Получени: 106
  • Публикации: 1444
    • DanailDR.EU
Проблем с min-height - HTML/CSS
« -: 15 Октомври 2015, 13:09:24 »
Имам следния CSS код
Код: CSS
  1. #menu
  2. {
  3.         width: 100%;
  4.     min-height: 40px;
  5.     background-color: orange;
  6. }
  7. .site-menu
  8. {
  9.         width: 100%;
  10.     background-color: #73d216;
  11. }
  12. .site-menu ul
  13. {
  14.         list-style-type: none;
  15.         margin: 0;
  16.         padding: 0;
  17. }
  18. .site-menu li
  19. {
  20.  float: left;
  21. }
  22.  

Също и следния HTML код

Код: HTML
  1. <div id=menu>
  2.             <div class=site-menu>
  3.             <ul>
  4.                         <li><a href=¨Link1¨  target=¨_self¨>Link1</a></li>
  5.                         <li><a href=¨Link2¨  target=¨_self¨>Link2</a></li>
  6.                         <li><a href=¨Link3¨  target=¨_self¨>Link3</a></li>
  7.                         <li><a href=¨Link4¨  target=¨_self¨>Link4</a></li>
  8.                         <li><a href=¨Link5¨  target=¨_self¨>Link5</a></li>
  9.                         <li><a href=¨Link6¨  target=¨_self¨>Link6</a></li>
  10.                         <li><a href=¨Link7¨  target=¨_self¨>Link7</a></li>
  11.             </ul>
  12.             </div>
  13.         </div>
  14.  
Проблема е следния, когато премахна "float: left; " от css, сработва правилото за min-height и когато добавям нови линкове, съответно се увеличава височината. Добавя ли обаче float и все едно съм закотвил целия див да е с височина 40 пиксела.

Я да видим дали повечко очи ще намерят къде съм сбъркал.
Закона на Мърфи е: Точното определение и логичното по-нататъшно развитие на общото ентропично учение, според което всички частички във вселената се стремят да се подредят във възможно най-голям безпорядък. Познанието, че на път за там споменатите частички поне веднъж ти се изпречват в краката.

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Проблем с min-height - HTML/CSS
« Отговор #1 -: 15 Октомври 2015, 19:04:28 »
Еми то веднага по фона отзад може да видиш че li-тата са незнайно някъде в тропосферата. Гледай да ползваш колкото се може по-малко float, особено за менюта. Вместо тях ползвай display за да окажеш как да се подредят елементите, в твоя случай inline-block ще свърши работа

http://jsfiddle.net/34mz9f0r/
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

Данаил Рабаджийски

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 57
  • -Получени: 106
  • Публикации: 1444
    • DanailDR.EU
Re: Проблем с min-height - HTML/CSS
« Отговор #2 -: 16 Октомври 2015, 08:18:07 »
Благодаря, Ава, с inline-block става. Получава се точно каквото искам.
Закона на Мърфи е: Точното определение и логичното по-нататъшно развитие на общото ентропично учение, според което всички частички във вселената се стремят да се подредят във възможно най-голям безпорядък. Познанието, че на път за там споменатите частички поне веднъж ти се изпречват в краката.