рушится для пограничных меню

Я попытался создать ту сторону, где на каждой границе находятся четыре меню, их нужно вытолкнуть из экрана и вернуться, как только пользователь наведет над элементом. Он хорошо работает для левой и правой стороны, но не для верхнего и нижнего уровня, Firefox позволяет им перемещаться, когда вы наводили на себя элемент, Chrome и IE ничего не делают.рушится для пограничных меню

Здесь HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>D3-BC</title> 
     <meta charset="UTF-8"> 
     <link href="./resurces/css/main.css" type="text/css" rel="stylesheet"> 
     <link href="./resurces/css/positioning.css" type="text/css" rel="stylesheet"> 
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div class="wrapper" id="header_wrapper"> 
      <div id="header">HEADER</div> 
     </div> 
     <div class="wrapper" id="left_wrapper"> 
      <div id="left">LEFT</div> 
     </div> 
     <div class="wrapper" id="right_wrapper"> 
      <div id="right">RIGHT</div> 
     </div> 
     <div class="wrapper" id="bottom_wrapper"> 
      <div id="bottom">BOTTOM</div> 
     </div> 
      <div id="graph_wrapper">GRAPH WRAPPER</div> 
    </body> 
</html>

Первый CSS:

body{ 
    padding: 0px; 
    margin: 0px; 
    background-color: #383838; 
    background-image: url("../images/dark_wood.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    overflow: hidden; 
    font-family: "Open Sans"; 
}

А вот второй CSS:

#header, #bottom, #left, #right{ 
    background-color: #808080; 
    position: relative; 
    text-align: center; 
} 
#left_wrapper, #bottom_wrapper, #right_wrapper, #header_wrapper{ 
    position: absolute; 
    background-color: #FF00FF; 
} 
#header_wrapper, #bottom_wrapper{ 
    width: 100%; 
} 
#left_wrapper,#right_wrapper{ 
    height: 100%; 
} 
#header_wrapper{ 
    top: 0px; 
} 
#bottom_wrapper{ 
    bottom: 0px; 
} 
#left_wrapper{ 
    left: 0px; 
} 
#right_wrapper{ 
    right: 0px; 
} 
#left, #right{ 
    top: 50%; 
    transform: translateY(-50%); 
} 
#header, #bottom{ 
    display: inline-block; 
    left: 50%; 
    transform: translateX(-50%); 
} 
#left{ 
    left: -50%; 
} 
#left:hover{ 
    left:0px; 
} 
#right{ 
    right: -50%; 
} 
#right:hover{ 
    right: 0px; 
} 
#bottom{ 
    bottom: -50%; 
} 
#bottom:hover{ 
    bottom: 0px; 
} 
#header{ 
    top: -50%; 
} 
#header:hover{ 
    top: 0px; 
}

Btw. display: inline-block; ничего не меняет. Здесь онлайн online.

Надеюсь, кто-то знает небольшую уловку, чтобы получить эту работу. Я узнал, что когда я изменяю значение «-50%» для стандартного значения на пиксельное значение, он работает. Но почему не с перцентальной ценностью, как это работает для левой и правой стороны?

Привет, Feirell

источник

2015-05-02 Feirell

процентное содержание элемента с position: absolute по сравнению с их исходными размерами. Это выглядит хорошо для ваших левых и правых элементов, но верхние и нижние divs вообще не имеют высоты. Если вы вручную установите для них высоту, он будет работать.

Лучшим способом перемещения элемента в процентах от его собственных размеров является использование свойства transform. Вы уже используете это, чтобы сосредоточить их, поэтому почему бы не объединить их, чтобы перемещать элементы с экрана?

#header { 
    transform: translate(-50%, -50%); 
} 
#footer { 
    transform: translate(-50%, 50%); 
} 
#left { 
    transform: translate(-50%, -50%); 
} 
#left { 
    transform: translate(50%, -50%); 
}

И избавиться от всех left: -50% и т.д.

источник

2015-05-02 17:17:18

Система процентов не работает, потому что родители не имеют высоту (так будет принимать достаточную высоту, чтобы показать содержимое внутри). Таким образом, процент не имеет базы. Вы можете либо дать родителям высоту:

#header_wrapper{ 
    height: 20px; 
    top: 0px; 
}

или используйте пиксели вместо процентов, как вы упомянули.

источник

2015-05-02 17:18:32 Samurai

Хорошо, да, но работала, но @Stephan предложил еще лучший ответ. – Feirell

спасибо @Stephan awsner должен выглядеть так: Или его можно увидеть here онлайн.

#left_wrapper, #bottom_wrapper, #right_wrapper, #header_wrapper{ 
    position: absolute; 
} 
#header, #bottom, #left, #right{ 
    position: relative; 
    text-align: center; 
} 
#header_wrapper, #bottom_wrapper{ 
    width: 100%; 
} 
#left_wrapper,#right_wrapper{ 
    height: 100%; 
} 
#header_wrapper{ 
    top: 0px; 
} 
#bottom_wrapper{ 
    bottom: 0px; 
} 
#left_wrapper{ 
    left: 0px; 
} 
#right_wrapper{ 
    right: 0px; 
} 
#left, #right{ 
    top: 50%; 
    transform: translateY(-50%); 
} 
#header, #bottom{ 
    display: inline-block; 
    left: 50%; 
    transform: translateX(-50%); 
} 
#left{ 
    transform: translate(-50%, -50%); 
} 
#left:hover{ 
    transform: translate(0,-50%); 
} 
#right{ 
    transform: translate(50%, -50%); 
} 
#right:hover{ 
    transform: translate(0,-50%); 
} 
#bottom{ 
    transform: translate(-50%,50%); 
} 
#bottom:hover{ 
    transform: translate(-50%,0); 
} 
#header{ 
    transform: translate(-50%,-50%); 
} 
#header:hover{ 
    transform: translate(-50%,0); 
}

источник

2015-05-02 18:07:23 Feirell

рушится для пограничных меню

ответ

Смежные вопросы