VPF::img и button имеют разные top - Форум программистов

DEER

Дата 27.2.2009, 14:53 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

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

Помогите пожалуйста разобраться, что я упустил

есть вот такой код

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Главная</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
.mybuttonclass{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border: 0px;
    height:16px;
    font-weight: bold;
    color: #FFFFFF;
    background-color : transparent;
    font-size:12px;
    background-image:url(/i/btn_center.gif);
    background-position:center center;
    background-repeat:repeat-x;
}
.btn_left {
    padding: 0px 2px 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 2px;
    height:16px;
    border: 0px;
    color: #FFFFFF;
    font-size:12px;
    background-color : transparent;
    background-image:url(/i/btn_left.gif);
    background-position:center right;
    background-repeat:no-repeat;
}
.btn_right {
    padding: 0px 18px 0px 0px;
    border: 0px;
    margin: 0px 0px 0px 0px;
    width: 18px;
    height:16px;
    color: #FFFFFF;
    font-size:12px;
    background-color : transparent;
    background-image:url(/i/btn_right.gif);
    background-position:center left;
    background-repeat:no-repeat;
}
</style>
</head>

<body>

<p>
<img src='/i/0.gif' class='btn_left'/><input type=button class="mybuttonclass" onclick='alert(123)' value='С картинками'/><img src='/i/0.gif' class='btn_right'/>
</p>

<p>
<input type="button" class=btn_left><input type="button" class="mybuttonclass" value="С кнопками" /><input type="button" class=btn_right>
</p>
<hr>
Левая - <img src=/i/btn_left.gif><br>
Центральная - <img src=/i/btn_center.gif><br>
Правая - <img src=/i/btn_right.gif><br>
</body>

</html>

верхняя "кнопка" почему то сдвинута вниз, относительно картинок.
А если использовать все три элемента "input", то всё выглядит правильно.( нижняя "кнопка")

Всё перерыл уже, никак не зазберусь из за чего... Подскажите, плиз, как выровнять элементы по одному уровню?

Это сообщение отредактировал(а) DEER - 27.2.2009, 14:54

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

bars80080

Дата 27.2.2009, 18:21 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

вообще, картинки - строковые элементы, поэтому когда у тебя на строчке картинка и что-то ещё (кнопка или строка текста), то все они выравниваются по по нижней базовой линии. имхо, здесь поможет только заключение кнопки в блочный элемент, а картинки вообще вырвать из контекста. т.е. гемор на геморе
посоветовал бы продумать начальную идею, т.к. если разделить всё по ячейкам таблицы, то проблема решится быстро vertical-align: middle для каждой ячейки

ksnk

Дата 27.2.2009, 19:36 (ссылка)

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

Загрузка ...

прохожий

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

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

DEER, Ну, дык! У inline элементов параметра height природой не предусмотрено. А ежели какой броузер его использует, то сам по себе, и в свою калитку... Размер текстового элемента определяется шрифтовыми параметрами...
Обычно такие элементы делают не друг-за-другом, а вкладывают друг в друга. Вот "резиновые" кнопки получаются тройным вложением.

Код


<style>
span.button {
   background:url(i/btn_right.gif) right 0 no-repeat;
   padding-right:16px;
   font-size:12px;
}
span.button span{
   background:url(i/btn_left.gif) 0 0 no-repeat;
   padding-left:2px;
}
span.button span a{
   background:url(i/btn_center.gif) 0 0 repeat-x;
   text-decoration:none;
}
</style>

А вот вам <span class='button'><span><a href="#">кнопка</a></span></span> этакая.
А вот вам <span class='button'><span><a href="#">кнопка</a></span></span> этакая. 
А вот вам <span class='button'><span><a href="#">кнопка</a></span></span> этакая. 
А вот вам <span class='button'><span><a href="#">кнопка большая
пребольшая...</a></span></span> Вот.

Это сообщение отредактировал(а) ksnk - 27.2.2009, 19:38

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

DEER

Дата 28.2.2009, 15:28 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

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

bars80080, vertical-align: middle помогло и без таблиц,
весь прикол задания был, чтобы без вложений в другие блоки ( я первым делом засунул элементы в div, но не понравилось тому кто задание дал.)

ksnk, Спасибо! в интернете куча примеров, но с двумя картинками (один спан и якорь), с тремя не получилось самому сделать.

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

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