ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить панель по центру
13 сообщений из 13, страница 1 из 1
Как разместить панель по центру
    #38381408
rus_sun
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rus_sun
Участник
Помогите, пожалуйста, разместить панель по центру. Панель должна быть маленькой width=300 height=200.
Вот код.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<html>

        <style>
            body {
                
                font: 13px Arial !important;	
                color: #000000;
            }
            #center {
                top: 50%; /* Отступ в процентах от верхнего края окна */
                left: 50%; /* Отступ в процентах от левого края окна */
                width: 300px; /* Ширина блока */
                height: 200px; /* Высота блока */
                position: absolute; /* Абсолютное позиционирование блока */
                margin-top: -100px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине высоты блока со знаком минус */
                margin-left: -150px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */
            }


            img.bg {
                /* Set rules to fill background */
                min-height: 100%;
                min-width: 1024px;

                /* Set up proportionate scaling */
                width: 100%;
                height: auto;

                /* Set up positioning */
                position: fixed;
                top: 0;
                left: 0;

                opacity: 0.7; /* Значение прозрачности */
                filter: alpha(Opacity=70); /* Прозрачность в IE */

            }

            @media screen and (max-width: 1024px) { /* Specific to this particular image */
                img.bg {
                    left: 50%;
                    margin-left: -512px;   /* 50% */
                }
            }
        </style>

        <body>
            <div style="position: relative; z-index: auto;">
                <h:graphicImage value="img/callcenter.png" styleClass="bg"/>

                <div class="body" style="position: relative; z-index: auto; ">
                    
                        <rich:panel styleClass="center">
                            <f:facet name="header">Login</f:facet>
                        </rich:panel>

                </div>

            </div>
        </body>
    </html>
...
Рейтинг: 0 / 0
29.08.2013, 16:44
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381896
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
rus_sun , что это за левые теги и атрибуты?
...
Рейтинг: 0 / 0
30.08.2013, 08:30
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381907
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
а меня интересует что такое панель (в терминах HTML разумеется)
...
Рейтинг: 0 / 0
30.08.2013, 08:50
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381915
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Я постучал в шаманский бубен...

И духи показали мне это!

Код: html
1.
styleClass="center"



Код: css
1.
#center {}
...
Рейтинг: 0 / 0
30.08.2013, 09:06
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381957
rus_sun
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rus_sun
Участник
krvsa,

шаманский бубен не помог, панель, где была, там и осталась
...
Рейтинг: 0 / 0
30.08.2013, 09:42
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381961
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
rus_sunkrvsa,

шаманский бубен не помог, панель, где была, там и осталасьВы свой HTML собираетесь показывать, или нам его телепатически угадать?
...
Рейтинг: 0 / 0
30.08.2013, 09:46
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381962
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
rus_sunшаманский бубен не помог
А что именно ты переделал?
...
Рейтинг: 0 / 0
30.08.2013, 09:52
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381967
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
Паганель,

Код: html
1.
2.
3.
<rich:panel styleClass="center">
                            <f:facet name="header">Login</f:facet>
                        </rich:panel>


Вот эта панель. Что за рич даже не знаю.
...
Рейтинг: 0 / 0
30.08.2013, 09:52
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381970
rus_sun
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rus_sun
Участник
Паганель,

Панель - это div. Вот исходный код страницы.

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns=" http://www.w3.org/1999/xhtml">

<head><script src="/suzukiConsultReport/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js" type="text/javascript"></script><script src="/suzukiConsultReport/a4j/g/3_3_3.Final/org/richfaces/ui.pack.js" type="text/javascript"></script><link class="component" href="/suzukiConsultReport/a4j/s/3_3_3.Final/org/richfaces/skin.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__" rel="stylesheet" type="text/css" /><link class="component" href="/suzukiConsultReport/a4j/s/3_3_3.FinalMETA-INF/skins/glassX.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__" rel="stylesheet" type="text/css" /><link class="component" href="/suzukiConsultReport/a4j/s/3_3_3.FinalMETA-INF/skins/glassXExt.xcss/DATB/eAGTcz60MXT5DGkAD2IDhA__" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><script type="text/javascript">window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script></head><style>
body {

font: 13px Arial !important;
color: #000000;
}
#center {
top: 50%; /* Отступ в процентах от верхнего края окна */
left: 50%; /* Отступ в процентах от левого края окна */
width: 300px; /* Ширина блока */
height: 200px; /* Высота блока */
position: absolute; /* Абсолютное позиционирование блока */
margin-top: -100px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине высоты блока со знаком минус */
margin-left: -150px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */
}


img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;

opacity: 0.7; /* Значение прозрачности */
filter: alpha(Opacity=70); /* Прозрачность в IE */

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
</style>

<body>
<div style="position: relative; z-index: auto;"><img src="img/callcenter.png" class="bg" />

<div class="body" style="position: relative; z-index: auto; ">
<div class="rich-panel center" id="j_id4">
<div class="rich-panel-header " id="j_id4_header">Login</div><div class="rich-panel-body " id="j_id4_body">
</div>
</div>

</div>

</div>
</body>
</html>
...
Рейтинг: 0 / 0
30.08.2013, 09:53
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381979
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
rus_sun,

У вас в стилях есть #center , но элемента id='center' нету, может надо в стилях поменять # на . ?
...
Рейтинг: 0 / 0
30.08.2013, 09:55
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381985
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
Код: css
1.
2.
3.
4.
5.
.center
{
    width: 30%;
    margin: 0px auto;    
}

http://jsfiddle.net/7MmRH/
...
Рейтинг: 0 / 0
30.08.2013, 09:59
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38381994
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Духи все показали правильно!
...
Рейтинг: 0 / 0
30.08.2013, 10:05
| Ответить | Цитировать | Написать  
Как разместить панель по центру
    #38382008
rus_sun
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
rus_sun
Участник
Паганель,

спасибо. Это работает
...
Рейтинг: 0 / 0
30.08.2013, 10:23
| Ответить | Цитировать | Написать  
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить панель по центру
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38381962&tid=1447944]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 192ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 70ms
get tp. blocked users:
 2ms
others: 238ms
total:  550ms
созд. / загр.: 550ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]