VPF::Центрирование формы и ссылки - Форум программистов

Aliance

Дата 11.4.2007, 21:59 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

http://test.morgenshtern.com/?module=join

Два вопросика:

1) как сделать так, чтобы справа вверху форма авторизации выглядели во всех браузерах, как в ИЕ: т.е. сдвинута немного влево?

2) как отцентрировать красиво надпись "забыли пароль?" относительно кнопки "войти"?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

SelenIT

Дата 11.4.2007, 23:52 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Aliance, по-моему, стоит вообще изрядно упростить вёрстку. Вложенная таблица logo_middle, по-моему, совершенно не нужна. Разночтения между браузерами в отображении формы - из-за того, что таблице заданы взаимоисключающие параметры ширины: оба столбца фиксированной ширины, но всё вместе - 100%. FF/Opera, имхо, ведут себя логично - прижимают форму к краю ячейки (т.к. стоит text-align: right), а IE пытается "угадать задуманную ширину" (правда, только если ширина окна больше 1000px).

Вот вариант "шапки" с минимальными, на мой взгляд, переделками:

Код


<table id="logo">
    <tr>
        <td id="logo_layer_top" colspan="2"></td>
    </tr>
    <tr id="logo_middle">
        <td id="logo_middle_left"></td>
        <td id="logo_middle_right">
            <form action="" method="post" id="login-form">
                <div><label class="login" for="ipb_nick">Логин:</label>&nbsp;<input type="text" id="ipb_nick" name="ipb_nick" /></div>
                <div><label class="login" for="ipb_pass">Пароль:</label><input type="password" id="ipb_pass" name="ipb_pass" class="input_password" /></div>
                <div class="centered"><a href="http://forum.morgenshtern.com/index.php?act=Reg&amp;CODE=10" id="forget" onclick="open_window(this.href); return false;">Забыли пароль?</a>
                <input type="image" id="enter_button" src="http://www.morgenshtern.com/img/enter.gif" alt="Войти" /></div>
            </form>
        </td>
    </tr>
    <tr>
        <td id="logo_layer_bottom" colspan="2"></td>
    </tr>
</table>

Код


#logo_middle {
    height: 129px;
    background-color: #ece9eb;                                                                                              
}
#logo_middle_left {
    width: 717px;
    background: url(http://www.morgenshtern.com/img/spring/logo.jpg) no-repeat #ece9eb;
}
#logo_middle_right {
    background: url(http://www.morgenshtern.com/img/spring/logo_enter.gif) 100% 0% no-repeat #ece9eb;
    padding: 0;
    text-align: right;
}
#logo_middle_right form {
    margin: 0 50px 20px 0;
    width: 233px;
}
#logo_middle_right .centered {
    line-height: 14px;
    margin: 0;
    padding: 0;
}
#logo_middle_right .centered input {
    margin: 0 0 0 20px;
    vertical-align: middle;
}

Хотя на мой характер, я бы как раз каркас шапки делал дивом (контейнер 100% на 129px), а форму - табличкой, "плавающей" в этом контейнере по правому краю. А в табличке и надпись относительно картинки или поля центрируется (я так понимаю, вопрос в вертикальном центрировании) автоматически...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Aliance

Дата 12.4.2007, 15:53 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

SelenIT, как всегда огромное спасибо.

Но теперь в лисе появилось почему-то сверху пустое пространство...

Цитата(SelenIT @ 12.4.2007, 00:52

)

А чем это лучше?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

SelenIT

Дата 12.4.2007, 23:33 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Aliance @ 12.4.2007, 15:53

)

в лисе появилось почему-то сверху пустое пространство...

Там сейчас ошибка - фрагмент

Код


            <table id="logo">
                <tr>

повторяется дважды, и Мозилла "насильно" закрывает первую tr-ку, присвоив ей заказанные 129px высоты.

Цитата(Aliance @ 12.4.2007, 15:53

)

А чем это лучше?

Меньше кода и им легче управлять. Для просто большой площади с фоном целая "матрёшка" <table><tr><td> - имхо, излишняя роскошь, один div прекрасно справляется с такой задачей. А вот именно для выравнивания полей формы, кнопок и надписей возле них, да еще независимо от размера шрифта (при масштабировании его в Мозилле) - имхо, лучше, чем таблица, для этого ничего пока не придумали...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Aliance

Дата 15.4.2007, 21:56 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Спасибо. Все теперь нормально. Хотя ссылка не выровнена, но думаю вообще сделать картинкой ее.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »