Jump to content
  • 0

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


okunev2
 Share

Question

547760cf0425.jpg

Сделал горизонтальное меню с помощью списка li, но не пойму как его растянуть под 100% родительского блока и между каждым меню сделать границы в виде рисунка:

#menu_header1 {
height: 32px;
display: block;
background: url(images/bg2.jpg) top left repeat-x;
}

#menu_header2 {
width: 991px;
text-align: center;
cursor: pointer;
}

#menu_header2 li {
float: left;
padding: 0 0;
}

#menu_header2 li a {
float: left;
padding: 8px 50px;
text-decoration: none;
color: #695737;
font-family: Tahoma;
font-size: 0.8em;
font-weight: lighter;
}


#menu_header2 li a:hover {
background: url(images/bg3.jpg) top center repeat-x;
color: #695737;
/*font-weight: bold;*/
}

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
ширины родительского блока = 100%

а то есть, ширина одной кнопки равняется 100%/Х, где Х - количество кнопок.

спасибо, вроде получилось:

#menu_header1 {
width: 100%;
height: 32px;
display: block;
background: url(images/bg2.jpg) top left repeat-x;
}

#menu_header2 {
text-align: center;
cursor: pointer;
}

#menu_header2 li {
width: 10%;
float: left;
padding: 0 0;
}

#menu_header2 li a {
text-decoration: none;
color: #695737;
font-family: Tahoma;
font-size: 0.8em;
font-weight: lighter;
}


#menu_header2 li a:hover {
background: url(images/bg3.jpg) top center repeat-x;
color: #695737;
/*font-weight: bold;*/
}

Но теперь непонятно как текст выравнить по центру вертикали, и чтобы как на рисунке в первом посте при hover была оранжевая заливка в ширину и высоту этого блока?

Link to comment
Share on other sites

  • 0
li a {display: block; text-align: center; padding: 8px 0;}
li a:hover { ... }

значения полей выставляем соответствующие

делал, так,но чот не то выходит:

6ecb54c5fbbb.jpg

Все гуд, забыл в li a это:

display: block;

теперь работет, но не совсем так, здесь теперь если наводишь на текст тогда только ссылка действует и блок заливается зеленым градиентом, а нужно чтобы ссылка была активна при наведении на блок а не только текст ссылки?

И в ИЕ один косячек, в конце всего списка, когда активно последнее меню, то спрва просвет в один пиксель.

Link to comment
Share on other sites

  • 0

не пойму как сделать это:

1) как при hover по бокам блока справа и слева по высоте растянуть градиент в 2 пикселя?

2) как между списками поставить разделитель между блоками в виде такой картинки и выравнить по вертикали по центру?

2d02b82a0b6d.jpg

#menu_header1 {
width: 100%;
height: 32px;
background: url(images/bg2.jpg) top left repeat-x;
text-align: center;
}

#menu_header2 {
text-align: center;
cursor: pointer;
padding:0;
}

#menu_header2 li {
width: 10%;
float: left;
}

#menu_header2 li a {
display: block;
padding: 8px 0;
text-decoration: none;
color: #695737;
font-family: Tahoma;
font-size: 0.8em;
font-weight: lighter;
}


#menu_header2, li a:hover {
display: block;
background: url(images/bg3.jpg) top center repeat-x;
color: #695737;
/*font-weight: bold;*/
}

Link to comment
Share on other sites

  • 0
не пойму как сделать это:

1) как при hover по бокам блока справа и слева по высоте растянуть градиент в 2 пикселя?

2) как между списками поставить разделитель между блоками в виде такой картинки и выравнить по вертикали по центру?

2d02b82a0b6d.jpg

#menu_header1 {
width: 100%;
height: 32px;
background: url(images/bg2.jpg) top left repeat-x;
text-align: center;
}

#menu_header2 {
text-align: center;
cursor: pointer;
padding:0;
}

#menu_header2 li {
width: 10%;
float: left;
}

#menu_header2 li a {
display: block;
padding: 8px 0;
text-decoration: none;
color: #695737;
font-family: Tahoma;
font-size: 0.8em;
font-weight: lighter;
}


#menu_header2, li a:hover {
display: block;
background: url(images/bg3.jpg) top center repeat-x;
color: #695737;
/*font-weight: bold;*/
}

чот я не соображу как это сделать :D

Link to comment
Share on other sites

  • 0

я б это сделал изначально если б понял что именно имеется ввиду.

что такое

растянуть градиент в 2 пикселя?

и

как между списками поставить разделитель между блоками в виде такой картинки и выравнить по вертикали по центру?

какими списками? тут только один список, вроде.

опишите более понятно проблему, пожалуйста.

Link to comment
Share on other sites

  • 0

у меня есть картинка в два пикселя шириной и 7 пикселей высотой, её нужно поставить между блоками меню вертикали по центру - это показано на рисунке стрелочкой с цифрой 2 (но когда hover, нужно чтобы эта картинка исчезали)

и есть ещё одна картинка в два пикселя шириной и 32 высотой, вот её нужно встаить справа и слева от блока при hover внутри.

а если точней вот рисунок:

8002e8ae627d.gif

Link to comment
Share on other sites

  • 0
возможно как-то так?

только тут границы а не градиент.

я знаю как сделать для гардиента, но под IE6 надо подключать hover специально.

				ul.menu a:hover {
background: url(images/bg3.jpg) 0 0 repeat-x;
margin: 0 -1px;
color: #695737;
font-weight: bold;
border-left: 2px solid #333;
border-right: 2px solid #333;
z-index: 2;

как бы здесь вместо правого и левого border прижать две картинки к этим двум краям? а то эти картинки в градиенте и шириной 2 пикселя :D

Link to comment
Share on other sites

  • 0

для этого надо заменить фоновый рисунок, который висит на <li>

то есть li:hover { ... }

указываем линк на рисунок новый...

тогда не нужны правила:

margin: 0 -1px;
border-left: 2px solid #333;
border-right: 2px solid #333;
z-index: 2;

но li:hover не работает по-нормальному в ИЕ6

Link to comment
Share on other sites

  • 0
как бы здесь вместо правого и левого border прижать две картинки к этим двум краям? а то эти картинки в градиенте и шириной 2 пикселя :D

А что если с помощью java-script решить эту проблему.

Вставить между кнопками rollover-объекты и функцией менять их.

Грузновато, конечно, но будет как в условии...

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