слой в ячейке таблице

ХОЛОДный · November 21, 2007

Добрый день. Задача такая:

Есть таблица с тремя ячейками 73 пикселя в высоту (ширина не важна).

Во всех трех background=image, а в средней есть еще и текст.

Задача:

Отцентровать надпись в средней ячейке по вертикали и горизонтали по уровню 25 пикселей от верхней границы ячейки.

Проблемное решение:

По-скольку все ячейки у меня в 73 пикселя, я решил в среднюю ячейку поместить div с высостой в 50 пикселей,в ячейке приэать его к верхнему краю, на него положить текст и выровнять его по середине слоя.

Вот что у меня получилось:

Запись в template.css
/*ценральная часть кнопки меню*/
DIV.menucenter{
 height: 50px;
 valign: center;
}

запись в верстке страницы:

<table>
<tr>
<td align="center" valign="center" background="blabla.gif">
</td>

<td align="center" valign="top" background="blabla1.gif">
<div class="menucenter">
Эта запись выравнена по ур-ню 25px
</div>
</td>


<td align="center" valign="center" background="blabla2gif">
</td>

</tr>
</table>

И почему-то не работает, запись равнятеся по верху ячейки...

Что делать?

Scrum · November 21, 2007

http://htmlbook.ru/css/margin.html

yopopt · November 21, 2007

В css нет свойства valign. Есть vertical-align.

Scrum · November 21, 2007

В css нет свойства valign. Есть vertical-align.

да и значения center, что у vertical-align, что у valign то же нет.

ХОЛОДный · November 21, 2007

Я подправил css:

DIV.menucenter{
 height: 50px;
 vertical-align: middle;
}

Вот ссылка на картинку.

http://img409.imageshack.us/my.php?image=h...questionbp2.jpg

Посмотрите, пожалуйста.

Я хочу сделать так, чтобы надписи выровнялись по черной линии.

Если надпись в одну строку, то линия проходит через

"центр надписи", если надпись из двух строк, то первая строка НАД линией, а вторая - под ней.

Не получается. Никак не пойму, что не так делаю.

Подскажите.

Добавлено:

Ау.... Поможите мне..

ХОЛОДный · November 22, 2007

В общем названные рецепты не помогают..(

Есть еще что-то?

klierik · November 22, 2007

поместите код в соответствующий тег

по теме: вертикальное выравнивание Внутри дива неработает.

используйте vertical-align;middle; для

ХОЛОДный · November 22, 2007

Теперь выглядит так:

/*ценральная часть кнопки меню*/
td.centermenu{
 vertical-align: middle;
}
DIV.menucenter{
 height: 50px;
 vertical-align: baseline;
}

И html:

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
 <td background=" left0.gif" width=12px height=73px></td>
 <td class="menucenter" align="center" height=73px background="center0.gif"><div class="centermenu"><a href="blabla.php"><nobr>  ссылка  </nobr></div></a></td> 
 <td background="right0.gif" width=41px height=73px></td> 
</tr>
<!--и так еще 6 раз-->
</table>

ничего не поменялось...

И так пробовал... не, что-то не так я делаю

/*ценральная часть кнопки меню*/
td.menucenter{
 vertical-align: middle;
}
DIV.menucenter{
 height: 50px;
 vertical-align: middle;
}

Не получается.(

klierik · November 22, 2007

height=73px

бред. так писать в атрибутех нельзя!

надо: height="73"

а лучше вешсть на tr и на td одинаковый класс и в нем задавать высоту

это надо для кроссбраузерности в сафари, и кажется оперы

ХОЛОДный · November 22, 2007

height=73px
бред. так писать в атрибутех нельзя!
надо: height="73"
а лучше вешсть на tr и на td одинаковый класс и в нем задавать высоту
это надо для кроссбраузерности в сафари, и кажется оперы

Спасибо, исправил!

А по теме есть что-нибудь?

klierik · November 22, 2007

ну так этои есть о теме =)

или вам предоставить рабочий код?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">

* {margin:0; padding:0; border:none;}
table {border-collapse:collapse; width:100%;}
.q, .q td {height:73px; background:#eee; vertical-align:middle;}
.q div {height:50px; background:#aaa;}


.q td {border:1px solid red;}

</style>


</head>

<body>

<table>
 <tr class="q">
 <td><div></div></td>
 <td><div></div></td>
 <td><div></div></td>
 </tr>
</table>

</body>
</html>

ХОЛОДный · November 22, 2007

Я подправил css:
DIV.menucenter{
 height: 50px;
 vertical-align: middle;
}
Вот ссылка на картинку.
http://img409.imageshack.us/my.php?image=h...questionbp2.jpg
Посмотрите, пожалуйста.
Я хочу сделать так, чтобы надписи выровнялись по черной линии.
Если надпись в одну строку, то линия проходит через
"центр надписи", если надпись из двух строк, то первая строка НАД линией, а вторая - под ней.
Не получается. Никак не пойму, что не так делаю.
Подскажите.

вот, что я хочу. Для этого мне нужно в среднюю ячейку из тройки поместить слой высотой в 50

А текст, принадлежащий слою, отравнять по уровню 25...

Вот, что я хочу..

klierik · November 22, 2007

в таком случае в коде, мною предоставленом, не ставте высоту диву и просто засунте в него ссылку.

пусть браузер сам по-центру выставит.

ну на крайняк выставьте для ячейки паддинг-топ:25пк

а е? высоту уменьшите на 25

ХОЛОДный · November 22, 2007

в таком случае в коде, мною предоставленом, не ставте высоту диву и просто засунте в него ссылку.
пусть браузер сам по-центру выставит.
ну на крайняк выставьте для ячейки паддинг-топ:25пк
а е? высоту уменьшите на 25

ваше предложение не работает.

получается тоже самое, что и у меня.

Текст не равняется

Dimitry Wolotko · November 23, 2007

В проблемы с версткой.

Sign In

слой в ячейке таблице

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information