Смещение текста пункта меню при наведении

@yuraha18 · Регистрация: 16.12.2009

Author24 — интернет-сервис помощи студентам

Всем привет! Я создал меню сайта, но когда него наводиш курсор, то текст под меню начинает "бегать " по екрану и становится после меню. Вот сss и html

CSS

*{
padding: 0;
margin: 0;
}
 
body {
background-color: #86F6BD;
}
 
#block {
 width: 900px;
 background-color: #0BC95F;
 margin: 0 auto 0 auto;
}
 
#block img {
border: none;
width: 300px;
margin-left: 100px;
}
 
#text{
z-index:2;
margin: 25px 0 0 0;
background-color: green;
}
/*---------------------*/
#menu ul li{margin:0px;padding:0px;list-style:none; }
 
#menu {
 list-style:none;
 
}
#menu > ul{
    float:left;
    width:153px;
}
 
#menu  ul li{
    display:none;
    position:center;
    
    width:125px;
       
}
 
 
 
#menu ul:hover li{
display:block;
 
}
 
 
 
#menu > ul{
    background-color:#54FF9F;
    text-align:center;
     
    padding:10px 0px 1px 10px;
    border:1px solid #008B00;
}
#menu > ul:hover{
    background-color:#43CD80;
 
}
 
#menu > ul > a{
    font:16px "Arial";
    color:#000000;
    text-decoration:none;
    
}
 
 
#menu  li {
    padding: 10px 10px 10px 20px;
    background-color:#43CD80;
    font-size: 16px;
}
#menu  ul {
   
    text-align:center;
    padding:10px 10px 10px 15px;
}
#menu ul  a{
           font-weight: bolder;
        font-size: 18px;
     font-family: Geneva, Arial, Helvetica, sans-serif;
    color:#000000;
    text-decoration:none;
    text-align:center;
 
}
#menu ul  a:hover{ 
         font-weight: bolder;
     font-family:  Arial, Helvetica, sans-serif;
    color:black;
    text-decoration:none;
 
}
 
#menu ul  li a:hover{
 font-size: 22px;
     font-family:  Arial, Helvetica, sans-serif;
    color:#EEDD82;
    text-decoration:none;
       
}
 
#menu ul li {
       
        margin: auto ;
    padding: 3px 5px 5px 5px;
}
 
#menu ul  li a{font-weight: bold;
     font-family: Geneva, Arial, Helvetica, sans-serif;
    color:green;
    text-decoration:none;
        
}

HTML5

<div id = "block">
  
  <img src = Ukraine.png>
  
    <div id = "menu">
      ...список меню...
  </div>
 
 <div id = "text">
  текст 
 </div>

@MVS76 · 25.03.2013, 05:04

Сообщение от yuraha18

#menu > ul:hover{
* * background-color:#43CD80

вот вы указали hover, но не указали значения, то есть получается при наведении мышки, за что и отвечает hover, менюшка не знает что ей делать.
Укажите везде размеры hover точно такие-же как и без hover, пример:

CSS

#menu > ul{
    background-color:#54FF9F;
    text-align:center;
     
    padding:10px 0px 1px 10px;
    border:1px solid #008B00;
}
#menu > ul:hover{
    background-color:#43CD80;
//здесь укажите те же отступы и размеры что и без hover(имеется ввиду что влияют на расположение объектов)
    text-align:center;
    padding:10px 0px 1px 10px;
}

@yuraha18 · 25.03.2013, 05:13 **[ТС]**

все сделал как написано, но не помогло

@MVS76 · 25.03.2013, 13:34

Сообщение от yuraha18

Укажите везде размеры hover точно такие-же как и без hover

Вы везде где есть hover поменяли?
Для начала закоментируйте все hover, а потом по одному добавляйте.

Добавлено через 11 минут
если не получится, выложите полный код - посмотрим.

@yuraha18 · 25.03.2013, 15:34 **[ТС]**

вот переделал

CSS

*{
padding: 0;
margin: 0;
}
 
body {
background-color: #86F6BD;
}
 
#block {
 width: 900px;
 background-color: #0BC95F;
 margin: 0 auto 0 auto;
 
}
 
#block img {
border: none;
width: 300px;
margin-left: 100px;
}
 
#text{
 
