центрирование абсолютно-позиционированного блока

Не нашли подходящего раздела? Вам сюда!

центрирование абсолютно-позиционированного блока

Сообщение Колпаков Александр » 26 окт 2012, 06:43

Алексей, добрый день.
Подскажите пожалуйста, как решить проблему:

image.jpg
image.jpg (188.01 КБ) Просмотров: 10247


Суть в следующем:
1. Есть блок - родитель с position: relative;
2. В нем находится текстовое поле или другой элемент (кнопка, textarea и.т.д.)
3. За этим элементом расположен тег <p> с position: absolute; (тег <p> - резиновый)
4. Кроме этого, необходимо сделать стрелку по центру, желательно без использования графики.
В общем, необходимо сделать то, что показано в макете. Решение должно быть универсальное, поэтому предполагаю, что оно должно быть реализовано с помощью javascript.

Алексей, надеюсь на Вашу помощь.

P.s. Уже неделю ломаю голову, как это реализовать.

С уважением, Александр
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: центрирование абсолютно-позиционированного блока

Сообщение Алексей » 26 окт 2012, 09:40

Пока что только примерный макет набросал:
Код: Выделить всё
<html>
<head>
<style type="text/css">
.content {background-color: #00ffff; height: 500px; width: 700px}

.abc {position: absolute; left:200px; top: 350px;}
.imgcen {text-align: center}
.text {background: #ff0000; padding: 10px;}
</style>
</head>
<body>
<div class="content"></div>

<div class="abc">
<div class="imgcen"><img src="cur.jpg"></div>
<div class="text">Укажите дату начала акции</div>
</div>
</body>
</html>


Изображение cur.jpg это стрелочка красного цвета.
Этот макет то что должно быть результатом работы скрипта.. ну а дальше дело техники..
Кстати насчет техники а нужен ли вообще скрипт??? может и этого достаточно?
P.S. Буду здесь сегодня так эдак в 21.00 - 22.00 по москве.
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: центрирование абсолютно-позиционированного блока

Сообщение Колпаков Александр » 26 окт 2012, 11:44

Алексей, со стрелкой разобрался, сделал с помощью CSS без использования графики.
А что касается остального, то без скрипта, ни как нельзя, так как окно предупреждения будет резиновым и нужно автоматом высчитывать центр.
Вот конкретный пример:http://jsfiddle.net/Alex83/7vh6q/
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: центрирование абсолютно-позиционированного блока

Сообщение Алексей » 26 окт 2012, 19:51

Чёт я правда не пойму зачем нужен скрипт :)?
..и нужно автоматом высчитывать центр.

Центр чего??? Стрелка и так сама собой станет по центру (можно сделать что бы и не совсем по центру а где нибудь ближе к краю), текст можно выравнивать как только душе угодно.. а что должен делать скрипт? Другое дело написать скрипт который будет скрывать и показывать эти блоки с предупреждениями в зависимости от действий пользователя, но это уже другая задача..
Вот я тоже сделал без изображений:
Код: Выделить всё
<html>
<head>
<style type="text/css">
.content {background-color: #00ffff; height: 500px; width: 700px}

.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8 {
margin:0 auto;
height: 1px;
background: #f00;
overflow: hidden; /* IE6 */
}
.b1 {width: 1px;}
.b2 {width: 2px;}
.b3 {width: 4px;}
.b4 {width: 6px;}
.b5 {width: 8px;}
.b6 {width: 10px;}
.b7 {width: 12px;}
.b8 {width: 14px;}

.abc {position: absolute; left:200px; top: 350px; text-align: center;}
.text {background: #ff0000; padding: 1px 5px; max-width: 200px;}
</style>

</head>
<body>
<div class="content"></div>

<div class="abc">
<div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div><div class="b5"></div><div class="b6"></div><div class="b7"></div><div class="b8"></div>
<div class="text">Резиновый блок с длинным длинным многострочным текстом и стрелкой не использующей изображение выровненной по центру</div>
</div>

</body>
</html>
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: центрирование абсолютно-позиционированного блока

Сообщение Колпаков Александр » 26 окт 2012, 20:14

В том-то все и дело, что не подходит такой вариант. Сообщение должно быть резиновым и растягиваться по ширине, а не по высоте.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: центрирование абсолютно-позиционированного блока

Сообщение Алексей » 26 окт 2012, 20:21

Ну убрать max-width: 200px; и будет растягиваться по ширине..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

Re: центрирование абсолютно-позиционированного блока

Сообщение Колпаков Александр » 26 окт 2012, 20:30

Нет, в данном случае будет вообще ерунда, а именно:
Код: Выделить всё
<html>
<head>
<style type="text/css">
.content {background-color: #00ffff; height: 500px; width: 700px; border: 5px solid #000;}
.abc {position: absolute; left:200px; top: 350px; text-align: center;}
.text {background: #ff0000; padding: 1px 5px; }
.corner {
   width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid red;
   position: absolute;
   left: 0;
   top: 3px;
}
</style>

</head>
<body>
<div class="content"></div>

<div class="abc">
   <input type="text" />
   <div class="text"><span>Резиновый блок с длинным длинным многострочным текстом и стрелкой не использующей изображение выровненной по центру<span><span class="corner"></span></div>
</div>

</body>
</html>


Да, Алексей и кстати, уголки на css можно делать без лишнего html-кода. Я исправил в коде.
Аватара пользователя
Колпаков Александр
Модератор
 
Сообщения: 78
Зарегистрирован: 03 июн 2011, 18:59
Откуда: Екатеринбург

Re: центрирование абсолютно-позиционированного блока

Сообщение Алексей » 26 окт 2012, 21:48

Ну так поле <input> должно быть в блоке content а поверх него абсолютно позиционироваться блок abc. У Вас ведь все поля имеют стационарные позиции?? вот а поверх них абсолютно позиционировать подсказки.. В общем так или иначе сверстать можно вообще всё что угодно, а скрипты нужны там где есть динамика и логика..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)


Вернуться в Разное

Кто сейчас на конференции

Сейчас этот форум просматривают: ixspfhdtq и гости: 53

cron
Рейтинг@Mail.ru