Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить панель по центру / 13 сообщений из 13, страница 1 из 1
29.08.2013, 16:44
    #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
| Ответить | Цитировать | Написать  
30.08.2013, 08:30
    #38381896
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить панель по центру
rus_sun , что это за левые теги и атрибуты?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.08.2013, 08:50
    #38381907
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить панель по центру
а меня интересует что такое панель (в терминах HTML разумеется)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.08.2013, 09:06
    #38381915
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить панель по центру
Я постучал в шаманский бубен...

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

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



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

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

шаманский бубен не помог, панель, где была, там и осталасьВы свой HTML собираетесь показывать, или нам его телепатически угадать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.08.2013, 09:52
    #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:53
    #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:55
    #38381979
Gustly
Gustly
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как разместить панель по центру
rus_sun,

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

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

спасибо. Это работает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как разместить панель по центру / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 553ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447944]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 197ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 63ms
get tp. blocked users:
 2ms
others: 239ms
total:  553ms
x
x
Закрыть


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