margin: 25px 0 0 0;
background-color: green;
}
/*---------------------*/
#menu ul li{margin:0px;padding:0px;list-style:none; }
 
#menu {
 list-style:none;
 
}
#menu > ul{
    float:left;
    width:153px;
}
 
#menu  ul li{
    display:none;
    position:center;
    
    width:125px;
       
}
 
 
 
#menu ul:hover li{
display:block;
position:center;
}
 
 
 
#menu > ul{
    background-color:#54FF9F;
    text-align:center;
     
    padding:10px 0px 1px 10px;
    border:1px solid #008B00;
}
#menu > ul:hover{
    background-color:#43CD80;
        text-align:center;
     
    padding:10px 0px 1px 10px;
    border:1px solid #008B00;
}
 
#menu > ul > a{
    font:16px "Arial";
    color:#000000;
    text-decoration:none;
    
}
 
 
#menu  li {
    padding: 10px 10px 10px 20px;
    background-color:#43CD80;
    font-size: 16px;
}
#menu  ul {
   
    text-align:center;
    padding:10px 10px 10px 15px;
}
#menu ul  a{
           font-weight: bolder;
        font-size: 18px;
     font-family: Geneva, Arial, Helvetica, sans-serif;
    color:#000000;
    text-decoration:none;
    text-align:center;
 
}
#menu ul  a:hover{ 
         font-weight: bolder;
     font-family:  Arial, Helvetica, sans-serif;
    color:black;
    text-decoration:none;
text-align:center;
 
}
 
#menu ul  li a:hover{
 font-size: 22px;
     font-family:  Arial, Helvetica, sans-serif;
    color:#EEDD82;
    text-decoration:none;
       
}
 
#menu ul li {
       
        margin: auto ;
    padding: 3px 5px 5px 5px;
}
 
#menu ul  li a{font-weight: bold;
     font-family: Geneva, Arial, Helvetica, sans-serif;
    color:green;
    text-decoration:none;

}

@yuraha18 · 25.03.2013, 15:51 **[ТС]**

вот скрин, может поможет в решении проблем

@MVS76 · 25.03.2013, 19:24

Сообщение от MVS76

если не получится, выложите полный код - посмотрим.

Картинка - это не есть код, что можно исправить по картинке? Хотите исправлений - нужен код
Если нужно исправить картинку, то вот:

@yuraha18 · 25.03.2013, 20:29 **[ТС]**

Сообщение от MVS76

Картинка - это не есть код, что можно исправить по картинке? Хотите исправлений - нужен код
Если нужно исправить картинку, то вот:

так я 15 минут перед тем как скинуть картинку, скинул весь код css
html код више

Добавлено через 3 минуты
а картинку я скинул, для того чтоб все поняли что у меня неправильно работает

@MVS76 · 25.03.2013, 21:46

CSS вижу, а вот HTML, ну хоть убейте - не вижу.
или вот он?

HTML5

1
2
3

<div id = "menu">
      ...список меню...
  </div>

@yuraha18 · 25.03.2013, 23:10 **[ТС]**

HTML5

<html>
<head>
   <title> Головна  </title>
   <meta charset="utf-8">
<META name="description" Content="Сайт створено ..">
<META name="text" Content="Туризм ">
   <link href="style.css" rel="stylesheet">
</head>
<body>
 
<div id = "block">
  
  <img src = Ukraine.png>
  
    <div id = "menu">
 
<ul> <a href="#"> Регіони України</a> 
    <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>     
</ul>
 
        <ul> <a href = "#"> Палаци, замки </a> 
    <li> <a href = "#"> Існуючі </a> </li>
    <li> <a href = "#"> Руїни </a> </li>
    <li> <a href = "#"> Втрачені </a> </li>
    
    </li>
</ul>
    
      <ul> <a href = "#"> Пам'ятки  </a>
 
    <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>
</ul>
    <ul> <a href = "#"> Відпочинок </a>
  
      <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>
 
    <a href = "#"> Найпопулярніші </a> 
    
   </ul>
</div>
 
<div id = "text">
 
  <p style="text-align: justify;"><strong><img alt="map3" height="173" src="http://svit.ukrinform.ua/Indexes/traditions/img/map3.jpg" style="float: left;" width="276" />
</div>
  </div>
 
</body>
</html>

Добавлено через 1 минуту
а вот и html

@MVS76 · 26.03.2013, 00:26

что-то примерно вот

CSS

*{
padding: 0;
margin: 0;
}
body {
background-color: #86F6BD;
}
#block {
width: 900px;
background-color: #0BC95F;
margin: 0 auto 0 auto;
}
.block_img1 {
border: none;
width: 300px;
margin-left: 100px;
}
.block_img2 {
position: absolute;
right: 40%;
z-index: 1;
margin: 19px 0 0 0;
width: 276px;
height: 173px;
float: left;
}
#text {
margin: 25px 0 0 0;
background-color: green;
}
/*---------------------*/
#menu {
list-style:none;
}
#menu li {
padding: 10px 10px 10px 20px;
background-color:#43CD80;
font-size: 16px;
}
#menu ul li{
display:none;
width:125px;
margin: auto ;
padding: 3px 5px 5px 5px;
list-style:none;
}
#menu ul:hover li{
display:block;
}
#menu ul{
text-align:center;
float:left;
width:153px;
background-color:#54FF9F;
text-align:center;
padding:10px 10px 10px 15px;
border:1px solid #008B00;
}
#menu ul:hover{
background-color:#43CD80;
text-align:center;
padding:10px 10px 10px 15px;
border:1px solid #008B00;
position: relative;
z-index: 2;
}
#menu ul a{
font-weight: bolder;
font-size: 18px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
text-align:center;
}
#menu ul a:hover{
font-weight: bolder;
font-family:  Arial, Helvetica, sans-serif;
color:black;
text-decoration:none;
text-align:center;
}
#menu ul li a{
font-weight: bold;
font-size: 20px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color:green;
text-decoration:none;
}
#menu ul li a:hover{
font-size: 20px;
font-family:  Arial, Helvetica, sans-serif;
color:#EEDD82;
text-decoration:none;
}

HTML5

<html>
<head>
<title> Головна  </title>
<meta charset="utf-8">
<META name="description" Content="Сайт створено ..">
<META name="text" Content="Туризм ">
<link href="style.css" rel="stylesheet">
 
</head>
<body>
 
<div id = "block">
 
<img class="block_img1" alt="map3" src="http://svit.ukrinform.ua/Indexes/traditions/img/map3.jpg"/>
 
<div id = "menu">
 
<ul> <a href="#"> Регіони України</a>
<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>
 
<ul> <a href = "#"> Палаци, замки </a>
<li> <a href = "#"> Існуючі </a> </li>
<li> <a href = "#"> Руїни </a> </li>
<li> <a href = "#"> Втрачені </a> </li>
</ul>
 
<ul> <a href = "#"> Пам'ятки  </a>
<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>
<ul> <a href = "#"> Відпочинок </a>
<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>
<ul> <a href = "#"> Найпопулярніші </a>
 
</ul>
</div>
 
<div id = "text">
<p style="text-align: justify;"><strong><img class="block_img2" alt="map3" src="http://svit.ukrinform.ua/Indexes/traditions/img/map3.jpg"/>
</div>
 
</body>
</html>

вот чем можно это ровнять:

CSS

1
2
3

position: relative;
position: absolute;
z-index: 1; // 2, 3 и тд. зависит от того какой слой должен быть над каким.

Да, и где вы прочитали такое?

CSS

1	position:center;

И у вас много тегов не закрыто, например </li>, </div>, </ul> следите за тегами.
P.S. Пример не кроссбраузерный, и является всего лишь демонстрацией.

Добавлено через 11 минут
я вам писал ранее:

Сообщение от MVS76

//здесь укажите те же отступы и размеры что и без hover(имеется ввиду что влияют на расположение объектов)

а у вас до последнего вот:

CSS

#menu > ul{
    padding:10px 0px 1px 10px;
} 
// и вот, они похожи? а это ведь тоже размер, поэтому  все скачет
#menu > ul:hover{
    padding:10px 10px 10px 15px;

@yuraha18 · 26.03.2013, 00:45 **[ТС]**

спасибо огромное, сейчас буду смотреть и искать свои ошибки

@MVS76 · 26.03.2013, 01:05

