Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > В ячейке текст по центру. Нада поместить кнопку в

Автор: HappyMan 24.4.2005, 22:12

Код


<html>
<body>

<table border="1" width="300" width="300">
<tr>
       <td align="center" width="200">111 <input type="submit" value="x"></td>
       <td>222</td>
</tr>
</table>

</body>
</html>

есть ячейка. В ней текст выравнивается по центру. Как сделать чтобы кнопка "х", расположенная в этой ячейке выравнивалась бы по праву(right)???

align="right" - не помогает.

Автор: PARROT 24.4.2005, 22:46

Заключи input в отдельный <td>

Автор: HappyMan 24.4.2005, 22:53

PARROT
а без этого? ну с помощью Дива например??

Автор: PARROT 24.4.2005, 22:58

Код


<html>
<body>

<table border="1" width="300" width="300">
<tr>
       <td align="center" width="200">111 
       <div style="position: absolute; top: 17; left: 180; z-index: 0;">
       <input type="submit"  style="padding-right:20" value="x" align=right></div></td>
       <td>222</td>
</tr>
</table>

</body>
</html>

Автор: dm9 25.4.2005, 03:09

Делается это так.

Код


<html>    
<body>    
<table border="1" width="300" width="300">    
<tr>    
       <td align="center" width="200"><div style="float: right"><input type="submit" value="x"></div>111</td>    
       <td>222</td>    
</tr>    
</table>    
</body>    
</html>

Весь контент должен идти ПОСЛЕ кнопки, а не перед ней!

Добавлено @ 03:11
Читать тут:
http://www.webber.ru/articles/article.html?article_id=51

Автор: dm9 25.4.2005, 03:28

Цитата(PARROT @ 24.4.2005, 23:58)

<div style="position: absolute; ...

Это не работает, так как при изменении кординаты верхнего левого угла таблицы всё "поплывёт".

Добавлено @ 03:32
Можно было бы так, наверное, сделать... теоретически.

Код


<html>     
<body>     
<table border="1" width="300" width="300">     
<tr>     
       <td align="center" width="200"><input type="submit" value="x" style="float: right">111</td>     
       <td>222</td>     
</tr>     
</table>     
</body>     
</html>

Но Internet Explorer так не делает выравнивание текста по центру.

Автор: HappyMan 25.4.2005, 21:58

dm9

Код


<td align="center" width="200"><input type="submit" value="x" style="float: right;"><center>111</center></td>

остается только сделать чтобы он еще по верху выравнивал бы(топ).... как?

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

Нужно сделать выравнивание в верхний правый угол!

Автор: PARROT 26.4.2005, 09:00

Я конечно незнаю...... Я бы сделала все это в разных тд и не мучалась.

Может так?

Код


<table border="1" width="500">     
<tr valign=top>     
       <td align="center" width="400" height=200><input type="submit" value="x" style="float: right">111</td>     
       <td>222</td>     
</tr>     
</table>

Мой вариант выравнить в правый верхний угол не получается.
Хотя нужно подумать. smile

Автор: dm9 26.4.2005, 10:26

Цитата(PARROT @ 26.4.2005, 10:00)

Может так?

Нет, не так. Я писал же, что под ИЕ глючит.

А мой первый вариант работает как надо, выкидывает кнопку в правый верхний угол. Только надо было вот это прочитать:

Цитата(dm9 @ 25.4.2005, 04:09)

Весь контент должен идти ПОСЛЕ кнопки, а не перед ней!

Автор: PARROT 26.4.2005, 11:11

Цитата(dm9 @ 26.4.2005, 10:26)

Цитата(PARROT @ 26.4.2005, 10:00)

Может так?

Цитата(dm9 @ 25.4.2005, 04:09)

Весь контент должен идти ПОСЛЕ кнопки, а не перед ней!

Это и есть Ваш вариант.... smile

внимательно посмотрите код.
То что глючит мой вариант, не правда, у меня ни разу не глючило и будьте так добры, соблюдайте тактичность, пожалуйста.

Человек просил поднять все наверх...с кнопкой.

Автор: dm9 26.4.2005, 12:49

Ещё раз...
Этот вариант не работает в ИЕ

