Jump to content
  • 0

Элементы списка и инпуты

Serafim1991

Asked by Serafim1991,

 Share

Question

Serafim1991 Explorer

Serafim1991

Posted
Posted (edited)

Есть следующий код:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Регистрационная форма</title>
<style type="text/css">
html, body, h1, form, fieldset, legend, ol, li {
        margin: 0;
        padding: 0;
        }

body {
        background: #ffffff;
        color: #111111;
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 20px;
        }
form#payment {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	counter-reset: fieldsets;
	padding: 20px;
	width: 450px;
	background: #696969;
        }
form#payment fieldset {
        border: none;
        margin-bottom: 10px;
        }

form#payment fieldset:last-of-type {
        margin-bottom: 0;
        }
form#payment legend {
        color: #FFA500;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        text-shadow: 3px 3px 3px #000000;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment ol li {
        background: #71b8ff;
        background: rgba(255,255,255,.3);
        border-color: #c6e3ff;
        border-color: rgba(83,134,139,.7);
        border-style: solid;
        border-width: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px;
        }

form#payment ol ol li {
        background: none;
        border: none;
        float: left;
        }
form#payment label {
        float: left;
        font-size: 13px;
        width: 160px;
        }

form#payment fieldset fieldset label {
        background:none no-repeat left 50%;
        line-height: 20px;
        padding: 0 0 0 30px;
        width: auto;
        }
form#payment fieldset fieldset label:hover {
        cursor: pointer;
        }
form#payment input:not([type=radio]),
form#payment textarea, select {
        background: #ffffff;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 7px;
        width: 250px;

        }
textarea {
		resize: vertical;
		}

form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
        background: #DCDCDC;
        }

<!--form#payment ol:focus, li:focus {border-color: rgba(0,229,238,.7);

		} -->

form#payment input[type=radio] {
        float: left;
        margin-right: 10px;
        }
form#payment button {
        background: #828282;
        border: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        display: block;
        font: 18px Georgia, "Times New Roman", Times, serif;
        letter-spacing: 1px;
        margin: auto;
        padding: 7px 25px;
        text-shadow: 0 1px 1px #C1F7FF;
        text-transform: uppercase;
		position:relative;
        }
form#payment button:hover {
        background: #8BE0FF;
        cursor: pointer;
        }
</style>
</head>

