Выпадающее верхнее меню

Mouse · Сообщение **Mouse** » 03.02.2013 16:17

Здравствуйте!
Подскажите, пожалуйста, куда прописывать вот такой код css

*{
    margin:0;
    padding:0;
}
.page{
    margin:0 auto;
    width:995px;
}
ul{
    list-style:none;
    width:100%;
    height:40px;
    background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
    float:left;
    border-right:1px solid #333;
}
ul li a{
    display:block;
    height:40px;
    padding:0 35px;
    float:left;
    text-transform: uppercase;
    font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
    color:#fff;
    text-decoration:none;
    text-align:center;
}
ul li a:hover,
ul li.active a{
    background:url(images/bg-button.gif) top left repeat-x;
}

Пробовала в colors, в links и создавала отдельный файл - результат одинаков - кнопки я вижу, но они ничего не наследуют, просто прозрачные с текстом внутри и, кроме того, при этой правке слетают блоки форумов.
Подскажите, пожалуйста, как и куда этот код правильно прописать?

Заранее большое спасибо.

angst66 · Сообщение **angst66** » 03.02.2013 16:22

Mouse Как править или создать стиль.
совет пятый

Mouse · Сообщение **Mouse** » 03.02.2013 16:25

Здравствуйте, angst66
Я же писала,

Mouse писал(а): Пробовала в colors, в links и создавала отдельный файл

то есть, делала именно то, что в пятом совете. Может, объянила не так.
Совет пятый не помогает.

angst66 · Сообщение **angst66** » 03.02.2013 16:32

Mouse
Не видно изменений или стиль ломается? Что за стиль? Где вы взяли данный код? Можно поподробней?

Mouse · Сообщение **Mouse** » 03.02.2013 16:36

angst66,
Изменения я вижу, но не такие, как должны быть

Mouse писал(а):- кнопки я вижу, но они ничего не наследуют, просто прозрачные с текстом внутри

Стиль ломается, да.
Код взяла отсюда http://wmasterland.ru/menu_for_site?pag ... C0%2C0%2C1 , пред пред последний.
Стиль просильвер.

Сообщение **Татьяна5** » 03.02.2013 17:09

Стиль и сломается. В коде идет переназначение css-свойств.
Нужно добавить к первому ul класс (к примеру, <ul class="jqMenu">) и переписать код с учетом этого

Код: Выделить всё

ul.jqMenu{
    list-style:none;
    width:100%;
    height:40px;
    background:#000 url("{T_THEME_PATH}/images/bg-nav.gif") top left repeat-x;
}
ul.jqMenu li{
    float:left;
    border-right:1px solid #333;
}
ul.jqMenu li a{
    display:block;
    height:40px;
    padding:0 35px;
    float:left;
    text-transform: uppercase;
    font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
    color:#fff;
    text-decoration:none;
    text-align:center;
}
ul.jqMenu li a:hover,
ul.jqMenu li.active a{
    background:url("{T_THEME_PATH}/images/bg-button.gif") top left repeat-x;
}

Картинки должны быть по адресу /styles/prosilver/theme/images/

П.С. http://htmlbook.ru/ - очень полезный сайт

Mouse · Сообщение **Mouse** » 03.02.2013 17:26

Татьяна, а куда прописывать этот измененный код? В отдельный файл стиля, как в пятом совете или добавить в существующие? Если в существующие, то куда именно и после чего именно?
Спасибо

Сообщение **Татьяна5** » 03.02.2013 17:32

Лучше как в 5-м совете

Mouse · Сообщение **Mouse** » 03.02.2013 17:51

Танечка, спасибо Вам огромное! Все получилось, когда " переименовала " код

Mouse · Сообщение **Mouse** » 18.02.2013 6:10

Всем здравствуйте!
Установила вышеописанное меню и наслаждалась видом до тех пор, пока не открыла Оперу. ( пользуюсь хромом )
В Опере меню не видно, а лишь накосяченное место ( скрин прилагаю )
Думала, проблема только в Опере, но, как оказалось, в Мозиле тоже самое.

Корректно меню отображается только в Хроме и IE.
Подскажите, пожалуйста, что нужно сделать, чтобы это исправить?
Заранее огромное спасибо

Гугл и IE

google.png

Opera и Мозила

opera.png

МайскийЖук · 18.02.2013 6:44