Цитата(PARROT @ 26.4.2005, 10:00)

Нет центрирования текста по горизонтали. Я писал об этом выше... надо в дивы оборачивать.

Автор: HappyMan 26.4.2005, 17:10

PARROT
на верх, в прав. верхний угол должна поднятся ТОЛЬКО(!) кнопка!

dm9
никак не пойму:

Цитата

Весь контент должен идти ПОСЛЕ кнопки, а не перед ней!

Чтобы текст в ячейке центрировался нада делать так(смотри пару постов выше):

Код


... style="float: right;"><center>111</center></td>

Автор: dm9 26.4.2005, 17:50

Цитата(HappyMan @ 26.4.2005, 18:10)

на верх, в прав. верхний угол должна поднятся ТОЛЬКО(!) кнопка!

А текст куда деться должен?

Автор: HappyMan 26.4.2005, 23:25

dm9
Все просто! Ячейка. В ней текст(по центру). В правом верхнем углу - кнопка! Вот и все!

Автор: dm9 27.4.2005, 01:12

Цитата(HappyMan @ 27.4.2005, 00:25)

В ней текст(по центру)

По центру чего? По горизонтали или вертикали?
И объясни популярно, чем не устраивает мой первый исходник.

Автор: PARROT 27.4.2005, 08:32

Я говорю нужно 3 ячейки сделать! Тогда встанет все на свои места и кнопка будет там, где она хочет. smile

• float не может расположить элемент вверху! Возможные значения:
[1] left - слева
[2] right - справа
[3] none - по умолчанию
*Применимо для : всех элементов
Описание: расположение элемента
ПРИМЕР:float:right

Автор: HappyMan 27.4.2005, 15:32

dm9
привожу немного переделанный твой первый код:

Код


<html>      
<body>      
<table border="1" height="50" width="300">      
<tr>      
       <td align="center" width="200"><input type="submit" value="x" style="float: right"><center>111</center></td>      
       <td>222</td>      
</tr>      
</table>      
</body>      
</html>

dm9
1) - так как сделано у тебя!
2) - так как мне нужно чтобы было!

Автор: HappyMan 27.4.2005, 15:43

PARROT
плохо дело...

Автор: dm9 27.4.2005, 20:31

Цитата(HappyMan @ 27.4.2005, 16:32)

dm9
1) - так как сделано у тебя!
2) - так как мне нужно чтобы было!

1) У меня не совсем так... я не прописывал valign="middle", он используется по умолчанию. Тебя не устраивает вариант, когда контент по вертикали прижимается к верху?
Если устраивает - приписывай valign="top", тогда будет как на прикреплённом рисунке.

Если же ты хочешь, чтобы только кнопка прижималась к верху, а контент был по центру (по вертикали, в смысле), я не знаю, как так сделать. Разве что, использовать мой вариант (с valign="top"), но вставить вверх пару br-ов...

Автор: Aliance 27.4.2005, 20:37

HappyMan
Непонимаю, чем тебя valign="top" не устраивает?

Автор: HappyMan 27.4.2005, 22:22

dm9
Aliance

меня не устраивает вариант,

Цитата

когда контент по вертикали прижимается к верху

Автор: dm9 27.4.2005, 23:31

А тебе обтекание кнопки текстом обязательно нужно? smile

Или можно чтоб под кнопкой текста не было?

Автор: HappyMan 27.4.2005, 23:38

dm9
приведи пример... (сорс)

Автор: dm9 27.4.2005, 23:50

Как это ни пошло, но... smile

Код


<html>       
<body>       
<table border="1" height="50" width="300">       
<tr>       
    <td align="center" width="200">
        <table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0"><tr>
            <td valign="middle" align="center" width="100%">111</td>
            <td valign="top" width="0%"><input type="submit" value="x"></td>
        </tr></table>        
    </td>
    <td>222</td>       
</tr>       
</table>       
</body>       
</html>

Через float не получилось (как вначале думал), да и вряд ли получится.

В общем, если нужно кнопку вверх, а текст чтобы был по центру ячейки (то есть одинакое расстояние от верха и низа ячейки до текста), да ещё чтобы кнопка обтекалась этим текстом... я сдаюсь smile