<body>
<form id="payment">
  <fieldset>
          <legend>Персональные данные</legend>
          <ol>
                  <li>
                          <label for="name">Имя</label>
                          <input id="name" name="name"  type="text" placeholder="Введите имя" required autofocus>

                  </li>
                  <li>
                  		  <label for="surname">Фамилия</label>
                          <input id="surname" name="surname" type="text" placeholder="Введите фамилию" required >
                          </li>
                  <li>
                          <label for="email">E-mail</label>
                          <input id="email" name="email" type="email" placeholder="example@domain.com" required>
                  </li>
                  <li>
                          <label for="phone">Телефон (дом.)</label>
                          <input id="phone" name="phone" type="tel" placeholder="Eg. +064511111" required>
                  </li>
                  <li>
                          <label for="Mobphone">Телефон (моб.)</label>
                          <input id="Mobphone" name="phone" type="tel" placeholder="Eg. +380661111111" required>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
          <legend>Место жительства</legend>
          <ol>
                  <li>
                                    <label for="country">Страна</label>
                                        <select required name="Country"  id="country">
                                          <option value ="" disabled>Выберите cтрану...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                    </li>
                          <li>
                                  <label for="city">Город</label>
                                  <select required name="city" id="city">
                                          <option value ="" disabled>Выберите город...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                          </li>
                  <li>
                          <label for="address">Адресс</label>
                          <textarea id="address" name="address" rows="3" placeholder="Eg: Ул. Гагарина, д. 51, кв. 23" required></textarea>
                  </li>
                  <li>
                          <label for="postcode">Почтовый индекс</label>
                          <input id="postcode" name="postcode" type="text">
                  </li>

          </ol>
  </fieldset>
  <fieldset>
          <legend>Информация об учебном заведении</legend>
          <ol>

                  <li>
                          <label for="nazva">Название</label>
                          <textarea id="nazva"  rows="4" name="nazva" type="text" placeholder="Северодонецкий технологический институт Восточноукраинского национального университета имени В. Даля" required></textarea>
                  </li>
                  <li>
                          <label for="adress">Страна, город</label>
                          <input id="adress" name="adress" type="text" placeholder="Eg: Украина, Киев" required>
                  </li>
                  <li>
                          <label for="lvl">Уровень аккредитации</label>
                          <select required name="lvl" id="lvl">
                                          <option value ="" disabled>Выберите уровень...</option>  
                                          <option value="1">Первый уровень аккредитации</option>  
                                          <option value="2">Второй уровень аккредитации</option>  
                                          <option value="3">Третий уровень аккредитации</option>  
                                          <option value="4">Четвертый уровень аккредитации</option>  
                                        </select>
                  </li>
                  <li>

                          <fieldset>
                                  <label>Форма обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="dnev" name="forma" type="radio" required>
                                                  <label for="dnev">Дневная</label>
                                          </li>
                                          <li>
                                                  <input id="zao"  name="forma" type="radio" required>
                                                  <label for="zao">Заочная</label>
                                          </li>
                                          <li>
                                                  <input id="eks"  name="forma" type="radio" required>
                                                  <label for="eks">Экстернат</label>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
                  <li>
                          <fieldset>
                                  <label>Вид обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="bud" name="vid" type="radio" required>
                                                  <label for="bud">Бюджет</label>
                                          </li>
                                          <li>
                                                  <input id="kont" name="vid" type="radio" required>
                                                  <label for="kont">Контракт</label>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
        <button type=submit>Отправить</button> 
    <button type=reset>Очистить</button>
  </fieldset>
  </form>
</body>
</html>

Требуется чтобы при фокусе определенного инпута, бордер вокруг этого поля менял свой цвет.

Вот так:

dpdqVPOq.png

Первый элемент - это фокус содержащегося в нем инпута. Остальные - неактивные.

(картинка сделала в Paint с подменой цвета)

Закоментированная фраза в стилях - это мои мысли по поводу того, как это сделать. Только я не учел, что фокус принимает инпут, а не элемент списка li(ol)

Это вообще реально? Если да, дайте подсказку, как это оформить(полное решение конечно хорошо, но лучше если я сам дойду до этого с некоторыми подсказками)

Edited by Serafim1991
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
sigma77 Explorer

sigma77

Posted
Posted

Это вообще реально? Если да, дайте подсказку, как это оформить(полное решение конечно хорошо, но лучше если я сам дойду до этого с некоторыми подсказками)

В принципе, реально, но потребует дополнительной разметки и не очень надежен в плане возможных дальнейших изменений в разметке внутри элемента списка.

Добавляешь после инпута див с position: absolute и селектором input:focus + div задаешь ему положение и зеленую границу.

Но вообще, я бы такое делала на js.

п.с. И еще. Внутри стилей комментрий <!-- --> недопустим. Используй /* */

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

Добавляешь после инпута див с position: absolute и селектором input:focus + div задаешь ему положение и зеленую границу.

А почему после? Почему не перед label открыть div и после input его закрыть?

input:focus + div

А так разве можно?(ну "+ div" писать)

Или я не правильно понял?

Но вообще, я бы такое делала на js.

Я с HTML+CSS не особо-то дружу) А уж о JS даже не думаю на данный момент

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

А почему после? Почему не перед label открыть div и после input его закрыть?

Потому что мы не можем выбрать предка у элемента. Только дочерние или соседские элементы.

А так разве можно?(ну "+ div" писать)

Или я не правильно понял?

Можно. http://htmlbook.ru/samcss/sosednie-selektory

Вообще почитайте о видах селекторов.

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

Спасибо.

