@gocha11

Как изменить блок на вертикальную позицию?

Всем привет, хотелось бы узнать как изменить позицию блока
/* Roullet DropeCase */
header .drophistory {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 69px;
	background:-webkit-gradient(linear, left top, left bottom, from(#676762), to(transparent));
	background:-moz-linear-gradient(top, #1E5799, transparent);
	background:-o-linear-gradient(top, #1E5799, transparent);
	background:linear-gradient(top, #1E5799, transparent);
}
.line-pic {
	background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: -3px;
	margin-top: -15px;
    display: inline-block;
    width: 80px;
    height: 80px;
}


header .drophistory .headline{
	display:inline-block;
	position:absolute;
	top:-2px;left:0;
	width:175px;
	height:80px;
	padding:18px 0 0 20px;
	font-size:1.5em;
	text-align:left;
	background:transparent url(/template/images/drops_headline.png) no-repeat 0px 0px;
	}
header .drophistory .headline span{
	color:#000;
	font-size:22px;
	}
header .drophistory .headline a{
	color:#780606;
	font-size:16px;
	font-weight:bold
	}
header .drophistory .headline a:hover{
	color:#000;
	font-size:16px;
	font-weight:bold
	}	
.drophistory .items {
	height: 193px;
	padding-left: 200px;
	overflow: hidden;
}
.drophistory .items > div {
	padding: 0px 10px;
	width: 9999999px;
}
.drophistory .items > div:after {
	content: '';
	display: block;
	clear: both;
}

.drophistory .items > div .item-history:hover .live-line-item-tooltip {
	display: block;
}
.drophistory .items > div .item-history .live-line-item-tooltip {
	display: none;
	position: absolute;
	z-index: 20;
	top: 100%; left: -3px;
	margin-top: -5px;
	overflow: hidden;
	text-transform: uppercase;
}
.drophistory .items > div .item-history .live-line-item-tooltip .live-line-item-tooltip-line {
	background: url(/template/images/arrpw-d.png) no-repeat 50% 0;
	width: 17px;
	height: 9px;
	display: block;
	margin: 0 auto;
}
.drophistory .items > div .item-history .live-line-item-tooltip .live-line-item-tooltip-block {
	background-color: rgba(0,0,0,.3);
	padding: 10px;
	border-radius: 3px;
}
.drophistory .items > div .item-history .live-line-item-tooltip-block-source {
	height: 60px;
	background-size: auto 80%;
	background-position: center;
	background-repeat: no-repeat;
}
.drophistory .items > div .item-history .live-line-item-tooltip .live-line-item-tooltip-block .live-line-item-tooltip-block-nick {
	color: #c8a739;
	font-weight: 700;
	font-size: 10px;
	padding-bottom: 5px;    
	height: 12px;
    overflow: hidden;
    white-space: nowrap;
    width: 73px;
}
.drophistory .items > div .item-history .live-line-item-tooltip .live-line-item-tooltip-block .live-line-item-tooltip-block-item {
	color: #fefdfd;
	font-size: 10px;    
	height: 24px;
    overflow: hidden;
    width: 73px;
}
.drophistory .items > div .item-history .live-line-item-tooltip .live-line-item-tooltip-block .live-line-item-tooltip-block-source {
	text-align: center;
	padding-bottom: 5px;
}
.drophistory .items > div .item-history .live-line-item-tooltip img,
.drophistory .items > div .item-history .live-line-item-tooltip:hover img {
	transform: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
	-webkit-transform: translateX(0px) translateY(0) !important;
	transform: translateX(0px) translateY(0) !important;
}


блок можно посмотреть тут steamshell.ru (дропы выпавшие онлайн) хотелось бы что бы было горизонтальное положение!

Заранее спс!
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 1
@itsjustmypage
Из кода на сайте это примерно то, что вам нужно. tQNcqoZ.png

Для понимания сути происходящего:

Появляющийся снизу блок - это просто скрытый блок (display:none), появляющийся при наведении мыши на другой основной блок (смена display:none на display:block через псевдокласс :hover у основного блока). Расположение указывается засчёт указания позиционирования у появляющегося блока относительно родителя (с помощью position:absolute), причем у родителя обязательно должно быть указано позиционирование, отличное от стандартного static (укажите position:relative), чтобы вспомогательный блок позиционировался именно относительно него. Далее для вспомогательного блока указывается само его расположение (top: 100%), означающее, что он отступает на 100% высоты от основного блока и располагается внизу.

Итого - нужно сделать как выше, только изменив отступ top:100% на left:100% и top:0. Ну и размеры ограничить желательно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы