WhatIsHTML
-
Posts
81 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by WhatIsHTML
-
-
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Recipes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="css/style.css" rel="stylesheet"></head><body> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div></body></html>
.image { display: inline-block; height: 100px; width: 24%; border: 1px solid black;}@media screen and (max-width: 640px){ .image { width: 49%; }}https://yadi.sk/d/l4naCM-4q4suC- файлы
Простой пример. Блоки размещаются в одну линию, а при ширине экрана 640 и меньше их ширина становится 49%, т.е. в один ряд размещается два блока.
Проблема : в firefox (и только в нем) блоки принимают ширину 49% уже при экране 768px. Почему?
-
А в мире есть бесплатные хостинги с поддержкой gzip сжатия?)
-
Спасибо за подсказки и советы. Хотел бы уточнить для себя несколько моментов:
1. Хочу понять почему лучше указывать размер в CSS? Просто я еще многого не знаю и поставил ширину и высоту на все картинки в самих тегах, поскольку в книге, которую я прочитал по html и css говорилось, что надо делать именно так, поскольку браузеры быстрее отрисовывают.
2. Да, знаю, что можно сделать так как вы говорите. Просто в макете все эти границы чуть чуть различались между собой. Я не знал как это реализовать с помощью CSS. Поэтому хотел спросить: в реальной жизни заказчики просят, чтобы все было идеально как на макете или же можно делать с помощью CSS, без картинки, но чуть-чуть с отличием от макета?
3. Из за незнания как делать градиент. Да я нашел в интернете, что можно сделать градиент с помощью CSS. Но как я не пытался я не мог повторить как это сделано в макете. Поэтому и сделал картинками. Как делать градиент, который в точности как в макете? Может есть какие-то инструменты? Или подбирается на глаз?
1. По поводу скорости не знал, но я все равно писал бы в css просто потому, что если картинки однотипные придется менять, то в css надо один раз поменять размер, вместо 10 раз в html. Но лучше смогут аргументировать более опытные.
2. Я разницы не заметил. Если разница сильно заметная (одна граница красная, вторая - зеленая, третья - синяя и т.д.), то есть псевдоэлемент :nth-child(). В нем можно задать порядочный номер эелемента. По поводу заказчиков. Я думаю, что все обсуждается и небольшие различия допустимы.
3. Я сам не знаю как делать 100% точно как на макете,сам подбирал на глаз. Хотя, если есть .psd-файл, то можно поискать в настройках градиента, границы наложения цветов - будет легче "угадать" градиент. Думаю, что небольшие различия заказчик не осудит.
-
Для IE8:
1. Если будете использовать новые теги html5, почитайте про html5shim. Ссылка на скрипт, который будет создавать теги для IE
http://html5shim.googlecode.com/svn/trunk/html5.js
2. Если будете использовать JQuery, то обратите внимание, что последняя версия, которая работает адекватно - 1.11.3.
3. Если на странице будет слайдер и вы решите делать его с bootstrap3, то спешу разочаровать. Я недавно наступил на грабли. Слайдер с эффектом "fade" не получилось реализовать, хотя с обычным эффектом "slide" вроде получалось. Все из-за того, что IE8 не поддерживает свойство css3 transition, которое bootstrap3 использует в слайдере.
4. Свойство transform у меня не удалось реализовать. Если нужно вращать картинки, то можно просто сделать в спрайте еще одну лишнюю перевернутую.
P.S. Только сейчас заметил дату сообщения. Хотя, может кому-то будет полезно
-
Спасибо
-
Я пользуюсь https://free.1gb.ua/и не жалуюсь.
-
Привет.
1. Логотип. Ширина картинки указана в самом теге. Я думаю, лучше это делать в css. Как-то так
.logo img{width:35px;}2. Границы между пунктами меню сделаны картинками. Можно сделать так
https://jsfiddle.net/2aw8h9xd/1/
3. Еще заметил, что фон меню сделан картинкой. Зачем? Я так понимаю из-за нежелания (незнания) делать градиент. Если делаем картинкой, то получается еще один лишний запрос. А если заказчик захочет поменять цвет на зеленый, то делать новую картинку?
-
Привет всем! Это моя первая серьезная работа. Недавно делал несколько страниц для тренировки.
Макет фиксированный, из фреймворков брал bootstrap3. Необходима поддержка IE8+
Ссылки:
1. Главная http://jakeweb.cc.ua/building/
2. http://jakeweb.cc.ua/building/project.html
3. http://jakeweb.cc.ua/building/elements.html
4. http://jakeweb.cc.ua/building/catalog.html
Исходники: https://github.com/jakeweb/building.git
Изначально собирался сделать только одну страницу, но потом еще решил доделать остальные, поэтому структура css могла быть лучшей, если бы я планировал все изначально.
Буду рад критике и советам.
-
В меню на кнопке "Вход" не кликабельна иконка и мне кажется это не очень логичным. :before лучше применять к ссылке, а не к li.
И еще можно было бы доделать фотогалерею, чтобы картинки листались.
-
1
-
-
Эммм...Текст "Some text" все равно остался черным(как по умолчанию).
-
Необходимо, чтобы в зависимости от состояния поля input, применялась различная стилизация. Проблема в том, что к тексту над полем, стилизация не применяется. Почему?
-
Не сразу заметил изменения в html. Спасибо еще раз
-
Можно так
Ого, спасибо за оперативность (тем более в такой час)
Впервые вижу такой элемент "~". Это обращение к родительскому элементу? -
Обязательное условие - подсветка текста при фокусе на input.
Простой пример.
Как сделать так, чтобы при фокусе на input, стиль оставался примененным и к label, а не пропадал сразу же после клика? Нашел решение с помощью JQuery, но возможно есть способ попроще без скриптов? Структуру html можно изменять, лишь бы выполнялось условие.
-
все верно написал satantx
и еще присвойте двум радио кнопкам одинаковый name="",чтобы можно было выбрать только одну радио кнопку.
Да, я это тоже не заметил сразу. Спасибо
-
Задача: сделать кастомизированый checkbox и radiobox. Для наглядности я убрал все стили, которые отвечают за оформление. Проблема : по клику на label состояние чекбокса(радиобокса) не изменяется. Почему?
-
А не проще добавить нужному тега аттрибут от фансибокса? в документации это расписано.
href: "img.attr('src')"это жестоко однако..
Если бы Вы указали этот атрибут, то , возможно, это помогло бы решить проблему. В документации искал и не нашел
-
Задача : при клике на активное изображение в слайдере открывается Fancybox, который содержит это изображение.
Структура html примерно следующая. "flex-active-slider" применяется динамически и обозначает активное на данный момент изображение.
<ul> <li class="flex-active-slider"> <img src="img1.png"> </li> <li class=""> <img src="img2.png"> </li> <li class=""> <img src="img3.png"> </li></ul>
JS:
$(window).load(function() {$(".flex-active-slide").click(function() { var img = $(this).find('img'); $.fancybox.open([ { href: "img.attr('src')" } ]);});}В итоге, fancyvox вообще не открывается, т.е. никак не реагирует на клик.
-
Не могу разобраться, почему.
Из за inline-block у внутренних элементов.
Впервые слышу, что inline-block чем-то специфичен по сравнению с block в плане высоты или отступов элемента. Поменял во всех внутренних элементах inline-block на block и ничего не изменилось. inline-block нужнен был при старой структуре html,когда обе картинки находились в одном элементе, а сейчас это уже несущественно, я просто не поменял стили (да и толку?).
Скриншот проблемы
-
Прошу прощения за плохо сформулированный вопрос.Имею ввиду отступ под слайдером, а точнее под картинкой (как левой так и правой, к ним применены аналогичные классы). Скриншот не сделаю потому что пишу с телефона. Вокруг картинки есть тень. Снизу она отступает на большее расстояние чем с других сторон. Почему?
-
Как видно, внизу граница (тень) отступает от элемента, хотя padding задан одинаковый со всех сторон. Не могу разобраться, почему.
-
Решил проблему добавлением селектора
body.modal-open{ padding-right: 0 !important; overflow: auto;}При появлении модального окна, тегу body добавляется padding справа в 17px (ширина прокрутки).
-
При вызове модального окна, прокрутка на странице блокируется и элементы немного смещаются в сторону (наверное из-за того, что прокрутка исчезает). Мне надо, чтобы скроллинг на основной странице работал, но в стилях не могу разобраться уже час как. Может у кого-то была такая проблема? Пример простой страницы с модальным окном.
На песочнице не получается подключить файлы бутстрапа, поэтому выложу архив с страницей приведенной на скриншоте.
-
Проблему с появлением фикс меню в FF IE решил. Вместо $('body').scrollTop() надо писать $(window).scrollTop(). Проблема в самой функции scrollTop(). Может кому пригодится, нашел тут
Firefox медиа запрос
in HTML Coding
Posted
Там неудобно отслеживать размер видимой области. Но все же
https://jsfiddle.net/r5vs9dug/
Интересно то, что теперь пример работает нормально. Я же у себя на компе обнаружил проблему в том, что при связке директории "files" и файла "index.html" FF вел себя на ширине 768 так как должен был на ширине 640. Если переименовать один из файлов (либо директорию либо сам html-файл), то проблема исчезает. А почему так, я не знаю.
Вот такие чудеса