Позиционирование

3d_max_9 · October 26, 2013

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

Вот код


<html>
<head>
<style type="text/css">
#basket{
margin:0px 0px 0px 300px;
width:200px;
height:70px;
padding:5px;
float:left;
}
#basket > div{
border-radius: 3px;
border: 1px solid #CCCCCC;
background-image: -o-linear-gradient(top, #FAFAFA, #F2F2F2);
padding:5px;
overflow:hidden;
border-bottom-color: #138CB3;
border-left-color: #1391B9;
border-right-color: #1391B9;
border-top-color: #1496C0;
}
#basket > div > img{
float:left;
border:none;
}
#basket-text{
margin:8px 0px 0px 60px;
}
.wiev-hover{
display:none;
position:absolute;
width:350px;
min-height:200px;
border-radius: 3px;
border-bottom:1px solid #138CB3;
border-left:1px solid #1391B9;
border-right:1px solid #1391B9;
border-top:1px solid #1496C0;
background-image: -o-linear-gradient(top, #FAFAFA, #F2F2F2);
margin:0px 0px 0px -218px;
z-index:0;
}
#basket-text:hover .wiev-hover{
display:block;
}
</style>
</head>
<body>
<div id="basket">
<div>
<div id="basket-text">
Текст текст<br>
<span>Еще текст</span>
	 <div class="wiev-hover">
	 help
	 </div>
</div>
</div>
</div>
</body>
</html>

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

код в работе http://mmaks.ho.ua/test/test.html

спс.

satantx · October 27, 2013

Используй силу, Люк

А вообще поставь

#basket-text { position: relative; }

А блоку

#wiev-hover { left: 10px; top: 10px; }

И по изменяй top и left у блока, чтобы добиться результата, и у #basket > div убери overflow:hidden;

Надеюсь я так тебя понял)

3d_max_9 · October 27, 2013

Используй силу, Люк
А вообще поставь
#basket-text { position: relative; }
А блоку
#wiev-hover { left: 10px; top: 10px; }
И по изменяй top и left у блока, чтобы добиться результата, и у #basket > div убери overflow:hidden;
Надеюсь я так тебя понял)

не то

хочу что бы был такой эффект примерно

ows.nightwolf · October 27, 2013

Я новичек в верстке, по этому мое решение скорее вариант на рассмотрение, чем руководство к действию, но в общем у меня два варианта:

1) Если ширина #basket задана в CSS, то можно удалить бордеры на стыке блоков, и добавить перед блоком .wiev-hover псевдо-элемент, у которого будет задан только верхний бордер с требуемой шириной.

Пример

2) Если ширина #basket определяется контентом, и заранее известен фон вкладки, то можно немного поменять структуру HTML и сделать .wiev-hover соседним элементом с #basket-text, тогда можно задать цвет бордера #basket при наведении таким же, как и цвет фона вкладки, и применяя z-index перекрыть #basketом бордер .wiev-hoverа.

Пример *строчки CSS, которые были изменены помечены пустыми комментариями

Edited October 27, 2013 by ows.nightwolf

3d_max_9 · October 27, 2013

спс

Sign In

Позиционирование

Question

3d_max_9

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

satantx

Link to comment

Share on other sites

3d_max_9

Link to comment

Share on other sites

ows.nightwolf

Link to comment

Share on other sites

3d_max_9

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information