когда будете делать, обязательно просматривайте в ИЕ и опере, делайте кроссбраузерно, есть пользователи как ни странно которые пользуются даже ИЕ и оперой.

Добавлено через 7 минут
Для информации цитата, пока меня не заплевали любители оперы:

Спустя 20 лет работы в браузерном бизнесе, специалисты Opera Software прекращают разработку десктопной версии браузера. Фактически, Opera больше не будет разрабатывать и поддерживать свой HTML-движок Presto. В мобильных платформах браузер будет работать на технологии WebKit. Некоторые эксперты предрекают норвежской компании уход из рынка.
Сообщается, что без своих собственных разработок, Opera станет еще одной компанией, которая использует движок с открытым исходным кодом Chromium и скорее всего выпустит продукт на базе этой технологии, с новым названием. По такому принципу пошла компания «Яндекс», когда запустила «Яндекс.Браузер». Таким образом, на рынке больших браузеров останется всего 4 компании: Microsoft, Google, Mozilla и Apple, а также 3 основные технологии: Trident, Gecko и WebKit.

Был-бы хороший двиг, не меняли бы!
Возможно опера станет рядом с хромом!

Блоги программистов
Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .	С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .
Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом зад Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .

@yuraha18 2 / 2 / 0 Регистрация: 16.12.2009 Сообщений: 261
	25.03.2013, 05:13 [ТС]	3
	все сделал как написано, но не помогло 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	25.03.2013, 13:34	4
	Сообщение от yuraha18 Укажите везде размеры hover точно такие-же как и без hover Вы везде где есть hover поменяли? Для начала закоментируйте все hover, а потом по одному добавляйте. Добавлено через 11 минут если не получится, выложите полный код - посмотрим. 0

@yuraha18 2 / 2 / 0 Регистрация: 16.12.2009 Сообщений: 261
	25.03.2013, 15:51 [ТС]	6
	вот скрин, может поможет в решении проблем Миниатюры 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	25.03.2013, 19:24	7
	Сообщение от MVS76 если не получится, выложите полный код - посмотрим. Картинка - это не есть код, что можно исправить по картинке? Хотите исправлений - нужен код Если нужно исправить картинку, то вот: Миниатюры 0

@yuraha18 2 / 2 / 0 Регистрация: 16.12.2009 Сообщений: 261
	25.03.2013, 20:29 [ТС]	8
	Сообщение от MVS76 Картинка - это не есть код, что можно исправить по картинке? Хотите исправлений - нужен код Если нужно исправить картинку, то вот: так я 15 минут перед тем как скинуть картинку, скинул весь код css html код више Добавлено через 3 минуты а картинку я скинул, для того чтоб все поняли что у меня неправильно работает 0

@yuraha18 2 / 2 / 0 Регистрация: 16.12.2009 Сообщений: 261
	26.03.2013, 00:45 [ТС]	12
	спасибо огромное, сейчас буду смотреть и искать свои ошибки 0

@MVS76 Не мoдepaтор 340 / 315 / 94 Регистрация: 07.07.2012 Сообщений: 1,040 Записей в блоге: 7
	26.03.2013, 01:05	13
	когда будете делать, обязательно просматривайте в ИЕ и опере, делайте кроссбраузерно, есть пользователи как ни странно которые пользуются даже ИЕ и оперой. Добавлено через 7 минут Для информации цитата, пока меня не заплевали любители оперы: Спустя 20 лет работы в браузерном бизнесе, специалисты Opera Software прекращают разработку десктопной версии браузера. Фактически, Opera больше не будет разрабатывать и поддерживать свой HTML-движок Presto. В мобильных платформах браузер будет работать на технологии WebKit. Некоторые эксперты предрекают норвежской компании уход из рынка. Сообщается, что без своих собственных разработок, Opera станет еще одной компанией, которая использует движок с открытым исходным кодом Chromium и скорее всего выпустит продукт на базе этой технологии, с новым названием. По такому принципу пошла компания «Яндекс», когда запустила «Яндекс.Браузер». Таким образом, на рынке больших браузеров останется всего 4 компании: Microsoft, Google, Mozilla и Apple, а также 3 основные технологии: Trident, Gecko и WebKit. Был-бы хороший двиг, не меняли бы! Возможно опера станет рядом с хромом! 1