Джулия

всем привет)

подскажите,пожалуйста, как сделать(запрограммировать)...

есть анкета, она открывается в модальном окне, данные в анкете не меняются http://prntscr.com/bw0orj

как сделать так,чтобы при выборе данных в анкете(чекнутые чекбоксы) и при нажатии на кнопку Сохранить, данные отображались на основной странице(данные-это текст рядом с чекбоксом), причём порядок построения был такой же как в анкете.

Может,кто такое делал или есть готовый пример

спасибо by chris)
 

а кто-нибудь ещё посоветуйте, что используете для анимации,различных эффектов..(javascript, плагины и тд  и тп)? плиз)
 

для всех браузеров надо подключать шрифты с разным расширением, если вы хотите подключать с локального сервера. На локальном сервере вам надо создать папку fonts, конвертировать шрифты .ttf и правильно прописать пути к шрифту в style.css

если вы конвертируете шрифт(.ttf) на том ресурсе,что я вам написала, то получите все нужные расширения.

я подключаю шрифт вот так: http://prntscr.com/bpfg0w

и не надо прописывать для них bold, light. Вы конвертируете изначально(RobotoBold.ttf, RobotoLignt.ttf) уже с жирным, тонким начертанием шрифта.

у меня в проектах очень часто используется шрифт Roboto - очень хороший веб-шрифт, могу ещё посоветовать OpenSans, PTSans. Но Roboto лучше.

34 минуты назад, Вадос Пёс сказал:

 

Доброго времени суток.

Столкнулся с проблемой при верстке сайта ресторана. По центру расположен логотип ресторана и немного залезает на контейнер с адресом и номером телефона. Проблема в том что из-за логотипа нельзя навести и выделить номер или адрес, тк картинка прозрачным полем на них заходит.

Пробовал баловаться с z-index-ом, но ничего дельного не получилось.

html

  Показать содержимое

    <div class="container header">
    	<img src="img/logo.png" class="logo" alt="Логотип гастробара Discovery">
	</div>
    <div class="container main">
    	<div class="navigation">
        	<div class="mapandphone"><table><tr>
                <td>Большая пушкарская д.30<img src="img/mapico.png" alt=""></td>
                <td><img src="img/phoneico.png" alt="">904<span>22</span>89</td>
            </tr></table></div>
            <table class="content"><tr><td><ul>
              	<a href="#"><li>что мы<br>предлагаем</li></a>
                <a href="#"><li>что у нас<br>происходит</li></a></ul></td><td><ul>
                <a href="#"><li>что о нас<br>говорят</li></a>
                <a href="#"><li>как до нас<br>добраться</li></a>
            </ul></td></tr></table>
        </div>
        <!-- остатки хеда -->
    </div>

 

css

  Показать содержимое

.header {
	background-image: url(img/mountain.jpg);
	padding-bottom:14%;
}
.content {
	padding: 5vw 10%;
}
.container {
	background-size:100%;
}
.logo {
	position:absolute;
	width:40%;
	left:30%;
}
.main {
	background-image:url(img/boards.png);
	color:#FFFFFF;
	position:relative;
}
.navigation {
	background-color:rgba(0, 0, 0, 0.6);
}
.mapandphone {
	font-size:2.5vw;
}
.mapandphone a{
	font-weight:normal;
	text-decoration:none;
}
.mapandphone img {
	width:8%;
	vertical-align: middle;
}
.mapandphone span {
	padding-left:2%;
	padding-right:2%;
}
.navigation table {
	padding-top:0;
	padding-bottom:0;
	width:100%;
	border:none;
}
.navigation td {
	margin:0;
	width:50%;
}
.navigation td:nth-of-type(1) {
	text-align:right;
	padding-right:7%;
}

.navigation td:nth-of-type(2) {
	text-align:left;
	padding-left:7%;
}
.navigation ul {
	list-style: none;
	margin:0;
	padding:0;
	text-align:justify;
	line-height: 0;
}
.navigation ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.main li {
	display: inline-block;
	text-align:center;
	padding:1vw 5%;
	line-height: normal;
}
.main li:hover {
	background-color:rgba(255, 255, 255, 0.1);
}
.main li:active {
	top: .2em;
	left: .2em;
}
.main a {
	font-size:2vw;
	color:#FFFFFF;
}

 

перенесла ваш код,вставила картинку-логотип))

можно навести и выделить номер и адрес

http://codepen.io/JuliJulia/pen/XKgBOO

может,вам подойдёт такая стилизация http://codepen.io/JuliJulia/pen/vKkaZY

30 минут назад, by chris сказал:

@Джулияможно начать с настройки готовых плагинов, http://pixelcog.github.io/parallax.js/, затем http://mynameismatthieu.com/WOW/ в связке с https://daneden.github.io/animate.css/

спасибо,by chris)

хотелось бы ещё,чтобы появление блоков происходило в обе стороны(при скролле вниз и вверх). Знаете какие-нибудь готовые решения?

