VPF::Нужна критика и подсказки - Форум программистов

CmndrAlexGreen

Дата 10.6.2011, 23:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 1.3.2009

Репутация: нет
Всего: нет

Уважаемые профи, посмотрите моё меню и поправьте если где-что ни так. Делал его так, чтоб работало оптимально во всех браузерах. Был вариант для IE6 с таблицами через <if>, но по моему и без них в старых браузерах отображает вполне корректно.

Код


<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="1" />
<meta name="description" content="1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>1</title>
</head>
<body><!--начало бокса--><div id="box">
        <div id="menu">

        <ul><li class="CurrentItem">
         <a href="" title="" rel=""><b>Главная</b></a></li>
        <li>
         <a href="" title="" rel=""><b>Раздел 1</b></a></li>
        <li>
         <a href="" title=""><b>Раздел 2</b></a></li>
        <li>
         <a href="" title="" rel=""><b>Раздел 3</b></a></li>
        <li>
         <a href="" title="" rel=""><b></b></a></li>
        <li>
         <a href="" title="" rel=""><b></b></a></li>
        <li>
         <a href="" title="" rel=""><b></b></a></li>
        <li>
         <a href="" title="" rel=""><b></b></a></li>
        <li>
         <a href="" title="" rel=""><b></b></a></li>
        <li>
         <a href="" title="" rel=""><b>RUS</b></a></li>
        <li>
         <a href="" title="" rel=""><b>ENG</b></a></li>
        </ul>

        </div>

</div><!--конец бокса--></body>
</html>

Код


/*----------общие параметры для страницы----------*/

html {background:#fff;}

body {
margin:0; 
padding:0; 
font-family:arial, verdana, sans-serif; 
font-size: 12px;
color:#3e3e3e; 
text-align:center;
}

ul {list-style:none;padding:0; }
a, a:visited {color:#048;text-decoration:none;}
a:hover {text-decoration:none;}
a img {border: none}




/*----------общая коробка для всего сайта----------*/

#box    {border: px solid black;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
width: 900px;}


#menu 
{clear:both ;
background-color:#F97906;
width:900px;
height:25px;
margin-bottom: 20px;}

#menu ul {padding:0px; margin:0;list-style-type: none;height:25px; position:relative;}
#menu ul li {float:left; position:relative; list-style-image: none;margin:0;}

#menu ul li a,
#menu ul li a:link,
#menu ul li a:visited
{
display:block; height:25px; line-height:25px; padding:0 20px 0 0; 
float:left; text-decoration:none; font-weight:lighter;font-size:0.95em;
color:#fff;font-family: Trebuchet MS, Verdana, Helvetica, Arial, Tahoma;
}
#menu ul li a b {display:block; height:25px; float:left; padding:0 0 0 20px; cursor:pointer; color:#fff; }

#menu ul li a:hover {background-color:#000; line-height:25px; height:25px; position:relative; color:#ffffff;}
#menu ul li a:hover b {background-color:#000; line-height:25px; position:relative; color:#ffffff;}
#menu ul li:hover > a {background-color:#000; line-height:25px; height:25px; position:relative; color:#ffffff;}
#menu ul li:hover > a b {background-color:#000; line-height:25px; position:relative; color:#ffffff;}

#menu ul li.CurrentItem a,
#menu ul li.CurrentItem a:link,
#menu ul li.CurrentItem a:visited
{   
background-color:#000; line-height:25px; height:25px; color:#fff; border:0;
}
#menu ul li.CurrentItem a b {background-color:#000; line-height:25px; color:#fff;}



/*-----раздел подвала-----*/
#footer    {    clear:both; margin-top:20px;width:900px; height:25px;border-top: 1px solid #ddd;}
#copyr    {    margin-left:20px; font-size: .7em;}

ссылка на рабочую страницу тут

Это сообщение отредактировал(а) CmndrAlexGreen - 11.6.2011, 18:07

olldman

Дата 11.6.2011, 07:07 (ссылка)

(нет голосов)

Загрузка ...

Дед

Профиль
Группа: Участник
Сообщений: 75
Регистрация: 9.1.2009
Где: Омск

Репутация: 6
Всего: 6

Раздел 2 - не закрыт элемент LI - если уж закрываете, то закрывайте все.
<b>RUS</a></b> - нарушена вложенность элементов
Ну и слишком уж много стиля для такого простого меню. Оправдано ли присутствие элемента <b>?

CmndrAlexGreen

Дата 11.6.2011, 18:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 1.3.2009

Репутация: нет
Всего: нет

olldman, поправил </li> и </a>. Насчет <b> это как вариант с отступами, просто при выставлении падингов у меня были небольшие проблемы с ИЕ.

CmndrAlexGreen

Дата 14.6.2011, 13:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 1.3.2009

Репутация: нет
Всего: нет

Подскажите как лучше реализовать крайние две ячейки с rus / eng. так чтоб код не сильно увеличивался и в тоже время нормально отображалось во многих браузерах?

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »