ФорумРазработкаКлиентская сторонаВерстка и оформление → Выравнивание

Выравнивание

  • megabit

    Сообщения: 367 Репутация: N Группа: Кто попало

    Spritz Май 31, 2008, 3:11 п.п.

    как выровнять(см.аттач) получаеться что при появление картинки перед (Логин, Пароль и.т.п) один столбец сьезжает вниз относительно второго, как можно исправить?
    1. error.PNG (144)
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz Май 31, 2008, 5:04 п.п., спустя 1 час 52 минуты 59 секунд

    Можно, например, запихнуть все имена полей ("Логин", "Пароль") в <label>'ы и установить для них line-height по размеру картинки
  • megabit

    Сообщения: 367 Репутация: N Группа: Кто попало

    Spritz Май 31, 2008, 5:30 п.п., спустя 26 минут 2 секунды

    они в label и так, а че установить то? по подробнее можно?
  • Ёлочник

    Сообщения: 25 Репутация: N Группа: Кто попало

    Spritz Июнь 1, 2008, 9:18 д.п., спустя 15 часов 47 минут 36 секунд

    Добавь к "Логин" прозрачную икону с размерами как у (х), либо (х) уменьши до высоты строки.
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz Июнь 1, 2008, 11:01 д.п., спустя 1 час 43 минуты 7 секунд

    Подробней сказать трудно, я ведь не вижу кода твоей формы.

    Вообще смысл в том, что бы label без картинки имел ту же высоту, что и с картинкой. Для этого можно использовать height или line-height. Способ предложенный Ёлочник'ом так же хорошо подойдет.

    Хотя я бы всё сделал по-другому: в img'ах должны содержаться только иллюстрации к тесту. Вся остальную графику лучше зашивать в фон, благо есть свойства background-repeat и background-position, нормально работающие во всех браузерах. При этом фон никак не влияет на размеры и расположение элемента. Т.е. устанавливаешь на

    label {
    background:url("…") no-repeat;
    /* если label идет как внутристрочный элемент используем line-height: */
    line-height: /* высота картинки */ ;
    /* если как блочный, то можно воспользоваться height: */
    height: /* высота картинки */ ;
    }

Пожалуйста, авторизуйтесь, чтобы написать комментарий!