Jump to content
  • 0

CSS Горизонтальное меню


die_frage
 Share

Question

Привет друзья!

У меня вот такая проблема:

Скачал горизонтальное меню и установил на сайт по инструкции. Вроде все село на свои места, только проблема в том что не могу сменить цвет шрифва в CSS и сдвинуть кнопки так что бы они начинались с лева с самого начала блока меню.

Вот код CSS:

*{
margin:0;
padding:0;
}
.page{
margin:0 auto;
width:905px;


}
ul{
list-style:none;
width:100%;
height:40px;
background:#000 url(http://ru.intek.az/bg-nav.gif) top left repeat-x;
}
ul li{
float:left;
border-right:1px solid #333;
}
ul li a{
display:block;
height:40px;
padding:0 35;
float:left;
text-transform: uppercase;
font:100%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
}
ul li a:hover,
ul li.active a{
background:url(http://ru.intek.az/bg-button.gif) top left repeat-x;
color:#fff;
}

Когда я меня параметр

padding:0 35;

на

padding:0 0;

меню сдвигается в лева, но между текстом вообще не остается отступов ( А цвет не активной ссылки (шрифта) вообще никак сменить не могу.

Помогите пожалуйста, буду очень признателен.

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

попробуй так. только не забудь вставить цвет при наведении и расстояние


*{
margin:0;
padding:0;
}
.page{
margin:0 auto;
width:905px;


}
ul{
list-style:none;
width:100%;
height:40px;
background:#000 url(http://ru.intek.az/bg-nav.gif) top left repeat-x;
}
ul li{
float:left;
border-right:1px solid #333;
}
ul li a{
display:block;
height:40px;
padding-left: 2px; /*Это расттояние между ссылками*/
float:left;
text-transform: uppercase;
font:100%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
color:#fff;
text-decoration:none;
text-align:center;
}

ul li.active a{
background:url(http://ru.intek.az/bg-button.gif) top left repeat-x;
color:#fff;
}
ul li a:hover{
color: здесь указать цвет при наведении;
}

ul li a:first-child{
padding-left: 0px;
}

Edited by olechic
Link to comment
Share on other sites

  • 0

попробуй так. только не забудь вставить цвет при наведении и расстояние


ul li a:hover{
color: здесь указать цвет при наведении;
}

ul li a:first-child{
padding-left: 0px;
}

С цветом при наведении проблем нет, он меняется и так. проблема в статичной ссылке. Можете посмотреть на самом сайте ru.intek.az цвет синего цвета и не меняется.

padding-left: 0px;

частично исправляет проблему с отступами но только не на первой кнопке, можете так же на сайте посмотреть, кнопка HOME при на ведении курсора не вся меняется.

Link to comment
Share on other sites

  • 0

Всем спасибо! Проблема решилась! )

Цвет добавил так:

ul li a:first-child{
padding-left: 30px;
padding-right: 30px;
color:#ffffff;
text-decoration: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

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