Strict Standards: Resource ID#27 used as offset, casting to integer (27) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#29 used as offset, casting to integer (29) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#30 used as offset, casting to integer (30) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401
ТвойWeb :: Версия для печати :: Выпадающее меню не встает по центру в Google Chrome
ТвойWeb » WebMaster класс » CSS » Выпадающее меню не встает по центру в Google Chrome

Страниц (1): [1]
 

1. UFO - 24 Мая, 2012 - 17:44:12 - перейти к сообщению
Установил модуль swmenufree для Joomla 2.5.4, которое создает меню, но это не суть важно, важно то, что где-то в коде есть момент, который не дает меню встать по центру в браузере Google Chrome. Во всех остальных популярных - все в порядке.

Вот может кто-то заметит в чем проблема с HTML или CSS. Даю исходные коды, HTML шаблона:

CODE:
<div class="menucontainer" align="center">
<center> <div class="moduletable">
<!--swMenuFree7.2_J2.5 mygosumenu by http://www.swmenupro.com-->
<table id="outertable" align="center" class="outer"><tr><td><div id="outerwrap">
<table cellspacing="0" border="0" cellpadding="0" id="swmenu" class="ddmx" >
<tr>
<td class='item11 acton'>
<!-- тут пункты меню -->
</div></td>
</tr>
</table></div></td></tr></table><hr style="display:block;clear:left;margin:-0.66em 0;visibility:hidden;" />
<script type="text/javascript">
<!--
function makemenu(){
var ddmx = new DropDownMenuX('swmenu');
ddmx.type = 'horizontal/down';
ddmx.delay.show = 0;
ddmx.iframename = 'ddmx';
ddmx.delay.hide = 321;
ddmx.effect = 'fade';
ddmx.position.levelX.left = 0;
ddmx.position.levelX.top = 0;
ddmx.position.level1.left = 0;
ddmx.position.level1.top = 0;
ddmx.fixIeSelectBoxBug = false;
ddmx.autoposition = false;
ddmx.activesub='' ;
ddmx.init();
}
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", makemenu, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", makemenu );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
makemenu()
}
}
else {
window.onload = makemenu();
} }
//-->
</script>
<script type="text/javascript">
<!--
jQuery('#outerwrap ').corner('round tl br 24px');
//-->
</script>

<!--End swMenuFree menu module-->
</div>

</center>
</div>

(Добавление)
И содержание CSS:

CODE:
<style type='text/css'>
<!--
#swmenu table,
#swmenu,
#swmenu tr,
#swmenu td{
border:0 !important;
}
#outerwrap {
top: 0px !important ;
left: 0px;
border:0px solid #CC2F7D ;
padding:0px 16px 16px 16px !important;
display: block;
position: relative;
z-index: 99;
}
.ddmx a.item1,
.ddmx a.item1:hover,
.ddmx a.item1-active,
.ddmx a.item1-active:hover {
padding: 11px 40px 11px 20px !important ;
font-size: 15px !important ;
font-family: Arial, Helvetica, sans-serif !important ;
text-align: center !important ;
font-weight: normal !important ;
color: #EBEFF5 ;
font-style: normal !important;
text-decoration: none !important;
text-transform: none !important;
border-top: 0px solid #F34AFF;
border-bottom: 0px solid #F34AFF;
border-left: 0px solid #F34AFF;
border-right: 0;
display: block;
white-space: nowrap;
position: relative;
z-index: 200;
margin:0px 0px 0px 0px ;
background-image: URL("buttonbg.png") !important ;
background-color: #0F3322 !important;
}
.ddmx td.item11.last a.item1-active,
.ddmx td.item11.last a.item1 {
border: 0px solid #F34AFF;
}
.ddmx a.item1-active,
.ddmx a.item1-active:hover ,
.ddmx .last a:hover,
.ddmx .acton.last a,
.ddmx a.item1:hover{
white-space: nowrap;
background-color: #163961 !important ;
background-image:none !important;
}
.ddmx .item11:hover,
.ddmx .item11.acton:hover,
.ddmx .item11.last:hover,
.ddmx .item11.acton a.item1,
.ddmx .item11.acton a:hover,
.ddmx .item11 a:hover,
.ddmx .item11.last a:hover,
.ddmx a.item1-active,
.ddmx a.item1-active:hover {
color: #E1EBE4 ;
}
.ddmx .acton a.item1-active,
.ddmx .acton a.item1:hover,
.ddmx .acton a.item1 {
white-space: nowrap;
background-image: URL("boibg.png") !important ;
background-color: #FFEC45 !important;
color: #E6E6E6 !important ;
}
.ddmx a.item2,
.ddmx a.item2:hover,
.ddmx a.item2-active,
.ddmx a.item2-active:hover {
padding: 10px 49px 10px 15px !important ;
font-size: 15px !important ;
font-family: Arial, Helvetica, sans-serif !important ;
text-align: left !important ;
font-weight: normal !important ;
font-style: normal !important;
text-decoration: none !important;
text-transform: none !important;
display: block;
white-space: nowrap !important;
opacity:0.8;
filter:alpha(opacity=80)
}
.ddmx a.item2-active ,
.ddmx a.item2 {
background-image:none !important;
background-color: #168C9E !important ;
color: #FEFFF5 !important ;
border-top: 0px solid #94FFB4 !important ;
border-left: 0px solid #94FFB4 !important ;
border-right: 0px solid #94FFB4 !important ;
}
.ddmx a.item2-active.last,
.ddmx a.item2.last {
border-bottom: 0px solid #94FFB4 !important ;
z-index:500;
}
.ddmx .section a.item2:hover,
.ddmx a.item2-active,
.ddmx a.item2-active:hover {
background-image:none !important;
background-color: #D1FF54 !important ;
color: #0A1F14 !important ;
border-top: 0px solid #94FFB4 !important ;
border-left: 0px solid #94FFB4 !important ;
border-right: 0px solid #94FFB4 !important ;
}
.ddmx .section {
border: 0px solid #061C1B ;
position: absolute;
visibility: hidden;
display: block;
z-index: -1;
}
.ddmx .inner_section {
background-color: #168C9E ;
display: block;
}
.ddmx .subsection a{
white-space:normal !important;
}
.ddmxframe {
border: 0px solid #061C1B !important ;
}
* html .ddmx td { position: relative; } /* ie 5.0 fix */
.ddmx .item2-active img,
.ddmx .item2 img,
.ddmx .item1-active img,
.ddmx .item1 img{
border:none;
}

