Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > img и button имеют разные top


Автор: DEER 27.2.2009, 14:53
Помогите пожалуйста разобраться, что я упустил

есть вот такой http://uaz-ryazan.ru/sample/sample.html
Код

<!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", то всё выглядит правильно.( нижняя "кнопка")

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

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

Автор: ksnk 27.2.2009, 19:36
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> Вот. 

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

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)