Можно я вас еще помучаю?)

Собственно, рисовать рамку с дивом я понял как. Размер меняется только по высоте(как я понял, это из-за position:absolute у дива).

Но, как обычно, без косяков не обойтись.

6RTvbPRR.png

Подвинул рамку свойствами bottom и right к верхнему левому углу.

Проблемы:

1. Ширина меняется(ширина формы 450px), но если она превышает 380px(определил методом изменения ширины рамки свойством width), то начинается увеличиваться и сама форма(элементы li)

2. Как видно на картинке, поле с фокусом увеличивается на размер рамки(само поле 20px, соответственно, когда оно получает фокус, то его размер становится 40px)

3. С полем textarea(на скриншоте - Адресс) вообще проблема. Теоретически, их можно вынести в отдельное свойство и там при условии, что textarea имеет фокус, менять цвет рамки... Но практически - не знаю, смутно себе это представляю.

Как растянуть ее до нужной мне ширины, минуя те проблемы, которые я описал выше и избавиться от увеличение элемента li в размерах по высоте?

Вот, как я это описал 


.div { position:absolute;}

form#payment input:not([type=submit]):focus + div,
form#payment textarea:focus + div {
		border-color: #00E5EE;
        border-color: rgba(0,229,238,.7);
        border-style: solid;
        border-width: 2px;
		border-radius: 5px;
		padding: 20px;
        margin-bottom: 2px;
		position:relative;
		bottom: 40px;
		right: 12px;
		width: 420px;
        }

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

Что-то странное творится с этим JS и jQuery

Подключил файл(пробовал как с диска, так и с интернета), добавил этот скрипт, добавил свойства для active,но работать он отказывается, хотя на jsfiddle.net все работает.

Скрипт между внутри тега head.

Меня смутило только отсутствие имени функции, но раз на jsfiddle работает, значит так можно делать.

Что не так?

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

Как растянуть ее до нужной мне ширины, минуя те проблемы, которые я описал выше и избавиться от увеличение элемента li в размерах по высоте?

Вот, как я это описал 


.div { position:absolute;}

form#payment input:not([type=submit]):focus + div,
form#payment textarea:focus + div {
		border-color: #00E5EE;
        border-color: rgba(0,229,238,.7);
        border-style: solid;
        border-width: 2px;
		border-radius: 5px;
		padding: 20px;
        margin-bottom: 2px;
		position:relative;
		bottom: 40px;
		right: 12px;
		width: 420px;
        }

Не совсем так. Li изменяется по высоте потому что ты меняешь position с absolute на relative и у тебя этот див становится в потоке.

Тебе нужно оставить absolute у дива, а релатив задать li. Тогда ты сможешь координатами top, left, right, bottom растянуть див на нужную ширину и высоту, и привязать див к конкретному элементу списка.

Что-то странное творится с этим JS и jQuery

Подключил файл(пробовал как с диска, так и с интернета), добавил этот скрипт, добавил свойства для active,но работать он отказывается, хотя на jsfiddle.net все работает.

А сам jQuery ты подключаешь?

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

Не совсем так. Li изменяется по высоте потому что ты меняешь position с absolute на relative и у тебя этот див становится в потоке.

Тебе нужно оставить absolute у дива, а релатив задать li. Тогда ты сможешь координатами top, left, right, bottom растянуть див на нужную ширину и высоту, и привязать див к конкретному элементу списка.

Уже стыдно становится, но по прежнему ничего не вышло.

У дива оставил absolute, для li добавил relative, но проблемы все те же. Убрал в focus+div padding, но высота по прежнему на 20px больше, чем я указываю.

Вот последняя версия


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Регистрационная форма</title>
<style type="text/css">

html, body, h1, form, fieldset, legend, ol, li {
        margin: 0;
        padding: 0;
        }

body {
        background: #ffffff;
        color: #111111;
        font-family: Georgia, "Times New Roman", Times, serif;
        padding: 20px;
        }
