Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Перенос доп поля на след. строку и position:left

Перенос доп поля на след. строку и position:left


     06.12.2012    Все вопросы » Стили (CSS)    2698

вопрос
подскажите как в дополнительном поле перенести форму на следующую строку после заголовка, а также как задать ему position:left ?? При этом надо чтобы оставался тег {xfields}
Перенос доп поля на след. строку и position:left

Перенос доп поля на след. строку и position:left

Ответил: BR0kEN


Во-первых, position:left не существует. Атрибут position может принимать свойства absolute, relative или наследовать значение родителя.

Во вторых, для решения задачи можно использовать два пути. Первый - это display:inline-block, второй - float:left.

Пример с float:
.container {
    width:620px;
    padding:20px 20px 0;
    margin:30px auto;
    background:#eee;
    font-size:12px;
    font-family:Arial;
    border:1px solid #ccc;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.container:after,
.container:before {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
.field {
    float:left;
    width:250px;
    margin-bottom:30px;
}
.field p {
    margin:0;
    font-weight:bold;
}
.field.margin {
    margin-right:50px;
}
.field input {
    width:250px;
    height:20px;
}

<div class="container">
    <div class="field margin">
        <p>Wot</p>
        <input type="text" value="" />
    </ div>

    <div class="field">
        <p>Dark</p>
        <input type="text" value="" />
    </ div>

    <div class="field">
        <p>Aion</p>
        <input type="text" value="" />
    </ div>
</ div>

Пример со строчным блоком:
.container {
    width:620px;
    padding:20px 20px 0;
    margin:30px auto;
    background:#eee;
    font-size:12px;
    font-family:Arial;
    border:1px solid #ccc;
    -webkit-border-radius:3px;
    border-radius:3px;
}
.field {
    display:inline-block;
    vertical-align:top;
    *display:inline;
    zoom:1;
    width:250px;
    margin-bottom:30px;
}
.field p {
    margin:0;
    font-weight:bold;
}
.field.margin {
    margin-right:50px;
}
.field input {
    width:250px;
    height:20px;
}

HTML код тот же, что и в примере с float.

7 комментариев

BR0kEN
Эксперт

BR0kEN - 7 декабря 2012 03:27 -

***Комментарий удален***

graver
Юзер

graver - 7 декабря 2012 10:33 -

я так и думал! Говорил же в описании мне нужно что бы {xfields} оставался, потому что при выборе категории на странице добавлении новости, при выборе определенной категории, внизу появляется доп поля выбранной категории, а если их всунуть твои кодом, то они сразу показываются на странице!

nowheremany
Эксперт

nowheremany - 7 декабря 2012 09:33 -


Благодарность принимаю тут Связь

graver
Юзер

graver - 7 декабря 2012 10:18 -

Ребята, мне не спроста нужно что бы тег оставался без изменений! Хотя мб что то можно сделать, короче смотрите у меня на странице добавления сначала присутствует выбор категории, а когда человек выбирает категорию, внизу появляються доп поля (они предназначены к определенной категории),

Если же тег {xfield} как то заменить, хаком nowheremany, или то что Broken предложил то на странице добавления эти доп поля сразу появляются, хотя категорию еще не выбрали!!! Вопрос как сделать так что бы вашим заменой {xfields}, эти строки появлялись на странице только после того как выберут категорию определенного доп. поля

BR0kEN
Эксперт

BR0kEN - 7 декабря 2012 14:34 -

Можно использовать ответ из этого поста, или делать выбор полей с помощью селектора :nth-child():
.container input:nth-child(1) { }

или сделать так:
Открыть /engine/inc/xfields.php, найти:
<tr id="$holderid" {$uid}>
<td class=addnews>$value[1]:</td>
<td class=xfields colspan="2"><input type="text" name="xfield[$fieldname]" id="xfield[$fieldname]" value="$fieldvalue" {$params}/>&nbsp;&nbsp;[if-optional]({$lang['xf_not_notig']})[/if-optional][not-optional]({$lang['xf_notig']})[/not-optional]</td>
</tr>

и заменить на:
<div class="field margin" id="$holderid" {$uid}>
    <p>$value[1]:</p>
    <input type="text" name="xfield[$fieldname]" id="xfield[$fieldname]" value="$fieldvalue" {$params}/>&nbsp;&nbsp;[if-optional]({$lang['xf_not_notig']})[/if-optional][not-optional]({$lang['xf_notig']})[/not-optional]
</div>

Открыть addnews.tpl и тег xfields обернуть контейнером:
<div class="container">
      {xfields}
</div>

У последнего способа есть минус. Придется писать доп. стили для отображения полей в админке.

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

graver
Юзер

graver - 7 декабря 2012 19:16 -

.container input:nth-child(1) { }


Воспользовался этим вариантом, скажи а что цифра в скобках означает? категория ?

BR0kEN
Эксперт

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх