Необходимы объяснения и ликвидация

LeD4eG · February 13, 2011

Помогите, пожалуйста, разобраться в нескольких проблемах.

по завершению вёрстки (вроде, прошло без эксцессов) возникли следующие вопросы:

1. почему макет ползёт при увеличении масштаба (логотип ползет влево, область контента ползет вправо)? почему так происходит и как этого избежать?

2. всплывающее меню возникает, но возможности воспользоваться появляющимися ссылками нет. для проверки создавал тестирующую страницу с такими вложенными списками. ссылки появлялись и были кликабельными, а на основной странице нет. почему?что я сделал не так?

результат работы: Основная страница

спасибо за внимание и надеюсь на вашу помощь.

Int · February 13, 2011

Меню изчезает скорее всего потому что обрабатывается onmouseout на ссылке меню, однако, если мышь на выпавшем меню, этого происходить не должно.

По первому вопросу нужно внимательнее посмотреть, но дело где-то в то мместе, где логотип выровнен по left:54%, а текст по margin:auto; Текст продолжает выравниваться по середине страницы, но середина смещается, о чём говорит появление горизонтального скроллера. А логотип выравнивается всё так же в 54% от ширины экрана что ли...

Почему появляется скроллер - это нужно посмотреть. Может фоновая картинка какая здоровенная вылазит. А, это body, у которого ширина 1255px. При масштабировании ширина растёт.

Вот и появились люди, которые думают, что ни у кого в России не осталось мониторов с 1024x768

LeD4eG · February 14, 2011

Выпадающее меню создано только на свойствах CSS.

я пробовал задать поля для фона тоже в процентах. ситуация не меняется. а вот по поводу уменьшения размера - это я обязательно попробую.

кстати, раз такой вопрос поднялся, а какой размер страницы на данный момент правильнее задавать, что, как в книжках пишут, считается "хорошим тоном"?

Int · February 14, 2011

Ну я лично тестирую под 1024x768, потому что люди, которые сейчас выбирают 800x600, наверняка представляют, что делают, и согласны терпеть некоторые неудобства.

LeD4eG · February 15, 2011

а как на форуме закрыть тему?

Vlad · February 15, 2011

Пишите: "Спасибо, тема закрыта".

LeD4eG · February 15, 2011

с элементами ниспадающего списка, может, кто-нибудь поможет? я не требую, но очень бы хотелось, чтобы решение нашлось.

LeD4eG · February 21, 2011

товарищи!!!мне нужна ваша помощь!неужели некому помочь в данной ситуации?

LeD4eG · February 26, 2011

проработав множество материала, немного изменил стили, но проблема не уходит. вот упрощённый код страницы, содержащей только меню навигации и выпадающее меню.

<html>
<head>
<title>list</title>
<link rel="stylesheet" type="text/css" href="list_style.css" />
</head>
<body>

<ul id="main_nav">
			<li><a href="#">О компании</a></li>
			<li><a href="#">Услуги</a>
				<ul>

					<li><a href="#">Все виды оценки</a></li>
					<li><a href="#">Автоэкспертиза</a></li>
					<li><a href="#">Автострахование</a></li>
					<li><a href="#">Юридические услуги</a></li>
				</ul><!--end sub_nav-->
			</li>
			<li><a href="#">Тарифы</a></li>

			<li><a href="#">Новости</a></li>
			<li><a href="#">Контакты</a></li>
		</ul><!--end main_nav-->
</body>
</html>

Изменённые стили для этого меню

#main_nav {
			float: left;
			top: 15px;
			left: 270px;
			margin-top: 14px;
			margin-left: 280px;
			}
		#main_nav li{
			float: left;
			display: inline;
			padding: 0 8px;
			border-left: 1px dotted #8b6619;
			position: relative;
			text-align: left;
			}
		#main_nav li:first-child, #main_nav ul li {
			border-left: none;
			}
		#main_nav ul {
			display: none;
			position: absolute;
			top: 20px;
			left: -5px;
			z-index: 1;
			width: 155px;
			height: 80px;
			background-color: #d7ae46;
			}
		#main_nav li a, #main_nav li ul li a{
			color: #8b6619;
			font-family: "Times New Roman", serif;
			font-size: 0.9em;
			font-weight: bold;
			text-decoration: none;
			outline: none;
			}
		#main_nav li a:hover, #main_nav li ul a:hover {
			color: black;
			}
		/*————--Подменю————--*/
			#main_nav li:hover ul {
				display: block;
				}

в Mozilla ссылки подменю реагируют на наведение указателя мыши через раз. в остальных браузерах ниспадающее меню появляется, но ссылки в нем не доступны. подскажите, пожалуйста, в чём моя ошибка?

swetlana · February 26, 2011

Этот код — результат метаний из стороны в сторону?

#main_nav {
			float: left;
			top: 15px;
			left: 270px;
			margin-top: 14px;
			margin-left: 280px;
			}

top и left работают при position: absolute или relative. Тут их нет. Значит смысла нет в этих свойствах. нужность float'а здесь также под сомнением. Маргинами смещается на место — понятно.

		#main_nav li{
			float: left;
			display: inline;

уж выберите один способ. Либо float, либо inline. Какой лучше — зависит от желаемого конечного результата, но сейчас непонятно. А два сразу не нужно.

		#main_nav ul {
			height: 80px;

а когда там станет больше пунктов, что станет с этой подменюшкой? Очередной «глюк»? Не нужна тут высота.

Я вижу «глюк» такой: при попытке перевести мыша с пункта меню «услуги» на выпадающее подменю, это самое подменю прячется до того, как мышь до него доберётся.

Логично. Потому как мышь выходит за пределы li, и уже селектор li:hover не действует.

Значит, надо сделать, чтобы не выходила. Например:

#main_nav a { padding-bottom: 17px; } // нижний отступ достаточный, чтобы покрыть пустоту между пунктом и подменю.

LeD4eG · February 27, 2011

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

несмотря на то, что, на момент написания Вами сообщения, ситуация была решена, я всё равно Вам благодарен. я исправил допущенные ошибки и сделал код лучше. спасибо большое!

Sign In

Необходимы объяснения и ликвидация

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information