form#payment {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	counter-reset: fieldsets;
	padding: 20px;
	width: 450px;
	background: #696969;
        }
form#payment fieldset {
        border: none;
        margin-bottom: 10px;
        }

form#payment fieldset:last-of-type {
        margin-bottom: 0;
        }
form#payment legend {
        color: #FFA500;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 10px;
        text-shadow: 3px 3px 3px #000000;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment > fieldset > legend:before {
        content: "Шаг " counter(fieldsets) ": ";
        counter-increment: fieldsets;
        }
form#payment ol li {
        background: #71b8ff;
        background: rgba(255,255,255,.3);
        border-color: #c6e3ff;
        border-color: rgba(83,134,139,.7);
        border-style: solid;
        border-width: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        line-height: 30px;
        list-style: none;
        padding: 5px 10px;
        margin-bottom: 2px;
		position:relative;
        }

form#payment ol ol li {
        background: none;
        border: none;
        float: left;
				position:relative;
        }
form#payment label {
        float: left;
        font-size: 13px;
        width: 160px;
        }

form#payment fieldset fieldset label {
        background:none no-repeat left 50%;
        line-height: 20px;
        padding: 0 0 0 30px;
        width: auto;
        }
form#payment fieldset fieldset label:hover {
        cursor: pointer;
        }
form#payment input:not([type=radio]),
form#payment textarea, select {
        background: #ffffff;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        font: italic 13px Georgia, "Times New Roman", Times, serif;
        outline: none;
        padding: 7px;
        width: 250px;

        }
textarea {
		resize: vertical;
		}

.div { position:absolute;}

form#payment input:not([type=submit]):focus + div,
form#payment textarea:focus + div {
		border-color: #00E5EE;
        border-color: rgba(0,229,238,.7);
        border-style: solid;
        border-width: 2px;
		border-radius: 5px;
        margin-bottom: 2px;
		position:relative;
		bottom: 40px;
		right: 12px;
		width: 420px;
		height: 40px;
        }

form#payment input[type=radio] {
        float: left;
        margin-right: 10px;
        }
form#payment button {
        background: #828282;
        border: none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        display: block;
        font: 18px Georgia, "Times New Roman", Times, serif;
        letter-spacing: 1px;
        margin: auto;
        padding: 7px 25px;
        text-shadow: 0 1px 1px #C1F7FF;
        text-transform: uppercase;
		position:relative;
        }
form#payment button:hover {
        background: #8BE0FF;
        cursor: pointer;
        }
form#payment ol li.active {
    border:2px solid cyan;
}
</style>
</head>

