|
|
|
| Как сверстать (CSS) и заставить перемещаться (JS) такой вот примерно блок, имитирующий окно внутри HTML-страницы? И чтоб работало и в IExplorer, и в Опере. | |
|
|
|
|
|
|
|
|
для: Crux
(19.09.2005 в 23:45)
| | Ладно, с перемещением как-нибудь разберусь. А как такой блок сверстать. В Опере кое-как получается, а в IE никак - ни таблицами, ни DIVами. Помогите. | |
|
|
|
|
|
|
|
для: кен
(20.09.2005 в 12:00)
| | >А как такой блок сверстать
что конкретно Вы под этим подразумиваете?
>а в IE никак - ни таблицами, ни DIVами
именно ими | |
|
|
|
|
|
|
|
для: Crux
(20.09.2005 в 19:15)
| | Я прошу привести в пример кусок кода (HTML, CSS), который создаёт абсотютно позиционированный блок с оформлением как на картинке. Конкретно не могу загнать кнопку закрытия в правый верхний угол полосы с заголовком. Ни DIVами (типа float:right), ни таблицами (при width:100% для ячеек блок растягивается на всю страницу). | |
|
|
|
|
|
|
|
для: Crux
(20.09.2005 в 19:15)
| | Я прошу привести в пример кусок кода (HTML, CSS), который создаёт абсотютно позиционированный блок с оформлением как на картинке. Конкретно не могу загнать кнопку закрытия в правый верхний угол полосы с заголовком. Ни DIVами (типа float:right), ни таблицами (width:100% для ячеек растягиваем блок на всю страницу). | |
|
|
|
|
|
|
|
для: кен
(20.09.2005 в 20:00)
| | (модератору: прошу удалить последнее дублирующееся сообщение) | |
|
|
|
|
|
|
|
для: кен
(20.09.2005 в 20:04)
| | Может что из этого подойдёт
<html>
<head>
<style type="text/css">
#window {
background: #fc0;
width: 300px; height: 200px;
position: absolute;
left: 50%; top: 50%;
margin-left: -150px; margin-top: -100px;
clip: rect(auto 150 auto 150)
}
#window P {
margin: 0px; padding: 10px
}
#title {
background: #666; padding: 5px; font-weight: bold; text-align: right
}
#title A {
color: white; text-decoration: none
}
</style>
<script language="JavaScript">
step = 10
width = 300
x1 = x2 = width/2
function curtainOn() {
// Отображаем слой window в браузере Opera
if (Opera) document.getElementById("window").style.display = "block"
if (x1 > 0) {
x1 -= step
x2 += step
clip = "auto " + x2 + " auto " + x1
document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOn()", 30)
}
}
function curtainOff() {
if (x2 > (width/2)) {
x1 += step
x2 -= step
clip = "auto " + x2 + " auto " + x1
document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOff()", 30)
}
// Прячем слой window в браузере Opera
else if (Opera) document.getElementById("window").style.display = "none"
}
</script>
</head>
<body>
<div id=window>
<div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis te feugifacilisi.</p>
</div>
<br><br>
<a href="javascript: curtainOn()">Развернуть окно</a>
<script language="JavaScript">
// Проверяем, какой браузер перед нами
Opera = document.getElementById && window.opera
// Если Opera. то прячем слой window
if (Opera) document.getElementById("window").style.display = "none"
</script>
</body>
</html>
|
Только вот поверх форм ломается | |
|
|
|
|
|
|
|
для: sirop
(23.09.2005 в 01:10)
| | Но здесь нет решения с выравниванием текста внутри заголовка. Text-align: right просто всё сдвигает вправо. А как сделать, чтобы текст заголовка был выровнен по левому краю, а кнопка закрытия (X) "притягивалась" к правому? | |
|
|
|