VPF::Линк переносится на следующею строку

ShurikA

Дата 23.10.2008, 12:11 (ссылка)

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

Загрузка ...

Зануда

Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3

Есть такой HTML:

Код


<table class="araneumTable">
            <thead>
                <tr>
                    <td class="araneumTableSubTitleTd">Name</td>
                    <td class="araneumTableSubTitleTd">Sign</td>
                    <td class="araneumTableSubTitleTd">Direction</td>
                    <td class="araneumTableSubTitleTd">Charset</td>
                    <td class="araneumTableSubTitleTd">Controls</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>English</td>
                    <td>en</td>
                    <td>ltr</td>
                    <td>UTF-8</td>
                    <td>
                        <a href="http://localhost/iibbase/araneum.php?mod=Language&act=del&lSign=en" onclick="return languageDelConfirm();">
                            <img src="images/araneum/delete.png" />
                        </a>
                        <a class="editBtn" href="http://localhost/iibbase/araneum.php?mod=Language&act=edit&lSign=en">
                            <img src="images/araneum/edit.png" />
                        </a>
                        <a class="textBtn100" href="http://localhost/iibbase/araneum.php?mod=Language&act=dictionary&lSign=en">
                            Dictionary
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

и CSS:

Код


.araneumTable {
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-collapse: collapse;
}
.araneumTable thead {
    background-color: #C1C1C1;
    color: #4d4948;
    font-size: 16px;
}
.araneumTable tbody {
    color: #0093dd;
}
.araneumTable tbody tr {
    border-bottom: dashed 1px #EAECEE;
}
.deleteBtn {
    width: 30px;
    height: 30px;
    padding: 0px 3px;
}
.editBtn {
    width: 30px;
    height: 30px;
    padding: 0px 3px;
}
.textBtn100{
    width: 100px;
    height: 30px;
    display: table-cell;
    background: center no-repeat url(../images/araneum/emptyButton100.png);
    text-align: center;
    line-height: 30px;
    color: white;
    text-decoration: none;
    padding: 0px 3px;
}

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

Это сообщение отредактировал(а) ShurikA - 23.10.2008, 12:12

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

Если долго мучиться, что нибудь получится...

webster

Дата 23.10.2008, 20:24 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

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

Код


td a {
    float: left;
}
.textBtn100{
    float: right;
......................

Других решений данной задачи и не видится.

ShurikA

Дата 23.10.2008, 23:54 (ссылка)

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

Загрузка ...

Зануда

Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3

webster,
А такого чёрта он переносится?

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

Если долго мучиться, что нибудь получится...

webster

Дата 24.10.2008, 08:04 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

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

Вы объявили:

Код


.textBtn100{
...
    display: table-cell;
...

А display: table-cell; это отображение в виде ячейки (td), которая в свою очередь является блочным элементом, поэтому и стоит на новой строке.

ShurikA

Дата 24.10.2008, 19:26 (ссылка)

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

Загрузка ...

Зануда

Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3

webster,
Но если я ставлю ни одним из блочных то линк не растягивается на те размеры которые мне нужно.

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

Если долго мучиться, что нибудь получится...

webster

Дата 24.10.2008, 21:32 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

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

Так я вам и предложил вариант вывести их в одну строку, объявив всех и дополнительно плавающими float: left;

Код


...
                    <td>
                        <a class="deleteBtn" href="http://localhost/iibbase/araneum.php?mod=Language&act=del&lSign=en" onclick="return languageDelConfirm();">
                            <img src="images/araneum/delete.png" />
                        </a>
                        <a class="editBtn" href="http://localhost/iibbase/araneum.php?mod=Language&act=edit&lSign=en">
                            <img src="images/araneum/edit.png" />
                        </a>
                        <a class="textBtn100" href="http://localhost/iibbase/araneum.php?mod=Language&act=dictionary&lSign=en">
                            Dictionary
                        </a>
                    </td>
...

(кстати, вы забыли у первой кнопки проставить класс class="deleteBtn"! )

Код


.deleteBtn {
    width: 30px;
    height: 30px;
    padding: 0px 3px;
}
.editBtn {
    width: 30px;
    height: 30px;
    padding: 0px 3px;
}
td a {
    float: left;
}
.textBtn100{
    float: right;
    width: 100px;
    height: 30px;
    display: table-cell;

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

ShurikA

Дата 25.10.2008, 05:56 (ссылка)

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

Загрузка ...

Зануда

Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3

Спасибо

Добавлено через 14 минут и 1 секунду
webster,
А каким образом сделать так что бы линки всё таки были по середине ячейки?

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

Если долго мучиться, что нибудь получится...

webster

Дата 25.10.2008, 08:30 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

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

Код


td {
line-height: 30px;
}

Или обывновенными паддингами.

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