Форма

[S.D.Maquis]

сверстал форму.

Источник

Мои вопросы:

1.) Почему в #wrapperF h2 текст не прижимается полностью к контейнеру h2(откуда берутся отступы на 7px сверху и на 3px от левого края)? Из-за этого у меня высота больше положенной.

2.) Что делать с #formFooter a ведь при уменьшении масштаба браузера(да и при увеличении), ему не хватает места(кстати почему?) и часть текста перепрыгивает вниз.

3.) Возможно как то ещё увеличить скорость загрузки формы(я уже оптимизировал png если что)

Edited April 6, 2012 by S.D.Maquis

[alexandr_v-vich]

1.

http://ru.wikipedia.org/wiki/%D0%90%D0%BF%D1%80%D0%BE%D1%88

http://indexmarket.livejournal.com/60436.html

http://habrahabr.ru/post/114115/

2.

Перепрыгивание - потому что фиксированный дизайн. Делайте через проценты и ничего не будет меняться. Если что-то особое, то совмещайте % и px. Ещё есть "@media screen" для резины. Ещё overflow - в зависимости, что хотите

3.

не могу увидеть слабую скорость....=/

Edited April 4, 2012 by alexandr_v-vich

[NeoXidizer]

1) У меня такого не наблюдается, какой браузер? Покажите скриншот.

2) Исправление:

К .checkbox1 добавить float: left; margin-right: 3px;

К #formFooter a добавить float: right; и убрать padding-left

К #formFooter input[type=image] добавить float: left; clear: both;

Происходит это, потому что ширина #formFooter ограничена элементом #wrapperF form

Будет отображаться нормально вплодь до зума -75 и +500 (тестировал на Google Chrome)

3) См. советы ниже

Советы:

1) К #formI input добавьте padding-left: 5px;, чтобы печатаемый текст небыл прижат к краю элемента

2) Удалите неиспользуемые элементы, такие как

p, h2, #wrapperF, #formP, #formI, #formFooter, input, span, a {
	outline: 0px solid red;
}

хватит простого outline:0;

3) Сокращайте css: пишите

background:#1e4f8a;

заместо

background-color: #1e4f8a;

и

border:1px solid #0d2c52;

заместо

border-width: 1px;
border-style: solid;
border-color: #0d2c52;

а так же

font:12px Arial, sans-serif;

заместо

font-family: Arial, sane-serif;
font-size: 12px;

4) К изображению добавьте no-repeat:

background:url(../images/bgF.png) no-repeat;

5) Не используйте универсальный селектор *{}, он может влиять на производительность

6) Замените div formP элементами label - они для этого и предназначены

Edited April 4, 2012 by NeoXidizer

[S.D.Maquis]

вот включил красный outline текст, но как я понял по первому ответу это из-за шрифта css не влияет тут.

спс за советы попробую. А писал я так: border-style: solid; потому что ещё не оч шарю в css, так проще пока, неужели оно сказывается на скорости?

[NeoXidizer]

Из моих советов, повлиять на скорость, наверное, может только избавление от универсального селектора, и то, это скажется только на старых браузерах.

В общем, здесь ничего "ускорить" нельзя, и у меня так же не возникло проблем со скоростью загрузки и прорисовки формы, кроме как максимально сжать html и css

И я дал простые советы, как можно уменьшить размер css, сделать его более приятным на вид и просто как способ писать меньше и быстрее с таким же результатом.