Jump to content

bulleet

Newbie
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

bulleet's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. b0s

    Простите, мне стыдно. Слишком я легко отнёсся, к вашему вопросу. Всё самое главное пропустил.

    Меню само по себе просто офигенное! Сделанное без JS! Это пипец, я бы до такого не додумался. Если вы его сами сделали, то вы молодец!

    Я обнаружил, что если убрать флоат то нижняя часть где появляются пункты, уезжает аш до конца страницы. Я попробую что нибудь придумат...

  2. bulleet
    если б была известна ширина, то я сразу бы предложила margin:auto; но так ширина не задана, я предложила абсолютное позиционирование. А почему просто не поставить body центрирование, убрать float у #nav, а также добавить #nav display:inline-block? Спасибо, все гут, Тема закрыта)
  3. bulleet
    http://testsite.sz3.ru пожалуйста, помогите исправить баги. не могу оцентровать блок меню по центру. относительно разрешения экрана автоматически не хочет ну никак по центру вставать. кнопки меню при уменьшении окна браузера смещаются друг под друга. да и вообще в принципе если есть замечания по коду. выскажите плииз. КОД: Исходник: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Тестовый сайт</title> <style type="text/css" media="screen"> html{margin:10px 20px;} </style> <link rel="stylesheet" href="main.css" type="text/css" /> <!-- Таблицы стилей main.css --> </head> <body> <!-- Начало кода "Основное меню" --> <div id="nav"> <ul class="current"> <li><a href="***"><b>Главная</b></a> <ul class="sub_active"> <li class="current_sub"><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="***"><b>Магазин</b></a> <ul class="sub"> <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> <li><a href="***">***</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="***"><b>***</b></a> <ul class="sub"> <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> </li> </ul> <ul class="select"> <li><a href="***"><b>***</b></a> <ul class="sub"> <li><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="***"><b>***</b></a> <ul class="sub"> <li><a href="***">***</a></li> <li><a href="***">***</a></li> </ul> </li> </ul> </div> <!-- Конец кода "Основное меню" --> <br /><br /><br /><br /> </body> </html> CSS: body { background-color: #000; } ul#nav { list-style-type:none; margin:0; padding:0; } #nav { float:left; height:100%; position:relative; margin: 200px auto 0 0; padding: 3px 0 0 0; overflow:visible; } #nav .select, #nav .current { margin:0; padding:0; list-style:none; display:inline; } #nav li { font-family: Tahoma; font-size:2px; display:inline; margin:0; padding:0; height:auto; } #nav .select a, #nav .current a { display:block; height:40px; float:left; background: url("images/left_nav.png") no-repeat left top; padding:0 0 0 5px; text-decoration:none; font-size:14px; line-height:40px; white-space:nowrap; margin-right: 2px; z-index: 500; } #nav .select a b, #nav .current a b { height:100%; display:inline-block; background:url("images/right_nav.png") no-repeat right top; padding:0 20px 0 15px; color:#ddd; } #nav .select a:hover, #nav .select li:hover a { background-position:0 -50px; cursor:pointer; } #nav .select a:hover b, #nav .select li:hover a b { background-position:100% -50px; color:#fff; } #nav .sub { display:none; } #nav .current a { background-position:0 -50px; border-color:#046; } #nav .current a b { background-position:100% -50px; color:#fff; } #nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover { color:#fff; text-decoration:underline; } #nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active { display:block; position:absolute; width:100%; height: 35px; top:40px; left:0; background:#171717; padding:0; z-index:100; } #nav .sub_active { z-index:10; } #nav .sub, #nav .sub_active { margin:0; padding:0; list-style:none; } * html #nav .sub_active, * html #nav .select a:hover .sub { z-index:-1; margin-top:0; margin-top:1px; } #nav .sub_active a { height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal; } #nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a { display:inline; background:none; padding:0 10px; margin:0; font-size:13px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:#eee; height:35px; line-height:35px; }
  4. bulleet
    Не могу понять как сделать всю страницу определенного размера. А самое главное - это то, что при уменьшении окна браузера, кнопки меню смещаются друг под друга. Исходник <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>ТИТУЛ</title> <style type="text/css" media="screen"> html{margin:10px 20px;} </style> <link rel="stylesheet" href="main.css" type="text/css" /> <!-- Таблицы стилей main.css --> </head> <body> <!-- Начало кода "Основное меню" --> <div id="nav"> <ul class="current"> <li><a href="***"><b>Главная</b></a> <ul class="sub_active"> <li class="current_sub"><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="***"><b>Магазин</b></a> <ul class="sub"> <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> <li><a href="***">***</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="***"><b>***</b></a> <ul class="sub"> <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> </li> </ul> <ul class="select"> <li><a href="***"><b>***</b></a> <ul class="sub"> <li><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> <li><a href="***">***</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="***"><b>***</b></a> <ul class="sub"> <li><a href="***">***</a></li> <li><a href="***">***</a></li> </ul> </li> </ul> </div> <!-- Конец кода "Основное меню" --> <br /><br /><br /><br /> </body> </html> CSS body { background-color: #000; } ul#nav { list-style-type:none; margin:0; padding:0; } #nav { float:left; width:100%; height:75px; position:absolute; margin:200px 10px 10px; } #nav .select, #nav .current { margin:0; padding:0; list-style:none; display:inline; } #nav li { font-family: Arial; display:inline; margin:0; padding:0; height:auto; } #nav .select a, #nav .current a { display:block; height:40px; float:left; background: url("images/left_nav.png") no-repeat left top; padding:0 0 0 5px; text-decoration:none; font-size:14px; line-height:40px; white-space:nowrap; margin-right: 2px; z-index: 500; } #nav .select a b, #nav .current a b { height:100%; display:inline-block; background:url("images/right_nav.png") no-repeat right top; padding:0 20px 0 15px; color:#ddd; } #nav .select a:hover, #nav .select li:hover a { background-position:0 -50px; cursor:pointer; } #nav .select a:hover b, #nav .select li:hover a b { background-position:100% -50px; color:#fff; } #nav .sub { display:none; } #nav .current a { background-position:0 -50px; border-color:#046; } #nav .current a b { background-position:100% -50px; color:#fff; } #nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover { color:#fff; text-decoration:underline; } #nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active { display:block; position:absolute; width:100%; height: 35px; top:40px; left:0; background:#171717; padding:0; z-index:100; } #nav .sub_active { z-index:10; } #nav .sub, #nav .sub_active { margin:0; padding:0; list-style:none; } * html #nav .sub_active, * html #nav .select a:hover .sub { z-index:-1; margin-top:0; margin-top:1px; } #nav .sub_active a { height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal; } #nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a { display:inline; background:none; padding:0 10px; margin:0; font-size:13px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:#eee; height:35px; line-height:35px; }
×
×
  • 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

  I accept