Про адаптацию меню....

Drago · January 21, 2008

Дорогие соколлеги.

Я сам по себе веб-дизигнер, с упором больше на слово "дезигнер", чем на "веб".

То бишь всю сознательную жизнь я провожу в фотошопе, а не в html редакторе.

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

И я это практически сделал. И даже на дивах.

Проблема вот в чем.

Есть горизантальное ява-меню. В Файрфоксе и IE 7 все сверстано ровно, на том месте, где должно быть, в общем все хорошо.

А вот в IE 6 это меню почему-то не горизонтальное, а вертикальное.

То есть каждая последующая ячейка находится под предыдущей, да еще и разъезжается чуть ли ни на всю ширину браузера...

Кто может помочь решить эту проблему?

Если нужен кусок кода - вы только скажите, какой именно, я сразу выложу....

Dimitry Wolotko · January 21, 2008

К сожалению телепаты в отпуске. Дайте кусок кода со строки 1 до последнею.

Drago · January 21, 2008

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
 <meta http-equiv="content-type" content="windows-1251" />
 <title>Hello</title>
 <link rel="stylesheet" type="text/css" href="t8.css" />
 <link rel="shortcut icon" href="images/favicon.ico" />
 <script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div id="canvas">
 <div id="topmenu">
 <ul id="topmenu1">
 <li><img src="images/topmenurazdel.gif" /> 
 </li>
 <li><a href="#">Модельный ряд</a>
 </li>
 <li><img src="images/topmenurazdel.gif" /> 
 </li>
 <li><a href="#">Услуги</a>
 </li>
 <li><img src="images/topmenurazdel.gif" /> 
 </li>
 <li><a href="#">Владельцам</a>
 </li>
 <li><img src="images/topmenurazdel.gif" /> 
 </li>
 <li><a href="#">Автосалон</a>
 </li>
 <li><img src="images/topmenurazdel.gif" /> 
 </li>
 <li><a href="#">Форум</a> 
 </li>
 </ul>
 </div>
</div> 

</body>
</html>

И CSS

/*Верхнее меню*/
#topmenu {
 position: absolute;
 float:right;
 right: 50px;
 top: 87px;
 z-index: 50;
 height: 23px;
}
#topmenu ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
}
/*Top level list items*/
#topmenu ul li {
 position: relative;
 display: inline;
 float: left;
}
/*Top level menu link items style*/
#topmenu ul li a, #welcome{
 height: 23px;
 display: block;
 font-size: 12px;
 padding: 5px 17px 0 17px;
 border-top: 1px solid #abacab;
 border-bottom: 3px solid #e70000;
 border-left-width: 0;
 text-decoration: none;
 background: url(images/mainmenuback.gif) center center repeat-x;
}
/*Sub level menu*/
#topmenu ul li ul{
 left: 0;
 top: 0;
 border-top: 0px solid #202020;
 position: absolute;
 display: block;
 visibility: hidden;
 z-index: 100;
}
/*Sub level menu list items*/
#topmenu ul li ul li{
 display: inline;
 float: none;
}
/* Sub level menu links style */
#topmenu ul li ul li a{
 height: 15px;
 width: 103px; /*width of sub menu levels*/
 padding: 2px 5px 2px 19px;
 background: #e3e3e3 url(images/tochka_ser.gif) left center no-repeat;
 border-width: 0 0px 1px 0px;
 border-bottom: 1px solid #abacab;
 text-align: left;
}
#topmenu ul li a:hover{
 background: url(images/grpx.gif) repeat top left;
 color: #626563;
}
#topmenu ul li ul li a:hover{
 background: #626563 url(images/tochka_bel.gif) no-repeat left center;
 color: #fff;
}
.razd {
 width:1px;
 height: 29px;
 z-index:100%;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
 padding-top: 1em;

Vlad · January 21, 2008

Самое простое, удалить display: block у стиля #topmenu ul li a

Sign In

Про адаптацию меню....

Question

Drago

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

Drago

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Обсуждения

Forums

Important Information