Фон для формы входа

[mcdude]

Помогите,нужно позиционировать фон под форму входа. id loginForm отвечает за саму форму,с ней вообще никаких проблем. Класс loginForm2 за фон,его почему-то никак не получается поставить куда надо. Вот скрин:

html:

<div id="loginForm" class="loginForm2">$LOGIN_FORM$</div>

css:

#loginForm{width:230px;height:224px;margin-left:1000px;margin-top:-160px;margin-bottom:-63px;}
.loginForm2{background:url('http://newzveriki.ucoz.com/entrance_form.png') no-repeat;}

Добавление в loginForm2 разных padding и margin либо ничего не изменило,либо изменило не то.

[klierik]

ссылку на страницу с проблемой

[mcdude]

ссылку на страницу с проблемой

http://newzveriki.ucoz.com

[klierik]

отлично.

значит у нас есть некая область:

теперь скажи что именно в твоем понимании

позиционировать фон под форму входа

так как насоклько я вижу то фон как раз под формой. значит ты некорректно объяснил задачу.

[mcdude]

Да,правда не совсем,вечером в граф.редакторе изображу как нужно сделать и скину сюда.

[mcdude]

Надо,чтобы форма выглядела примерно так:

Но меня еще другое забеспокоило: у вас на скрине кнопка "заведи себе зверика" под формой,так не должно быть,у меня такого нет. Скажите,какой у вас браузер. Эту проблему тоже надо как-то решать.

[red4pony]

Скажите,какой у вас браузер. Эту проблему тоже надо как-то решать.

Ваша верстка разъезжается во многих браузерах.

По поводу фона. Если чтобы работало, то подойдет: для #uidLogForm задайте padding'и тем самым Вы отодвинете его от родительского блока.

[mcdude]

для #uidLogForm задайте padding'и

А где найти #uidLogForm? В css его нет.

[red4pony]

Он есть в разметке. Это сама форма входа. Добавьте в CSS новое правило для него.

[mcdude]

Он есть в разметке. Это сама форма входа. Добавьте в CSS новое правило для него.

Он двигает форму,но фон все равно поднять как надо не получается.

[red4pony]

Простите, а Вы сами верстали или это так делает Ucoz?

Контейнер которому назначен фон это #loginForm, спозиционирован с помощью margin'ов (что является не лучшим вариантом). Вот эти отступы и стоит изменять чтобы выставить Ваш блок.

[mcdude]

Вот эти отступы и стоит изменять чтобы выставить Ваш блок.

Изменяю,двигается только то,что ниже шапки,сам фон на месте стоит.

[red4pony]

У #loginForm увеличивает (по модулю) margin-top этим Вы поднимете фон относительно окна просмотра. Затем для #uidLogForm задаете padding-top этим Вы спозиционируете форму относительно фона.

[mcdude]

Спасибо вам! Теперь все получилось. Мне еще хотелось бы узнать почему есть проблемы с отображением сайта в других браузерах. Мне кажется,что дело скорее в разрешении,т.к. проблемы возникают при изменении размеров окна браузера. Как с этим можно бороться?

[red4pony]

Мне кажется,что дело скорее в разрешении,т.к. проблемы возникают при изменении размеров окна браузера.

У Вас экран 1280х1024?

Простите, а Вы сами верстали или это так делает Ucoz?

Ответьте пожалуйста на вопрос.

[mcdude]

У Вас экран 1280х1024?

Да.

Простите, а Вы сами верстали или это так делает Ucoz?

Это я.

[red4pony]

Это я.

Это и хорошо и плохо.

В основном проблема крушения это блок "Мои зверьки" и рядом стоящая изображение ссылка "Заведи себе зверька". Не нужно было их разделять. Для первого блока задайте полностью целый фон (т.е. вместе с правой часть без собаки), и внутрь него поместите изображение собаки (с кусочном фона, но без границ).

Edited May 26, 2013 by red4pony

[mcdude]

Это не очень помогло,картинка-ссылка "заведи себе зверика" все равно двигается при смене разрешения,только теперь она прозрачная.

Edited May 26, 2013 by mcdude

[red4pony]

Изображение нужно было положить в #myPets, а в CSS для этого изображения добавить float:right;

[mcdude]

Помогло,но возникла другая проблема,которая есть только у авторизированных пользователей. Дело в том что у них в блоке "мои зверики" может выводиться разное количество текста(в зависимости от того,сколько тем они создали в определенном форуме),и теперь у них кнопка "заведи себе зверика" отображается то выше,то ниже,в зависимости от их количества. Ее можно как-то зафиксировать,сделать ее положение независимым от текста в блоке "мои зверики"? На всякий случай,пара скринов для пояснения ситуации:

[red4pony]

<div id="myPets">
			 <div class="wrap">
				 <div class="myPetsText">text</div>
				 <div class="my">Тут список звериков пользователя</div>
			 </div>
			 <a href=""><img src="" alt=""></a>
</div>

#myPets{
width: 500px;
overflow: hidden;
}
.wrap{
float: left;
width: 300px;
overflow: hidden;
}
#myPets a{
display:block;
float:right;
width: 100px;
}

Размеры брал на глаз. Подправите под свои нужды

[mcdude]

Теперь "заведи себе зверика" у авторизированных еще ниже и ссылка "смотреть всех своих звериков обрезается". В #myPets a float пришлось поставить left,т.к. ссылки нужны слева. Принципиально чтобы right было?

[red4pony]

Принципиально чтобы right было?

Да нет. Главное чтобы работало и не ломалось.

Я не смог усидеть и добавить зверика, так что код страницы пользователя со звериками я не видел.

У Вас не очень удачное написание кода, вот все от малейшего пинка и рушится.

[mcdude]

Я не смог усидеть и добавить зверика, так что код страницы пользователя со звериками я не видел.

Авторизируйтесь под логином тест и паролем 111111 и увидите.

[red4pony]

Просто чтобы работало, вот это. Если будет больше 5 питомцев, то все опять посыпется. Лучше всю верстку перелопатить, у Вас много лишнего и много ошибок.

[mcdude]

Теперь почти все встало на свои места. Но у ссылки "смотреть всех своих звериков" расширена область действия,можно перейти по ней,нажав гораздо правее(у вас на jsfiddle тоже). Из-за этого кнопка "заведи себе зверика" переносится на новую строку,точнее исчезает,т.к. overflow:hidden.