Jump to content
  • 0

Верстка горизонтального меню


Smart_Bomber
 Share

Question

Есть меню, но дело в том, что непонятно откуда берется довольно таки большой отступ. Верстаю не так давно, поэтому вполне мог и нахимичить. Прошу помощи :)fum6N.png

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;}
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Так же скажу что дефолтные значения присутствуют, вот если бы к примеру показал свой код  на http://jsfiddle.net/ то можно было бы увидеть в инспекторе кода.

http://jsfiddle.net/ZZynx/2/

Вот, вроде бы так

Исправить ошибку удалось добавив margin-left в три процента и width 103%

Но по-моему это не совсем нормальное решение проблемы 

Edited by Smart_Bomber
Link to comment
Share on other sites

  • 0

У .menu установите свойство padding-left: 0; По умолчанию у нумерованного / ненумерованного списков задается padding-left;

Не помогло

 

Понял. Я подумал что класс .menu присвоен элементу UL.

http://jsfiddle.net/ZZynx/4/

.menu ul {  padding: 0;  list-style: none;}

Ура, заработало!!! Спасибо :)

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • 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}

      Заранее спасибо за помощь!
    • By Imperil
      День добрый!
      Есть вот такое вот меню:
      А как его сверстать правильно и практичнее всего будет - нет идей. Сложность - в загнутых уголках по бокам.
      Или тупо вставить все это дело картинкой? Но правильно ли это будет, и плюс ко всему нужно ведь, чтобы этот уголок потом тянулся в зависимости от размера монитора на всю ширину.
      Что посоветуете?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy