Macdonald
-
Posts
8 -
Joined
-
Last visited
Macdonald's Achievements
Explorer (1/14)
0
Reputation
-
Точно! Спасибо!
-
Здраствуйте. Подскажите, пожалуйста, вот есть такой html-код: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Меню</title> <style> ul { border: 1px solid black; } </style> </head> <body> <ul> <li><a href="#">Мчади</a></li> <li><a href="#">Када на мацони</a></li> <li><a href="#">Пахлава</a></li> <li><a href="#">Кчуч</a></li> <li><a href="#">Лилибдж</a></li> </ul> </body> </html> Граница вокруг списка появилась, выглядит оно так: Когда добавляю комментарий, то граница не отображается: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Меню</title> <style> <!-- Комментарий --> ul { border: 1px solid black; } </style> </head> <body> <ul> <li><a href="#">Мчади</a></li> <li><a href="#">Када на мацони</a></li> <li><a href="#">Пахлава</a></li> <li><a href="#">Кчуч</a></li> <li><a href="#">Лилибдж</a></li> </ul> </body> </html> Граница вокруг списка не появляется: Почему так происходит?
-
ul li a { float: left; display: block; height: 56px; background: yellow repeat-x; font:12px/56px Verdana, Helvetica, Arial, sans-serif; } Не выравнивался, стало так: Можно добавить еще: li span img { border: none; vertical-align:middle; } Отлично работает и даже в IE6! Спасибо, manum!
-
ul li a { float: left; display: block; height: 56px; background: yellow repeat-x; font:12px/56px Verdana, Helvetica, Arial, sans-serif; } Не выравнивался, стало так:
-
Вот теперь так: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Сайт для примера</title> <meta name="description" content="" /> <meta name="Keywords" content="" /> <meta name="author" content="hamster.by" /> <link rel="stylesheet" type="text/css" href="style2.css" /> </head> <body> <ul> <li><a href="#">О продукции</a></li> <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Наши объекты</a></li> <li><a href="#">Оконный калькулятор</a></li> <li><a href="#">Задать вопрос</a></li> <li><a href="#">Контакты</a></li> </ul> </body> </html> body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; color: #000000; margin: 0; } ul li{ float: left; list-style-type: none; background: url('images/bg-navbar.gif') repeat-x; } ul li a { float: left; display: block; height: 56px; background: url('images/bg-navbar.gif') repeat-x; padding: auto; } ul li a:hover { background: url('images/bg-hover-link.gif') repeat-x; } img { border: none; }
-
А как сделать текст по середине кнопки? Cейчас иконка точно такого же размера как и градиент основной, 56px, иконку поставил посередине в редакторе : html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Сайт для примера</title> <meta name="description" content="" /> <meta name="Keywords" content="" /> <meta name="author" content="hamster.by" /> </head> <body> <ul> <li><a href="#">О продукции</a></li> <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Наши объекты</a></li> <li><a href="#">Оконный калькулятор</a></li> <li><a href="#">Задать вопрос</a></li> <li><a href="#">Контакты</a></li> </ul> </body> </html> css body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; color: #000000; margin: 0; } ul li{ float: left; list-style-type: none; background: url('images/bg-navbar.gif') repeat-x; } ul li a { float: left; display: block; height: 56px; background: url('images/bg-navbar.gif') repeat-x; padding: 0 15px; } ul li a:hover { background: url('images/bg-hover-link.gif') repeat-x; } img { border: none; }
-
Отлично, спасибо, работает и в IE6!
-
Добрый день! Подскажите как с помощью маркированного списка сделать такое горизонтальное меню и работало в IE 6? При наведении ссылка выделяется вот таким фоном Само горизонтальное меню имеет фон - градиент: Выделяется ссылка также градиентом: У каждой ссылки в меню справа добавляется иконка (для примера ссылка - наши объекты): Код HTML <div class="navbar"> <ul> <li><a href="#">О продукции</a></li> <li><a href="#">Наши объекты</a></li> <li><a href="#" class="icon-calculator">Оконный калькулятор</a></li> <li><a href="#">Задать вопрос</a></li> <li><a href="#">Контакты</a></li> </ul> </div>