<body>
<form action="script.php" method="POST" id="payment">
  <fieldset>
          <legend>Персональные данные</legend>
          <ol>
                  <li>
                          <label for="name">Имя</label>
                          <input id="name" name="name"  type="text" placeholder="Введите имя" required autofocus>
                         <div></div>
                  </li>
                  <li>
                  		  <label for="surname">Фамилия</label>
                          <input id="surname" name="surname" type="text" placeholder="Введите фамилию" required >
                          <div></div>
                          </li>
                  <li>
                          <label for="email">E-mail</label>
                          <input id="email" name="email" type="email" placeholder="example@domain.com" required>
                  			<div></div>
                  </li>
                  <li>
                          <label for="phone">Телефон (дом.)</label>
                          <input id="phone" name="phone" type="tel" placeholder="Eg. +064511111" required>
                          <div></div>
                  </li>
                  <li>
                          <label for="Mobphone">Телефон (моб.)</label>
                          <input id="Mobphone" name="phone" type="tel" placeholder="Eg. +380661111111" required>
                          <div></div>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
          <legend>Место жительства</legend>
          <ol>
                  <li>
                                    <label for="country">Страна</label>
                                        <select required name="country"  id="country">
                                          <option value ="" disabled>Выберите cтрану...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                                        <div></div>
                    </li>
                          <li>
                                  <label for="city">Город</label>
                                  <select required name="city" id="city">
                                          <option value ="" disabled>Выберите город...</option>  
                                          <option value="t1">Опция №1</option>  
                                          <option value="t2">Опция №2</option>  
                                          <option value="t3">Опция №3</option>  
                                          <option value="t4">Опция №4</option>  
                                        </select>
                                        <div></div>
                          </li>
                  <li>
                          <label for="address">Адресс</label>
                          <textarea id="address" name="address" rows="3" placeholder="Eg: Ул. Гагарина, д. 51, кв. 23" required></textarea>
                          <div></div>
                  </li>
                  <li>
                          <label for="postcode">Почтовый индекс</label>
                          <input id="postcode" name="postcode" type="text">
                          <div></div>
                  </li>

          </ol>
  </fieldset>
  <fieldset>
          <legend>Информация об учебном заведении</legend>
          <ol>

                  <li>
                          <label for="nazva">Название</label>
                          <textarea id="nazva"  rows="4" name="nazva"  placeholder="Северодонецкий технологический институт Восточноукраинского национального университета имени В. Даля" required></textarea>
                          <div></div>
                  </li>
                  <li>
                          <label for="adrinst">Страна, город</label>
                          <input id="adrinst" name="adrinst" type="text" placeholder="Eg: Украина, Киев" required>
                          <div></div>
                  </li>
                  <li>
                          <label for="lvl">Уровень аккредитации</label>
                          <select required name="lvl" id="lvl">
                                          <option value ="" disabled>Выберите уровень...</option>  
                                          <option value="1">Первый уровень аккредитации</option>  
                                          <option value="2">Второй уровень аккредитации</option>  
                                          <option value="3">Третий уровень аккредитации</option>  
                                          <option value="4">Четвертый уровень аккредитации</option>  
                                        </select>
                                        <div></div>
                  </li>
                  <li>

                          <fieldset>
                                  <label>Форма обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="dnev" name="forma" type="radio" required>
                                                  <label for="dnev">Дневная</label>
                                                  <div></div>
                                          </li>
                                          <li>
                                                  <input id="zao"  name="forma" type="radio" required>
                                                  <label for="zao">Заочная</label>
                                                  <div></div>
                                          </li>
                                          <li>
                                                  <input id="eks"  name="forma" type="radio" required>
                                                  <label for="eks">Экстернат</label>
                                                  <div></div>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
                  <li>
                          <fieldset>
                                  <label>Вид обучения</label><br />
                                  <ol>
                                          <li>
                                                  <input id="bud" name="vid" type="radio" required>
                                                  <label for="bud">Бюджет</label>
                                                  <div></div>
                                          </li>
                                          <li>
                                                  <input id="kont" name="vid" type="radio" required>
                                                  <label for="kont">Контракт</label>
                                                  <div></div>
                                          </li>
                                  </ol>
                          </fieldset>
                  </li>
          </ol>
  </fieldset>
  <fieldset>
        <button type=submit>Отправить</button> 
    <button type=reset>Очистить</button>
  </fieldset>
  </form>
</body>
</html>

А сам jQuery ты подключаешь?

Я его и подключаю.

Сам скрипт у меня внутри тега head.

Пробовал подключать 2 файла(jQuery и файл с скриптом), но результат столь же плачевный.

Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

как подключаешь, в коде выше я скриптов не наблюдаю


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function()
{
   //здесь пишем все свои команды, или после тега </html>
});
</script>

Link to comment
Share on other sites
  • 0
Serafim1991 Explorer

Serafim1991

Posted
  • Author
Posted

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

Ошибка была в неправильном подключении.

У меня было вот так:


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
$(document).ready(function()
                   {
                       $('input, select, textarea').focus(function()
                                        {
                                            $(this).parent('li').addClass('active');
                                        });
                       $('input, select, textarea').blur(function()
                                       {
                                           $(this).parent('li').removeClass('active');
                                       });
                   });
</script>

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


<script>
...
</script>

Поставленная задача решена, всем спасибо.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept