VPF::Выравнить форму - Форум программистов

Aliance

Дата 18.11.2006, 23:03 (ссылка)

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

Загрузка ...

I ♥ <script>

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

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

Есть страничка. Адрес: http://test.morgenshtern.com/
Там справа вверху есть форма, ее код:

Код


<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><input type="image" id="enter_button" src="http://test.morgenshtern.com/img/enter.gif" alt="Войти" />&nbsp;
<a href="http://forum.morgenshtern.com/index.php?act=Reg&amp;CODE=10" id="forget" target="_blank">Забыли пароль?</a></div>
</form>

</td>

И стили:

Код


label {
    padding-right: 5px;
    font-size: 10px;
    width: 40px;
    color: #000;    
    padding-top: 5px; 
    font-family: Tahoma, Helvetica, sans-serif;
    text-align: right;
}
input {
    font-size: 10px;
    width: 145px;
    color: #000;    
    font-family: Tahoma, Helvetica, sans-serif;
}
input#enter_button {
    border-top-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    margin-left: 49px;
    width: 44px;
    height: 18px;
}
input.input_password {
    margin-left: 2px;
    color: #666;
    font-family: MS Sans serif, Tahoma, Helvetica, sans-serif;
}
a#forget {
    font-size: 11px;
    color: #000;
}
a#forget:hover {
    color: #982513;
}
#logo_middle_right {
    height: 129px;
    width: 283px;
    align: right;
    background: url(http://www.morgenshtern.com/img/logo_enter.gif) 100% 0% no-repeat #ece9eb;
    padding: 0px 0px 0px 0px;
    text-align: right;
}

Задача: нужно выровнять форму авторизации (сдвинуть вправо) так, чтобы ее правый край совпадал с воображаемой горизонтальной линией, касательной к концу надписи "Братство утренней звезды" (т.е. к букве "ы" слова "звезды"). Помогите, не могу справиться smile

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

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

JAVA ≠ JavaScript

Illuminaty

Дата 19.11.2006, 10:17 (ссылка)

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

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Код

#login-form div { margin-right: 17px;}

Andres2703

Дата 19.11.2006, 15:58 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 9.9.2006
Где: Иваново

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

Я бы сделал это так: рисунок с надписью "братство утренней звезды" и форма должны быть в одной таблице и находиться в ячейках одна под другой. Поставить в обоих ячейках aligh="right" и сделать так, чтобы буква Ы в рисунке была последней частью рисунка. При позиционировании всякое бывает, лучше не использовать -имхо.

Aliance

Дата 19.11.2006, 16:57 (ссылка)

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

Загрузка ...

I ♥ <script>

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

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

Andres2703, Ваш вариант не подходит, т.к. надпись "Братство утренней звезды" являеться фоновой картинкой.

Illuminaty, мне кажеться что этот вариант не идеален (он приходил мне в голову), так как при маленьких разрешениях монитора могут возникнуть проблемы. Или я не прав?

Добавлено @ 17:05
Illuminaty, на моем разрешении (1280*1024) сработал код:

Код


#login-form div {
   margin-right: -57px;
}

Но, как я и думал, на других он не работает. Так что проблема не решена!

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

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

JAVA ≠ JavaScript

Andres2703

Дата 19.11.2006, 17:56 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 9.9.2006
Где: Иваново

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

Aliance, тогда сделай эту надпись отдельным и все сразу встанет на свои места

Illuminaty

Дата 20.11.2006, 11:26 (ссылка)

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

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Выход один - делать изображение отдельным элементом, как сказал Andres2703. И выравнивать элементы формы и изображение одновременно.

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