Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: перемещаемый блок - CSS+JS, посоветуйте.
 
 автор: кен   (19.09.2005 в 21:05)   письмо автору
 
 

Как сверстать (CSS) и заставить перемещаться (JS) такой вот примерно блок, имитирующий окно внутри HTML-страницы? И чтоб работало и в IExplorer, и в Опере.

   
 
 автор: Crux   (19.09.2005 в 23:45)   письмо автору
 
   для: кен   (19.09.2005 в 21:05)
 

загляни сюда http://www.softtime.ru/javascript/dragndrop.php

   
 
 автор: кен   (20.09.2005 в 12:00)   письмо автору
 
   для: Crux   (19.09.2005 в 23:45)
 

Ладно, с перемещением как-нибудь разберусь. А как такой блок сверстать. В Опере кое-как получается, а в IE никак - ни таблицами, ни DIVами. Помогите.

   
 
 автор: Crux   (20.09.2005 в 19:15)   письмо автору
 
   для: кен   (20.09.2005 в 12:00)
 

>А как такой блок сверстать
что конкретно Вы под этим подразумиваете?
>а в IE никак - ни таблицами, ни DIVами
именно ими

   
 
 автор: кен   (20.09.2005 в 20:00)   письмо автору
 
   для: Crux   (20.09.2005 в 19:15)
 

Я прошу привести в пример кусок кода (HTML, CSS), который создаёт абсотютно позиционированный блок с оформлением как на картинке. Конкретно не могу загнать кнопку закрытия в правый верхний угол полосы с заголовком. Ни DIVами (типа float:right), ни таблицами (при width:100% для ячеек блок растягивается на всю страницу).

   
 
 автор: кен   (20.09.2005 в 20:00)   письмо автору
 
   для: Crux   (20.09.2005 в 19:15)
 

Я прошу привести в пример кусок кода (HTML, CSS), который создаёт абсотютно позиционированный блок с оформлением как на картинке. Конкретно не могу загнать кнопку закрытия в правый верхний угол полосы с заголовком. Ни DIVами (типа float:right), ни таблицами (width:100% для ячеек растягиваем блок на всю страницу).

   
 
 автор: кен   (20.09.2005 в 20:04)   письмо автору
 
   для: кен   (20.09.2005 в 20:00)
 

(модератору: прошу удалить последнее дублирующееся сообщение)

   
 
 автор: sirop   (23.09.2005 в 01:10)   письмо автору
 
   для: кен   (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>


Только вот поверх форм ломается

   
 
 автор: кен   (23.09.2005 в 14:11)   письмо автору
 
   для: sirop   (23.09.2005 в 01:10)
 

Но здесь нет решения с выравниванием текста внутри заголовка. Text-align: right просто всё сдвигает вправо. А как сделать, чтобы текст заголовка был выровнен по левому краю, а кнопка закрытия (X) "притягивалась" к правому?

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования