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

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


     06.12.2012    Стили (CSS)    2345

вопрос
подскажите как в дополнительном поле перенести форму на следующую строку после заголовка, а также как задать ему 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
163

235 | 275

BR0kEN - 7 декабря 2012 03:27 - Эксперт

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

graver
5

95 | 80

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

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

nowheremany
192

1659 | 1292

nowheremany - 7 декабря 2012 09:33 - Эксперт


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

graver
5

95 | 80

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

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

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

BR0kEN
163

235 | 275

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
5

95 | 80

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

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


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

BR0kEN
163

235 | 275

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

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