Jump to content
  • 0

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

LeD4eG

Asked by LeD4eG,

 Share

Question

LeD4eG Explorer

LeD4eG

Posted
Posted

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

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

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

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

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

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

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
Int Explorer

Int

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
LeD4eG Explorer

LeD4eG

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
LeD4eG Explorer

LeD4eG

Posted
  • Author
Posted

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

<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 ссылки подменю реагируют на наведение указателя мыши через раз. в остальных браузерах ниспадающее меню появляется, но ссылки в нем не доступны. подскажите, пожалуйста, в чём моя ошибка?

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

#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; } // нижний отступ достаточный, чтобы покрыть пустоту между пунктом и подменю.

Link to comment
Share on other sites
  • 0
LeD4eG Explorer

LeD4eG

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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