Адрес конференции дайте, посмотрим в разных браузерах на ваше меню.

Mouse · Сообщение **Mouse** » 18.02.2013 6:56

Майский Жук, добрый день.
К сожалению, не могу, так как форум пока только на локалке, все мудрим с цветовой гаммой да кнопками

, никак не можем выбрать, и теперь вот еще новая проблема с меню обнаружилась.
Вот ведь что странно - я точно помню, что открывала пару дней назад Оперу, когда выравнивала меню по размеру шапки, долго мучалась, так как в гугле один размер подходит, а в эксплорере и опере немного другой, разница незначительна, но все же..так вот пару дней назад Опера видела меню и отображала все корректно, что могло произойти?
Возможно, я где - то накосячила, но за эти пару дней не было внесено никаких особых изменений, только многочисленные изменения бэкграунда да кнопок с целью найти нужный цвет. И еще поменяла иконку - домик на свою картинку. Вот все, что делала.
Где может быть косяк? Может, дать овералл хэдер?

МайскийЖук · 18.02.2013 9:48

А может вы просто в Opera нажмете CTRL-F5 для обновления кэша, и все наладится? Попробуйте.

Ну и overall_header.html тоже давайте, посмотрим на него.

Mouse · Сообщение **Mouse** » 18.02.2013 13:29

CTRL 5 не помогает.
И проблема не только в Опере, но и в Мозиле тоже

Вот мой overall header:

Код: Выделить всё

<!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" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<script>
var tit = "**";
var i = 0;

function writetitle() {
  document.title = tit.substring(0,i);
    i++;
    setTimeout("writetitle()", 200)
}
writetitle()
</script>

<link href="{T_THEME_PATH}/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />



<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

 

<!--
	phpBB style name: Neon
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:	  &copy; 4riS.Info - Freelance Designer

	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	};

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	};
 
 function doCollapseExpand(id,img){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.images[img].src='{ROOT_PATH}images/dopinfo_up.gif'; 
} else {
      b.style.display='none';
   document.images[img].src='{ROOT_PATH}images/dopinfo_down.gif';
} return false; } 
 
// ]]>
</script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
	<script type="text/javascript" src="{T_TEMPLATE_PATH}/opacity.js"></script>
<!-- ENDIF --> 
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<!-- Loginza widget JavaScript -->
<script src="http://s1.loginza.ru/js/widget.js" type="text/javascript"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.collapse.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/easing.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.ui.totop.js"></script>