Хочу научиться созданию анимаций на сайте, параллакс-эффекту, интересным появлениям блоков, анимации при скролле..Подскажите,пожалуйста, хорошие приёмы;возможно, библиотеки JS,какие используете либо CSS-анимацию. Видео-уроки, youtube канал по анимации..
Всё,что связано с веб-анимацией и будет полезно знать и уметь.))

конвертируйте шрифты с расширением .ttf во все форматы для разных браузеров(https://everythingfonts.com/font-face) и пропишите в стилях подключение этих шрифтов.

В 10.09.2008 в 08:38, Гость comhunt сказал:

Ребята, тут у меня задача сложнее чем кажется...

Дело в том что у меня нет как такогового жесткого макета страницы.

Я пишу специализированный визивиг редактор математических формул аля микрософт ворд экьюэейшен.

И пользователь щелкая на иконки вставялет внутрь формы редактирвоания ту или иную формулу, вот какждая из которых и будет находится в DIVе со своим ID а между ними должен быть текст.

именно поэтому стили у всех дивов должны быть заданы одни и те же, так как я не знаю в какой последовательности юзер будет вставлть формулу, а где между ними писать текст - знаки + - или просто слова!

Вот такие вот дела...

Интересная задачка?..

задай всем трём блокам float:left; width: примерно 30% и паддинги рассчитай

http://codepen.io/JuliJulia/pen/wWdjXR

по вёрстке таких блоков http://savepic.ru/10349491.htm

лучше верстать блок с бордером, внутри заголовок и текст и иконка - с абсолютным позиционированием(span с бекграундом-иконкой либо используйте псевдокласс :before этого блока тоже с бекграундом-иконкой).

16 часов назад, mstdmstd сказал:

PS. Эта опция недоступна для оператора Зайдите в систему под админом что я давал в самом начале...

возможно,как-то так) http://prntscr.com/bndksd

скачки убрали) - отлично стало.Теперь посмотрите на Лого - надо ли наведение такое же как и у всех ссылок..по-моему не надо

