bulleet's Content - Учим делать сайты. Форум про HTML, CSS и JavaScript

Баги в меню..

bulleet replied to bulleet's question in HTML Coding

если б была известна ширина, то я сразу бы предложила margin:auto; но так ширина не задана, я предложила абсолютное позиционирование. А почему просто не поставить body центрирование, убрать float у #nav, а также добавить #nav display:inline-block? Спасибо, все гут, Тема закрыта)

Баги в меню..

bulleet posted a question in HTML Coding

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" />  </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; }

Прошу осмотреть работу.

bulleet posted a question in HTML Coding

Не могу понять как сделать всю страницу определенного размера. А самое главное - это то, что при уменьшении окна браузера, кнопки меню смещаются друг под друга. Исходник <!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" />  </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; }

Sign In

bulleet

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Everything posted by bulleet

Баги в меню..

Баги в меню..

Прошу осмотреть работу.

Forums

Important Information