<script type="text/javascript">
// <![CDATA[
		$(document).ready(function() {
			/*
			var defaults = {
	  			containerID: 'moccaUItoTop', // fading element id
				containerHoverClass: 'moccaUIhover', // fading element hover class
				scrollSpeed: 2000,
				easingType: 'linear' 
	 		};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
// ]]>
</script>

<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active2"); return false;
	});	 
});
// ]]>

</script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
	<!--[if lt IE 7]>
	<link rel="stylesheet" href="{T_THEME_PATH}/ie6-position-fixed.css" type="text/css" media="screen, projection" />
	<![endif]-->
<!-- ENDIF --> 

<!-- IF SITE_BG_IMG -->
<style type="text/css">
<!--
.headerbar {background:url("{SITE_BG_IMG}") repeat;}
-->
</style>
<!-- ENDIF -->
<!-- IF S_SNOW_ENABLED and S_SNOW_UCP_ENABLED -->
<script type="text/javascript" src="{ROOT_PATH}js/snowstorm.js"></script>
<!-- ENDIF -->

<!-- MOD : MSSTI ABBC3 (v{S_ABBC3_VERSION}) - Start //-->
<!-- INCLUDE ./../../abbcode/abbcode_header.html -->
<!-- MOD : MSSTI ABBC3 (v{S_ABBC3_VERSION}) - End //--> 
 </head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
<div id="pm-popup" class="panel">
	<p>{PM_POPUP_MESSAGE}<br /><br />{PM_POPUP_CLICK_TO_VIEW}</p>
	<p class="small"><a href="#" onclick="setOpacity('main-block',1);document.getElementById('pm-popup').style.display='none';return false;">{L_CLOSE_WINDOW}</a></p>
</div>
<!-- ENDIF -->




	<div id="custom-header">
		<div class="inner">
			<div class="custom-header-width">
				<div id="site-description">
					<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
					<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
				</div>
				<div id="custom-menu-h">
            			<td>
			<a href="https://loginza.ru/api/widget?token_url={LOGINZA_RETURN_URL}" title="Войти через аккаунт соц.сети или OpenID" accesskey="x" class="loginza">
			<img 
src="http://**/styles/ProHalloween/theme/images/loginza.png" width="256" height="63" alt="Авторизация" align="top" border="0" style="margin-top:3px;"
onmouseover="this.src='http://**/styles/ProHalloween/theme/images/loginza1.png'" 
onmouseout="this.src='http://**/styles/ProHalloween/theme/images/loginza.png'" />
</a>
</td>	 
     <div id="search-box">
			
				<td>
				
	<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><img src="{T_THEME_PATH}/images/search11.png" width="280" height="74" 
onmouseover="this.src='http://**/styles/ProHalloween/theme/images/searchh.png'" 
onmouseout="this.src='http://**/styles/ProHalloween/theme/images/search11.png'" />
	</a>
</td>
				</div>
			</div>
		</div>
	</div>
</div>      
   <!-- ENDIF -->
 <ul class="jqMenu">

    <li><a href="{U_PORTAL}" title="{L_PORTAL}">ПОРТАЛ</a><li>		
    <li><a href="{U_INDEX}" title="{L_INDEX}">ФОРУМ</a><li>
    <li><a href="{U_NEWS}" title="{L_NEWS}">НОВОСТИ</a></li>	
    <li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">УЧАСТНИКИ</a></li>
    <li><a href="{U_MEDALS}" title="{L_MEDALS_VIEW_EXPLAIN}">НАГРАДЫ</a></li> 
    <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">FAQ</a></li>
    <li><a href="{U_MCP}" title="{L_MCP}">ЦЕНТР</a></li> 
    <li><a href="{U_PROFILE}" title="{L_PROFILE}">ПРОФИЛЬ</a></li>
    <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"<!-- IF not S_USER_LOGGED_IN and not S_DISPLAY_FULL_LOGIN --> onmouseover="delay1 =setTimeout('document.getElementById(\'quick-login\').style.zIndex=\'2\'', 500);" onmouseout="clearTimeout(delay1)"<!-- ENDIF -->>{L_LOGIN_LOGOUT}</a></li>	
    
</ul>	
<div id="custom-navbar"> 
	<div class="custom-header-width">
		<div id="custom-navbar"> 
	<div class="custom-header-width">
		<div id="social">
	<td>
			<ahref="http://www.facebook.com/" title="Мы на Фэйсбуке">
			<img src="http://**/styles/ProHalloween/theme/images/but1.gif" width="48" height="48" 
onmouseover="this.src='http://**/styles/ProHalloween/theme/images/but2.gif'" 
onmouseout="this.src='http://**/styles/ProHalloween/theme/images/but1.gif'" />
</a>
</td>	
		
	<td>
			<a href="http://twitter.com/" title="Мы на Твиттере">
			<img src="http://**/styles/ProHalloween/theme/images/tw1.gif" width="48" height="48" 
onmouseover="this.src='http://**/styles/ProHalloween/theme/images/tw2.gif'" 
onmouseout="this.src='http://**/styles/ProHalloween/theme/images/tw1.gif'" />
</a>
</td>		
			
		</div>
	</div>
</div>
<div id="header-bg"></div>
<div id="wrap-bg">
<div id="wrap">
		<div id="custom-navbar-top">
			<div class="inner"><span class="corners-top"><span></span></span>
				<ul class="linklist navlinks">
								
									<li class="icon-home"><!-- IF U_PORTAL --><a href="{U_PORTAL}">{L_PORTAL}</a> &#187; <!-- ENDIF --><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
					<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
					<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
					<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
				</ul>
			<span class="corners-bottom"><span></span></span></div>
		</div>
		
					


	<a name="start_here"></a>
	<div id="page-body">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
		<!-- INCLUDE announcement_centre.html -->

Pazh · Сообщение **Pazh** » 18.02.2013 13:38

FireBug тебе в помощь. Смотри почему у тебя не подтягивается css, в котором прописан класс jqMenu, кроме того проверь вкладку Консоль (FireBug) на наличие js ошибок

phpBB Guru - Официальная русская поддержка форума phpBB