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

@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.

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

@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