по поводу наведения на строки - можно цвет наведения просто изменить(не делать его цветом нечётных строк,сделать соовсем другим) и тогда наведение можно применить к каждой строке.(для наведения используйте псевдоклассы (nth-of-type(even) и nth-of-type(odd) - чётные и нечётные строки).
в вашем случае .table-hover > tbody > tr:hover:nth-of-type(odd),.table-hover > tbody > tr:hover:nth-of-type(even) {background: #цвет;}

>>>И выпадающие списки вверху в меню серого цвета фона..плохо смотрится.
Для выпадающего подменю сделал бордюр и подменю немного светлей. стало лучше? - я бы сделала цвет бордера зелёным #5cb85c, и вообще,сделала,что-то типо такого http://prntscr.com/bn1noo

по странице http://dev4.softreactor.com/admin/hostel/hostelstep1

>>>разные отступы слева в инпутах с текстом и инпутах селект - вот это я имею ввиду,небольшие отличия,но они заметы http://prntscr.com/bn1cba

>>>по цветовой гамме смотрите сами,но зелёный цвет форм и шагов(#7b9f35) смотрится не очень..я бы поменяла на синий(#337ab7) - на сайте не должно быть очень много разных цветов. -
Поменял. Теперь фон стал как и топ заголовок с тектсом "Hostel Management->New Hostel : Step 1". Думаете так лучше? - поменяйте ещё на белый цвет текста.

И можно чуть подробнее о "на сайте не должно быть очень много разных цветов" Может, ссылку где это описано... Подобрать цвета на сайт довольно сложно... - я так думаю,что макет вам никто не делал,а вы сразу сами верстаете сайт..Часто составляется мудборд-картинки,описывающие тематику сайта.Посоветовала бы выбрать несколько картинок и закинуть в https://color.adobe.com и программа сама подберёт цветовую гамму либо посмотрите ещё https://vc.ru/p/colorise-it

>>>и по шрифту посмотрите: если используете Helvetica, то подгружайте его для пользователей,иначе у меня,например, в системе не установлен этот шрифт и шрифт меняется на ваш указанный вторым - Arial.
А какой набор шрифтов Вы бы предложили чтобы меньше заморачиваться со шрифтами на данном этапе? - часто в вебе используется шрифт Roboto(https://www.google.com/fonts) - найдите его,скачайте и конвертируйте для всех браузеров (https://everythingfonts.com/font-face)

И еще подскажите пожалуйста а как лучше к сделать строку состояния вверху "You have 3 Active Operators  No operator selected (You are watching data of )".Там выводятся какие-то общие сообщения для залогинившегося юзера. не знаю как сделать лучше - то что сейчас не очень нравится... - не вижу,где эти состояния,пришлите скрин.

В 25.05.2016 в 18:41, Kirill M сказал:

Здравствуйте, товарищи.

Оцените пожалуйста верстку одностраничного сайта. http://malahov-web.ru/demo/eco_stochnie_vodi/

Основные вопросы:

1. Общее по коду html - семантика, структура

2. В раздел "Прайс-лист"  изображение человека сейчас сделано отдельной картинкой .png -  это плохой вариант она весит очень много. Но соединить его с общим серым фоном в один jpeg в данном случае затруднительно потому фон раздела -  повторяющийся узор. Как Вы решаете такую задачу?

3. Классы обычно делаю по логике Блок-элемент ( и иногда модификатор). Хотя в верстке небольших сайтов чаще применяют "чистый код"  на наследовании.

Если заглянете в  css-код могу сказать только что запись в несколько строк видится удобнее чем каждое правило с новой.

 

надпись - Выезд специалиста для отбора проб - на следующий день в удобное для вас время -  делайте без <br/>(вообще,плохая практика перевода строки),задайте этому блоку просто ширину 460px.
немного не поняла зачем блоку с заголовками .section__title(например, Кому необходимы анализы сточных вод?) и блоку .whoneed  {float:left}?

тоже самое по блоку .we_do__list и .we_do__result - зачем float:left? Там надо списку и блоку прописать display: inline-block;

у вас достаточно часто встречается float:left у блоков,только не понятно зачем они везде..

у блока .section-price_bottom да и в других лучше не прописывать конкретную высоту,а делать паддинги сверху и снизу

.you_get_item-quickness .you_get_item__image поменяйте {    background-position: -159px -280px;} - если -160px виден край следующей иконки спрайта. А в самом спрайте .you_get_item__image{background-repeat: no-repeat} прописывайте везде no-repeat.

по иконкам - лучше использовать .png или .svg(лучше всего,не теряется качество), .jpeg - для фоток.

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

чуть что кидайте ссылку на проект - оценю,подкажу)

В 22.06.2016 в 20:10, cyklop77 сказал:

помогите пожалуйста скопировать лого. желательно чтобы в результате оно было на прозрачном фоне: 

http://joxi.net/Y2L8Z8nSnNPJ52  

https://news.rambler.ru/world/33965170/ 

 

тут мне даже не понятно где параметры svg-изображения хранятся >__<

https://drive.google.com/file/d/0BzB0UnAFkbULUVVpd1ZVNy11TmM/view?usp=sharing

https://drive.google.com/file/d/0BzB0UnAFkbULdl8tbXN6cUxQQTg/view?usp=sharing

если смотреть конкретно только эти страницы - то те же скачки происходят при наведении на ссылки и на лого(у картинке надо бэкграунд сделать прозрачным,а то сейчас она на белом фоне).
страница http://dev4.softreactor.com/admin/dashboard/index В таблице Hostel Listings и Tour Listings - наведение на строку срабатывает только на чётных строках..так должно быть?и эти таблицы не ровные,ячейки разные(почему-то у заголовка Hostel Listings нижний паддинг равен 0).И выпадающие списки вверху в меню серого цвета фона..плохо смотрится.
по странице http://dev4.softreactor.com/admin/hostel/hostelstep1

разные отступы слева в инпутах с текстом и инпутах селект

по цветовой гамме смотрите сами,но зелёный цвет форм и шагов(#7b9f35) смотрится не очень..я бы поменяла на синий(#337ab7) - на сайте не должно быть очень много разных цветов.

и по шрифту посмотрите: если используете Helvetica, то подгружайте его для пользователей,иначе у меня,например, в системе не установлен этот шрифт и шрифт меняется на ваш указанный вторым - Arial.

когда захожу в Featured Hostels и Active Hostels выдаёт много ошибок - A PHP Error was encountered.
Новый хостел создаётся нормально)

новый тур тоже создаётся,но с ошибками php

может,подойдёт такой вариант http://codepen.io/JuliJulia/pen/mEWWQa

да,зарегестрировалась и нормально зашла в систему )

слайдер сверху сейчас,по моему мнению,мешает либо там должны показываться картинки по тематике,по товарам вашего магазина.Хедер с навигацией лучше поместить сверху,а не снизу слайдера.Иконки соц. сетей раскрасила бы в их цвета.Междустрочный интервал во всём тексте уменьшила бы,для удобства чтения.Возможно,убрала бы курсивное начертание.А так..вроде бы магазин понятен.Цветовая гамма норм,не напрягает.

Я бы вместо повторяющихся надписей на кнопках Ингредиенты,процесс,бокалы - делала бы надписи Далее и Назад либо что-то в этом духе. А сверху в навигации как раз видно, где находишься и какой следующий и предыдущие шаги.

смотрю страницу Login в мозиле
там,где меню - навигация при нажатии Calendar, hostels  - нет бэкграунда у появляющегося блока - смотрится странновато

чекбокс+Remember me должен быть выровнен по вертикали и выравнивала бы по правому краю,чтобы инпут и remember me оканчивались на одном уровне
строка Forgot Password? Not Member? Sign Up   - переходит на другую строку,думаю,так не должно быть

наведение на нижнюю навигацию - About us, contact us - не должны надписи скакать

много нюансов по странице,на самом деле..и при уменьшении ширины браузера - тоже править надо некоторые моменты