-->
</style>


Меню встает в Chrome лишь слева с отступом равным отступу главной таблицы сайта (или не таблицы, но в целом тому блоку, который в себя включает все модули и контент, граница этого блока совпадает с границами модулей, т.е. величина отступа известная и заданная).

Если кто найдет в чем проблема, буду очень рад и благодарен Улыбка
2. Ray Wen - 25 Мая, 2012 - 02:56:43 - перейти к сообщению
Что-то я смотрю мир за 5 лет ни на шаг вперёд не ушёл... Уже не то что IE6, но и 7 можно из вёрстки исключать. Тег center по сути является устаревшим, параметры align тоже уже не рекомендованы к использованию. По тому что ты тут нарисовал ничего сказать нельзя. Таблицы по идее должны равняться как текст, так как по сути элементом текста они и являются, но Гугл у нас порой идёт какими-то неведомыми путями. Может понадобиться margin:0 auto для выравнивания по центру. В прочем проблема скорее всего кроется выше, а не в самой таблице, либо таблица растягивается на весь экран. Но как я уже сказал, из той каши что тут представлена ничего сказать нельзя.
3. UFO - 08 Июня, 2012 - 13:15:31 - перейти к сообщению
Ray Wen, спасибо за ответ!

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

Данный вопрос решил вот каким образом. Внес все меню еще в один тег:

CODE:
<div class="ChromeMenu">
<!-- содержимое меню -->
</div>


И в CSS внес:

CODE:
DIV.ChromeMenu {
display: inline-block;
margin: 0 auto;
}


Смысл тут имеют обе строчки, не только margin. К сожалению, не очень хорошо, что наверчено столько тегов, причем и таблиц и div'ов, но верстка не самое мое любимое занятие, которое бы у меня получилось хорошо сделать. Поэтому решение такое.

Ну а про стандарты верстки можно прочесть краткую цитату на Баше (внимание: в цитате присутствуют нецензурные слова) Улыбка

Спасибо за наводку!
4. Ray Wen - 08 Июня, 2012 - 14:06:01 - перейти к сообщению
UFO, эта цитата родилась на рубеже перехода с таблиц на дивы... и причина её появления, как не странно - IE6. Подмигивание Нынче он не учитывается, а остальные браузеры(IE7-8 частично) хорошо понимают стандарты, зато таблицы обрабатывают не одинаково.

Форум на AlfaSpace.NET


Powered by ExBB
ExBB FM 1.0 RC1 by TvoyWeb.ru
InvisionExBB Style converted by Markus®

[Script Execution time: 0.0301]     [ Gzipped ]



Notice: ob_end_flush(): failed to send buffer of ob_gzhandler (1) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/page_tail.php on line 33