между самими подпунктами отступы нормальные. а вот как они в белом этом блоке стоят…
Для белого блока свои отступы. Они одинаковы с каждой стороны. В самом начале мы их с вами обнулили. Теперь можем изменить.
так а где отступы то прописывать, одного понять никак вот не могу…
.main-menu ul
сюда??
.main-menu ul {
margin: 0;
padding: 0;
}
Сюда. Мы их изначально обнулили. Теперь меняем. Padding я имею в виду.
не получается http://joxi.ru/VrwbRngsKYvDEA
съезжает всё…
(((((((((((((((((((((((((((((( 
Всё правильно, не бойтесь. Белый фон еще добавьте для ul.
спасибо тут всё получилось) но вот у меня оказывается нету полоски черной под белым блоком… 93%
А кто вам мешает ее нарисовать?) Добавьте так же как и белый фон.
сделал наконец-то
html, body {
background: white;
margin: 0;
padding: 0;
}
body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu {
margin: 0;
padding: 0;
width:200px;
}
.main-menu li {
margin: 0;
list-style: none;
}
.main-menu ul {
margin: 0;
padding: 10px 0px;
background-color: white;
border-bottom: 2px solid #2C3E50;
}
.main-menu a {
display: block;
margin: 0;
color: white;
padding: 10px 15px;
background-color: #2980B9;
border-bottom: 2px solid #2C3E50;
text-decoration: none;
}
.main-menu li li a {
margin: 0;
padding: 5px 15px;
color: #2980B9;
background: #FFFFFF;
border: none;
text-decoration: underline;
}
.main-menu > .active > a {
background-color: #1ABC9C;
}
Спасибо вам БОЛЬШОЕ))
оцените пожалуйста))) что лишнее?
есть ли чтото лишнее в окончательном коде??)
margin: 0; можно убрать в этих фрагментах:
.main-menu a {
display: block;
margin: 0;
color: white;
padding: 10px 15px;
background-color: #2980B9;
border-bottom: 2px solid #2C3E50;
text-decoration: none;
}
.main-menu li li a {
margin: 0;
padding: 5px 15px;
color: #2980B9;
background: #FFFFFF;
border: none;
text-decoration: underline;
}
А так всё замечательно, поздравляю вас)
Спасибо вам большое))) извините что так долго мучал))))
3 лайка
html, body {
margin: 0;
padding: 0;
}
body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
ul
{
padding:0px;
margin:0px;
list-style:none;
width:200px;
}
a
{
display:block;
text-decoration:none;
padding:10px;
padding-left:15px;
border-bottom:2px solid #2C3E50;
color:white;
}
.main-menu>li:first-child
{
background: #1ABC9C ;
}
.main-menu>li
{
background:#2980B9;
}
.main-menu ul li a
{
margin:0px;
padding:0px;
background:#FFFFFF;
text-decoration:underline;
color:#2980B9;
border-bottom:none;
padding:5px;
padding-left:15px;
padding-top:5px;
}
.main-menu ul li:nth-child(1)
{
border:0px solid yellow;
margin:0px;
padding:0px;
padding-top:10px; /??? <-----N1 ???/
background:#FFFFFF;
}
.main-menu ul li:nth-child(3)
{
border-bottom:2px solid #2C3E50;
margin:0px;
padding:0px;
padding-bottom:10px; /??? <-----N2 ???/
background:#FFFFFF;
}
Результат сошелся, но есть сложность понимания отступов N1 и N2. Почему они есть? Подозреваю что подменю отдельным блоком получилось и верхний паддинг перетек в маргин(схлопывание), но в этом случае не понятно с N2. В моем случае подбирал отступы с помощью цветового выделения рамок и фона и линейки на мониторе, что не есть хорошо.
Нет здесь схлопывания.
У вашего подменю нет внешних отступов, потому что вы их обнулили.
Без отступов N1 и N2 размеры пунктов подменю (li) равны размерам ссылок с внутренними отступами.
Вы увеличили высоту первого и третьего пункта с помощью padding-top и padding-bottom соответственно, чтобы добиться сходства с образцом.
Также вы могли увеличить высоту первой и третьей ссылки подменю с помощью этих же свойств, или добавить эти отступы для ul подменю.
Размеры пунктов и ссылок хорошо видны в консоли. Фиолетовым цветом показан ваш добавленный отступ.
Уберите закомментированные свойства в этих фрагментах. Так будет короче.
.main-menu ul li a {
/margin:0px;
padding:0px;/
background: #FFFFFF;
text-decoration: underline;
color: #2980B9;
border-bottom: none;
padding: 5px 5px 5px 15px;
}
.main-menu ul li:nth-child(1) {
/border:0px solid yellow;
margin:0px;
padding:0px;/
padding-top: 10px; /??? <-----N1 ???/
background: #FFFFFF;
}
.main-menu ul li:nth-child(3) {
border-bottom: 2px solid #2C3E50;
/margin:0px;
padding:0px;/
padding-bottom: 10px; /??? <-----N2 ???/
background: #FFFFFF;
}
1 лайк