Really struggling with another issue within my timeline for the company I work for and would appreciate the assistance. everything is working as needed, the only issue I am having is that the list items keep jumping when hovered. I have tried everyhting I know of in my css from fixed heights and widths to various positions ie. fixed, relative and absolute nothing seems to be working. I know this timeline has been on before and I appreciate all previous assistance, but this is something different.
在我工作的公司的时间表内真的与另一个问题挣扎,并希望得到帮助。一切都按照需要运作,我唯一的问题是列表项目在盘旋时不断跳跃。我已经在我的css中尝试了从固定的高度和宽度到各种位置的所有知识。固定的,相对的和绝对的似乎都没有用。我知道这个时间表以前一直在使用,我很欣赏之前的所有帮助,但这是不同的。
JSFIDDLE http://jsfiddle.net/Jason1975/9tskrf9q/11/
CSS
* {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
font-family: 'open sans', sans serif, arial;
font-weight: lighter;
color: #808080;
font-size: 14px;
}
/* Type */
h1,h2,h4,h5,h6 {
text-align: center;
color: #ccc;
margin-bottom: 5px;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 14px;
}
.section-title, .portfolio-title {
text-align: center;
font-size: 36px;
font-weight: 100;
text-transform: lowercase;
margin: 0;
}
a { font-size: 14px; text-decoration: none; color: #666666; }
a:hover { font-size: 14px; color: #F47C00; }
/* Timeline */
#master { width: 989px;
height: auto;
margin: 0 auto;
}
#container { position: relative;
width: 100%;
height: 80px;
margin: 0 auto;
overflow: hidden;
white-space:nowrap;
background:url(http://www.valueportfolio.co.za/jsfiddle/line.png) center 50% repeat-x;
}
ul#new { display: inline;
position: relative;
width: 100%;
left: 0;
top: 0
}
.block-up { position: relative;
display: inline-block;
list-style:none;
width: 130px;
height: 80px!important;
margin: 0!important;
top: 0;
background: url(http://www.valueportfolio.co.za/jsfiddle/dot.png) center 50% no-repeat;
}
.block-down { position: relative;
display: inline-block;
list-style:none;
width:130px;
height: 80px!important;
margin: 0!important;
top: 0;
background: url(http://www.valueportfolio.co.za/jsfiddle/dot.png) center 50% no-repeat;
}
.block-down a { font-size: 14px; }
.block-down a:hover { font-size: 14px; }
.date-up { padding-bottom: 20px;
text-align:center;
}
.event-up { padding-top: 20px;
text-align: center;
font-size: 14px;
color: #F47C00;
visibility: hidden;
}
.date-down { padding-top: 20px;
text-align:center;
}
.event-down { padding-bottom: 20px;
text-align: center;
font-size: 14px;
color: #F47C00;
visibility:hidden;
}
#grad_left,
#grad_right {
width: 100px;
height: 350px;
position: absolute;
top: 0;
}
#grad_left {
left: 0;
background: url('http://www.valueportfolio.co.za/jsfiddle/left-grad.png') repeat-y;
}
#grad_right {
right: 0;
background: url('http://www.valueportfolio.co.za/jsfiddle/right-grad.png') repeat-y;
}
#next,
#prev {
position: absolute;
top: 0;
font-size: 24px;
width: 24px;
height: 47px;
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#next, #prev {
top: 15px;
}
#next {
right: 0;
background-image: url('http://www.valueportfolio.co.za/jsfiddle/right.png');
}
#prev {
left: 0;
background-image: url('http://www.valueportfolio.co.za/jsfiddle/left.png');
}
#next.disabled,
#prev.disabled {
opacity: 0.2;
}