- 0
Верстка меню
-
Similar Content
-
By Smart_Bomber
Есть меню, но дело в том, что непонятно откуда берется довольно таки большой отступ. Верстаю не так давно, поэтому вполне мог и нахимичить. Прошу помощи
body { margin: 0; padding: 0; width: 100%;}.menu { list-style: none;}.menu li { text-align: center; width: 14.28%; margin-left:0; margin-right: 0; padding:0 0; background: #E0EEEE; float: left; font-size: 32px; font-family: Calibri;}.menu a { text-decoration: none; color: #000; display: block;}.menu a:hover{ background: #C1CDCD; transition-property: background; transition-duration: 0.5s;}.main { display: block; width: 100%; overflow: hidden;} -
By justwhite.design
Приветствую уважаемые коллеги, мой опыт верстки довольно хороший, вот только опыт английского не очень велик, если найдется кто поможет, в приоритете ссылки на рускоязычные сайты, буржуйские конечно тоже приветствуются.
В общем проблема в следующем, есть меню, диагональное меню http://clip2net.com/s/50cAtD вот такое, я понятия не имею как его верстать, уже и так и сяк, не буду говорить что перерыл весь интернет, но по запросам "нестандартное меню, Диагональное меню ... " перерыл google до 10 страницы, а дальше сами понимаете, прошу помощи, может кто делал, кто знает.
За ранее спасибо, буду благодарен за любой ответ.
-
By dartwlad
Всем доброго времени суток! Смотрите, проблема вот в чем. Есть меню, вертикальный аккордеон, несколько уровней. Все хорошо работает, но только вот есть проблема в css.
Проблема в том, что открытые серые <li>(те, что светлее) по высоте больше, чем надо. И главное, что в коде пэддинг стоит только для верха и левой стороны этого <li>, но почему-то он и вниз растягивается, что и не очень выглядит, потому что сами эти <li> больше главных лишэк. Вот css:
.topnav {
background: #d3d3d3;
width: 268px;
padding:0;
list-style:none;
}
.topnav ul{
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
.topnav li {
width:268px;
list-style: none;
background:#a5a5a5;
margin-top:4px;
margin-bottom:4px;
}
.topnav li a {
display: block;
line-height: 40px;
text-indent:10px;
color:#000000;
width: 268px;
height: 43px;
text-decoration: none;
font-size: 13px;
font-weight: normal;
outline:none;
}
.topnav li a:hover {
display: block;
color:#424242;
text-decoration:none;
}
.topnav ul ul {
background:#ededed;
width:268px;
padding: 5px 0 0px 0;
display:none;
}
.topnav ul ul li {
margin: 0;
padding: 0;
clear: both;
margin-bottom:3px;
}
.topnav ul ul li a {
width:262px;
padding:15px 0px 0px 6px;
line-height: 12px;
text-decoration: none;
color: #000;
text-indent:0px;
font-size:12px;
background: #bfc0c0;
}
.topnav ul ul li.active a {
color: #000;
font-weight: bold;
}
.topnav ul ul li a:hover {
background: #cbcccc;
padding:15px 0px 0px 6px;
width:262px;
line-height: 12px;
color: #424242;
font-size:12px;
}
.topnav ul ul ul li a {
color:#444;
padding-left:10px;
}
.topnav ul ul ul li a:hover {
background-color:#D3CEB8;
color:#675C7C;
}
.topnav ul span{float: right;clear:both; padding-right:10px}
Заранее спасибо за помощь!
-
Question
Imperil
День добрый!
Есть вот такое вот меню:
А как его сверстать правильно и практичнее всего будет - нет идей. Сложность - в загнутых уголках по бокам.
Или тупо вставить все это дело картинкой? Но правильно ли это будет, и плюс ко всему нужно ведь, чтобы этот уголок потом тянулся в зависимости от размера монитора на всю ширину.
Что посоветуете?
Link to comment
Share on other sites
9 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.