-
Similar Content
-
By Marri.nich
Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой:
<header> <nav> <div class="container"> <ul class="menu"> <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> ... <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> </ul> </div> </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px.
Дополнение: тегу nav в стилях задан width: 100%.
Вопрос:
1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
2. Почему margin'ы работают не так как я ожидаю?)
Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
Спасибо за ответы.
-
By mrvelan
Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...
<div id="order" class="popup">
<a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
<h4>Введите данные</h4>
<form id="formToSend">
<input id="fio" type="text" placeholder="Имя" class="text-input" />
<input id="city" type="text" placeholder="Район Риги" class="text-input"/>
<input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
<input id="email" type="text" placeholder="Э-почта" class="text-input" />
<input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
<br>
<textarea id="question" placeholder="Адрес доставки"></textarea>
<br>
<b>Доставка:</b>
<br>
<select id="delivery">
<option value="-">-</option>
<option value="С доставкой">ДА. Доставка нужна</option>
<option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
</select>
</form>
<button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
</div>
-
By Nerwoid
Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
Вот: макет:
Мой сайт
-
By Алексей8888
Добрый День.
Такой Вопрос, если есть возможность, помогите, кто сталкивался с подобной Темой.
Есть форма отправки информации (Имя, Е-мэйл, Телефон, Описание)
После заполнения формы, нажав на Отправить, инфо отправляесься на Сервер, храниться там. На сервере создал
файл post.php
Вопрос заключаеться в следующем:
Что нужно прописать в скрипте чтобы заполненная форма номер 1 автоматически отправлялась на емэйл
следующему человеку заполнившему следующим ту же форму?
Выглядит так:
Первый человек заполняет форму, она посылается на сервер и сохраняется в файле. Следующий человек получает на емейл содержимое файла, после чего файл переписывается.
И так далее, каждый заполнивший форму Автоматически получает информацию предыдущего посетителя.
Буду Благодарен за любую информацию.
С Уважением
Спасибо
-
By biper
в форме размещения объявления пытаюсь вывести
1. количество знаков в объявлении,
2. стоимость одного объявления (= стоимости одного знака, в зависимости от выбранного типа объявления * количество знаков),
3. общую сумму заказа (= количество публикаций (выбирается из календаря) * стоимость одного объявления -
скидка в 7% если выбрано 4 или более публикаций)
4. Размер скидки в рублях (= 7% от суммы заказа)
количество знаков подсчитывает, в отдельный див вывел без труда... есть уже календарь, который даты публикации передает... Дальше почему то затык...что делаю не так? не могу посчитать и вывести ....
5. Кроме того, нужно в поле «Текст объявления», заполняемого пользователем… выводить внешний вид
объявления – т. е. Class для div внешний вид для текста объявления, набираемого пользователем в
соответствующем поле должен меняться в зависимости от выбранного типа объявления. Т.е. если выбран тип выделение полем, то текст должен с помощью стиля отображаться с фоновым цветом вокруг текста, если выбран тип «в рамке» - текст должен отображаться внутри рамки
Окончательно расписался в собственной безграмотности и готов оплатить работу знающего человека. Оплата по факту на карточку или еще куда. Интересует на этом этапе цена вопроса
Саму страничку можно посмотреть по адресу http://modx.biper3fo.bget.ru/prajs-list.htmlна вкладке "РАЗМЕЩЕНИЕ СТРОЧНЫХ ОБЪЯВЛЕНИЙ"
код странички - все вместе, со скриптом..
<div id="respond"> <form method="post" action="[~[*id*]~]"> <input type="hidden" name="formid" value="contact-form" /> <img src="/image/shadow.png" alt="тень" "width="100%" "> <h2>электронная форма размещения объявлений</h2><hr> <p><b>Для уточнения возникших у Вас вопросов и для консультации Вы можете связаться с сотрудником редакции по многоканальному телефону, указанному в шапке сайта или воспользоваться офлайн контактной формой "Перезвоним" в правом нижнем углу экрана</b></p> <hr> <div class="col-sm-6"> <p><label accesskey="n" for="name">Ваше имя (например "Александр Иванов")</label> </div> <div class="col-sm-6"> <input type="text" name="name" size="50%" maxlength="100%" eform="Имя::1" /></p> </div> <div class="col-sm-6"> <p><label accesskey="e" for="email">Адрес Вашей электронной почты (например "post@mail.ru")</label> </div> <div class="col-sm-6"> <input type="text" name="email" size="50%" maxlength="100%" eform="Адрес электронной почты:email:1" /></p> </div> <div class="col-sm-6"> <p><label accesskey="p" for="phone">Ваш мобильный телефон (на сайте не публикуется). Необходим для того, чтобы идентифицировать Ваш заказ. Этот же номер Вам понадобится при оплате услуги на терминале. (например "8 929 001 22 34")</label> </div> <div class="col-sm-6"> <input type="text" name="phone" size="50%" maxlength="100%" eform="Ваш мобильный телефон::1" /></p> </div> <div class="col-sm-6"> <p><label accesskey="s" for="otdel">Выберите раздел газеты</label> </div> <div class="col-sm-6"> <select name="otdel" > <option value="&&& Недвижимость">Объявление в раздел Недвижимость</option> <option value="&&& Дачное строительство">Объявление в раздел Дачное строительство</option> <option value="&&& Ремонт квартир">Объявление в раздел Ремонт квартир</option> <option value="&&& Балконы, окна">Объявление в раздел Балконы, окна</option> <option value="&&&Электротехнические работы">Объявление в раздел Электротехнические работы </option> <option value="&&& Сантехника">Объявление в раздел Сантехника</option> <option value="&&& Двери, металлоконструкции">Объявление в раздел Двери, металлоконструкции</option> <option value="&&& Замки">Объявление в раздел Замки</option> <option value="&&& Межкомнатные двери">Объявление в раздел Межкомнатные двери</option> <option value="&&& Мебель, интерьер">Объявление в раздел Мебель, интерьер</option> <option value="&&& Ремонт бытовой техники">Объявление в раздел Ремонт бытовой техники</option> <option value="&&& Ремонт компьютеров">Объявление в раздел Ремонт компьютеров</option> <option value="&&& Ремонт телевизоров">Объявление в раздел Ремонт телевизоров</option> <option value="&&& Антенны">Объявление в раздел Антенны</option> <option value="&&& Грузоперевозки">Объявление в раздел Грузоперевозки</option> <option value="&&& Куплю">Объявление в раздел Куплю</option> <option value="&&& Продаю">Объявление в раздел Продаю </option> <option value="&&& Займы">Объявление в раздел Займы</option> <option value="&&& Разное">Объявление в раздел Разное</option> <option value="&&& Ветеринарные услуги">Объявление в раздел Ветеринарные услуги</option> <option value="&&& Ритуальные услуги">Объявление в раздел Ритуальные услуги</option> <option value="&&& Брачные знакомства">Объявление в раздел Брачные знакомства</option> <option value="&&& Магия">Объявление в раздел Магия</option> <option value="&&& Вакансии">Объявление в раздел Вакансии</option> <option value="&&& Услуги автомобилистам">Объявление в раздел Услуги автомобилистам</option> <option value="&&& Выкуп авто">Объявление в раздел Выкуп авто</option> <option value="&&& Химчистка">Объявление в раздел Химчистка</option> <option value="&&& Клининг">Объявление в раздел Клининг</option> <option value="&&& Вывоз мусора">Объявление в раздел Вывоз мусора</option> <option value="&&& Дезинсекция">Объявление в раздел Дезинсекция</option> <option value="&&& Организация праздника">Объявление в раздел Организация праздника</option> <option value="&&& Салон красоты">Объявление в раздел Салон красоты</option> <option value="&&& Арена Путешествий">Объявление в раздел Арена Путешествий</option> </select></p> </div> <div class="col-sm-6"> <label accesskey="t" for="type">Выберите тип публикации</type> <select name="type" id="type" onchange="changePrice()"> <option value="без выделения">без выделения</option> <option value="выделение фоном">с фоном</option> <option value="объявление в рамке">в рамке</option> </select> </label> </div> <div class="col-sm-6"> <p><label accesskey="c" for="comments">Наберите текст объявления,- так, как он должен будет выглядеть в газете (для экономии денег :) возможны сокращения. Обязательно укажите контактный телефон (который может отличаться от указанного выше.) Например "Мет. двери, реш., ворота. Т. 414-74-66")</label> <br/></p> <h2>Ваше объявление в газете будет выглядеть так:</h2> <!--в поле «Текст объявления», заполняемого пользователем… нужно выводить внешний вид объявления – т. е. текст, введенный пользователем в поле «текст объявления» должен отображаться с тем оформлением CSS-стиля который задан полем «тип выделения публикации»--> <div class="(type_aa)" style="font-size: 14px; color:gray;"> <textarea cols="50" rows="10" name="comments" eform="Текст объявления:html:1" onkeyup="symbols(this)" onkeydown="symbols(this)" onkeyup="changePrice()" onkeydown="changePrice()" id="textarea"></textarea></p> </div> <!-- количество знаков в объявлении --> <div id="symbols"></div> <!--стоимость одной публикации объявления в рублях (--> <div id="price">Стоимость одной публикации объявления в рублях</div> <!-- общая стоимость заказа в рублях --> <div id="resultat">Стоимость заказа в рублях</div> <!-- скидка в рублях --> <div id="skidka">Размер скидки в рублях</div> <div> </div> </div> <div class="col-sm-6"> <!-- дата публикации должна отображаться под конкретные даты корректировка. Должен выводить календарную сетку на текущий год, начиная с текущего месяца, На календарной сетке отображается выделением дата выхода номера газеты. Сии дни обычно приравнены к среде, потому может проще добавить условие - исключения, когда в определенные указанные дни даты переносятся--> <p><label accesskey="dat" for="dat">Дата выхода номера газеты, в котором Вы можете разместить свое объявление - среда, выделена в календаре подчеркиванием. Окончание приема рекламы в номер - 15-00 вторника той же недели. Выберите в календаре желаемую дату выхода (можно выбрать несколько номеров, при этом автоматически просчитанную стоимость Вашего объявления нужно будет умножить на количество публикаций) </label></p> </div> <div class="col-sm-6"> <input type="text" name="dat" size="50%" maxlength="100%" eform="Дата публикации::1" id="dt"/></p> </div> <div class="col-sm-12">[[calendar]]</div> <img src="/image/shadow.png" alt="тень" "width="100%" "> <div class="col-sm-12"> <div class="col-sm-3"> <p><input type="submit" name="submit" id="submit" class="btn btn-primary" value="Разместить объявление"></p> </div> <div class="col-sm-6"> <p><i>Нажимая на кнопку "Разместить объявление", Вы подтверждаете согласие с правилами, указанными в разделе <a href="http://arena-rv.ru/politika-konfidenczialnosti-sajta-arena.html">"Политика конфиденциальности сайта "Арена"</a> и даете согласие на обработку персональных данных, переданных Вами при размещении Вашего объявления</i></p> </div> </div> </form> <script type="text/javascript"> function symbols() { var symbols = textarea.value.length; document.getElementById('symbols').innerHTML = 'В Вашем объявлении <span class="red" style="font-size: 14px; color:red;">' + symbols + '</span> знаков.'; } function changePrice() { var price = document.getElementById('price'); var textarea = document.getElementById('textarea'); var pricei = document.getElementById('pricei'); var resultat = document.getElementById('resultat'); var skidka = document.getElementById('skidka'); if(type.value == 'простое') cena = 18; else if(type.value == 'с фоном') cena = 19; else cena = 24; price.innerHTML = cena * textarea.value.length; pricei.value = cena * textarea.value.length; document.getElementById('price').innerHTML = 'стоимость одной публикации' + price + 'руб.'; } var dt = document.getElementById('dt'); function setDate(d){ dt.value += (dt.value == '') ? d : ', '+d; } function init() { if (arguments.callee.done) return; arguments.callee.done = true; changePrice(); } // ff, opera if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } // ie /*@cc_on @*/ /*@if (@_win32) document.write("<script id=__ie_onload defer src=javascript:void(0)>"); document.write("<\/script>"); var script = document.getElementById("__ie_onload"); script.onreadystatechange = function() { if (this.readyState == "complete") { init(); } }; /*@end @*/ // safari if (/WebKit/i.test(navigator.userAgent)) { var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { clearInterval(_timer); delete _timer; init(); } }, 10); } // others window.onload = init; </script>
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
Nomel
Здравствуйте. Подскажите, пожалуйста, почему кнопка "Send" не центрируется внизу. http://cssdesk.com/V4hj4
Link to comment
Share on other sites
3 answers to this question
Recommended Posts
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.