Ответы пользователя по тегу HTML
  • Как сделать фиксированную шапку (меню)?

    m77x
    @m77x
    Консультант
    position: fixed;
    top: 0px;
    right: 0px;
    Ответ написан
    Комментировать
  • Есть ли какие нибудь админки на html для голого сайта?

    m77x
    @m77x
    Консультант
    Ответ написан
    Комментировать
  • Глупый вопрос про тег img и его атрибут alt, можно ли стилизовать alt?

    m77x
    @m77x
    Консультант
    можно подойти к вопросу с другой стороны, - стилизовать как то: поставить фоновую картинку, которая точно будет грузиться в стилях.
    Ответ написан
    Комментировать
  • Есть ли бесплатные площадки крутых макетов?

    m77x
    @m77x
    Консультант
    www.metamorphozis.com можно кое-что выбрать из бесплатного
    Ответ написан
    Комментировать
  • YouTube через iframe не работает автозапуск на телефоне?

    m77x
    @m77x
    Консультант
    попробуй вместо iframe использовать object
    Ответ написан
  • Как сделать блок, который можно закрыть(не pop-up)?

    m77x
    @m77x
    Консультант
    если сложно верстать самостоятельно используй accordion
    Ответ написан
  • Как починить кодировку в файлах?

    m77x
    @m77x
    Консультант
    Не бывает безнадежных ситуаций, бывает не тот взгляд на решение проблемы.
    Самый верный способ - посмотреть в какой кодировке вам предлагаетс работать на сайте (метатеги в head).
    Затем написать строчку в файле .htaccess
    AddDefaultCharset UTF-8
    в самом верху. Проблемы снимаются как рукой, если не безнадежный случай.
    Если все так плохо - придется чинить все страницы сайта ручками
    Ответ написан
    Комментировать
  • Комплексное решение?

    m77x
    @m77x
    Консультант
    А что вы подразумеваете под "готовым решением"? Если оптимальные коды, то да… зачем изобретать велосипед".
    Если оформление то никогда - каждый проект индивидуален.
    Ответ написан
  • Как лучше реализовать адаптивность такого блока?

    m77x
    @m77x
    Консультант
    не знаю использовали ли вы Bootstrap ?
    им гораздо проще стилизовать адптивную верстку
    www.joomla-study.ru/lessons/adaptivnaya-setka-boot...
    Ответ написан
    Комментировать
  • Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

    m77x
    @m77x
    Консультант
    Преодолеть барьер очень просто:
    1) загрузить и установить PSPad
    2) открыть и написать первые два тега <html></html>
    сразу возьмите за правило - парные теги писать сразу
    3) в середине этих тегов напишите еще пару тегов:
    <head></head>
      <body></body>

    1 В начале сотворил Бог небо и землю.
    2 Земля же была безвидна и пуста, и тьма над бездною, и Дух Божий носился над водою.
    3 И сказал Бог: да будет свет. И стал свет.
    4 И увидел Бог свет, что он хорош, и отделил Бог свет от тьмы.
    5 И назвал Бог свет днем, а тьму ночью. И был вечер, и было утро: день один.

    в блоке тегов head
    напишите еще пару тегов style
    и у вас получится:
    <html>
      <head>
        <style>
        </style>
      </head>
      <body></body>
    </html>

    И задайте как Бог ваш свет, т.е. в CSS поиграйтесь с цветами и "фокусами"
    <html>
      <head>
        <style>
    * {
    	word-wrap: break-word;
    	margin: 0px;
    	padding: 0px;
    }
    
    html, body{
    	width: 100%;
    	height: 100%;
    	margin:0;
    	padding:0;
    }
    
    body {
    	position: fixed;
    	background: linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -moz-linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -o-linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -ms-linear-gradient(top, #418ac7 0%, #fafeff 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#418ac7), color-stop(100%,#fafeff));
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#418ac7), to(#fafeff));
    	background: -webkit-linear-gradient(top, #418ac7 0%, #fafeff 100%); 
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418ac7', endColorstr='#fafeff');
    }
    
        </style>
      </head>
      <body></body>
    </html>

    Теперь пора создавать "землю" ))
    в style измените css body добавьте картинку вашей Земли:
    body {
    	background: #635328 url('http://img.urodaizdrowie.pl/wp-content/uploads/2013/03/globe.jpg') fixed top center no-repeat;
    	-o-background-size: 100% 100%;
    	-webkit-background-size: 100% 100%;
    	-khtml-background-size: 100% 100%;
    	-moz-background-size: 100% 100%;
    	background-size: 100% 100%;
    }

    теперь озвучьте ваш проект, что-то написав на своей странице, но сразу возьмите за правило, любой текст, должен быть читаемым. Поэтому надо задать цвет. И не просто цвет, но и тень (иначе текст может слится с фоновой картинкой).
    в css добавьте для текста оформление:
    p {
       color: white;
       text-shadow: 0 0 2px #000;
    }

    Используйте резко контрастирующие цвета текста и обводки, например черный текст - белая обводка, белый текст - черная обводка, желтый текст - синяя обводка.
    ну и так далее…
    Верстка это творчество, лишь слегка притянуто к математике ))
    Всего вам доброго, новый Бог!
    Ответ написан
    3 комментария
  • Perfect Landing Page, как?

    m77x
    @m77x
    Консультант
    Удивить можно:
    1) скоростью загрузки
    2) знание css - многие анимации сделать в css да и оформление "графики" максимально в css
    2б) flex, SVG и пр…
    3) микроразметка сайта
    4а) минимальный вес сайта
    4б) подключение уже готовых скриптов не из файла на сервере, а с https://cdnjs.com/ https://maxcdn.bootstrapcdn.com/bootstrap/…/bootst...
    5) максимально использовать знание htaccess
    Хотел уже закончить, но вернулся:
    САМЫЙ ПЕРВЫЙ) используйте иконки!!! для каждого блока информации своя иконка и в меню тоже должны быть иконки
    Сейчас заказчик требовательный пошел, ему важно, чтобы информация была максимально визуализирована, а иконки позволяют надолго записать суть информации в сознание ))
    Вам простят единицы измерений, но не простят отсутствие иконок
    Ответ написан
    3 комментария
  • Это хорошая стратегия вёрстки?

    m77x
    @m77x
    Консультант
    Мой стиль, каркас(html)->фишки->css

    Но наблюдая за работой сестрёнки понял, что есть творческие люди: её алгоритм работы (у женщины и алгоритм, уже нонсенс [извините, дамы]).
    1) она "видит" сразу внешний вид сайта,
    2) затем рисует "картинку" может даже в фотошопе накидать шаблон,
    3) выводит элементы в css и потом пишет html

    Честно говоря мой и её стиль и подход различны по скорости и содержанию, в зависимости от проекта, - однако иногда мой подход проигрывает у заказчика и её проект выбирает клиент.
    Ответ написан
    Комментировать
  • Легкий скрипт для создания адаптивных меню?

    m77x
    @m77x
    Консультант
    <style>
      #on {display:none;}
          @media screen and (max-width: 640px) {
          #box {display:none;}
          #on {display:block;}
          }
      </style>

    <a href="#" id="on" onclick="openbox('box'); return false">menu</a>
         <div id="box">
         <ul>
    
      <li><a>123</li>
      <li><a>123</li>
      <li><a>123</li>
      
    </ul>
    </div>
    
    <script type="text/javascript">
    
    function openbox(id){
        display = document.getElementById(id).style.display;
    
        if(display=='none'){
           document.getElementById(id).style.display='block';
        }else{
           document.getElementById(id).style.display='none';
        }
    }
    </script>

    что-то типа того
    Ответ написан
  • Как добавить звездочку в плейсхолдер внутри инпута?

    m77x
    @m77x
    Консультант
    Мне кажется или input ваш грешит отсутствием name при избыточности type ?
    Можно использовать js
    $('input[name=email]').val('e-mail*');
    Ответ написан
    Комментировать
  • Как быть с версткой многостраничных сайтов?

    m77x
    @m77x
    Консультант
    Верстать интересно на конструкторе https://mobirise.com на нем же можно и мелко-"многостраничники" как ваш.
    Но конструктор-конструктором, все равно придется вставлять ручками некоторые объекты. однако основная более 99% элементов уже описаны в CSS.
    Тут уже может встать проблема с хостером (не всякий хостер шутрый), поэтому можно часть элементов "стибрить" с шары https://cdnjs.com/ - поищите, часть элементов сайта уже есть, например https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1....
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js...
    Лучше грузить их с указанных адресов.
    Ответ написан
    Комментировать
  • Какими программами пользуются профессиональные верстальщики?

    m77x
    @m77x
    Консультант
    Если не нравится Photoshop cc и вам непременно нужно что-то "такое" посмотрите CorelDRAW Graphics Suite X8
    Ответ написан
  • Как задать скрипты и стили для localhost?

    m77x
    @m77x
    Консультант
    ссылки на localhost:
    href="css/style.css" - в текущем каталоге в папке css файл style.css
    href="/css/style.css" - от корня сайта папка css файл style.css
    href="../css/style.css" - выйти из текущего каталога на уровень выше в нем найти папку css и загрузить файл style.css
    Ответ написан
  • Нужно создавать много разных модальных окон?

    m77x
    @m77x
    Консультант
    можно в модальное окно передать содержимое iframe
    <a href="#feedback" onclick="javascript: loadFrame('/create/')" title="Кнопка регистрации"><button>Создать аккаунт</button></a>

    href="#feedback" вызов модального окна
    loadFrame загрузка фрейма
    <script type="text/javascript">
    function loadFrame(url) {
    	var container = document.getElementById("my");
    	if ((container)&&(typeof(container))!==undefined) {
    		container.innerHTML = '<iframe src=' + url + ' width="800px" height="526"  frameborder="no" scrolling-x="yes">'+'</iframe>';
    	}
    }
    </script>

    скрипт загружает фрейм

    <!-- Модальное окно -->
            <a name="#x" class="wincase" id="feedback"></a>
            <div class="modal">
    		<div border="0" scrolling="no" width="100%" height="526px" id="my"></div>
            <a class="close" title="Закрыть" href="" onclick="document.location.reload()"></a>
            </div>


    под него CSS:
    .wincase {
        background-color: rgba(0, 0, 0, 0.7);
        bottom: 0;
        cursor: default;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        visibility: hidden;
        z-index: 11;
        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
    }
    .wincase:target {
        visibility: visible;
        opacity: 1;
    }
    
    .modal {
        background-color: #fff;
        border: 3px solid #fff;
        display: inline-block;
        left: 50%;
        opacity: 0;
        padding: 10px;
        position: fixed;
        text-align: justify;
        font: 14px Helvetica, Arial, Sans-Serif;
        top: 40%;
        visibility: hidden;
        z-index: 100;
     
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
     
        -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
     
        -webkit-transition: opacity .5s, top .5s;
        -moz-transition: opacity .5s, top .5s;
        -ms-transition: opacity .5s, top .5s;
        -o-transition: opacity .5s, top .5s;
        transition: opacity .5s, top .5s;
    }
    .wincase:target+.modal {
        top: 50%;
        opacity: 1;
        visibility: visible;
    }
    
    .close {
        background-color: rgba(0, 0, 0, 0.8);
        border: 2px solid #ccc;
        height: 24px;
        line-height: 24px;
        position: absolute;
        right: -13px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        top: -15px;
        width: 24px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
         border-radius: 15px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:before {
        color: rgba(255, 255, 255, 0.9);
        content: "X";
        font-size: 14px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    }
    .close:hover {
        background-color: rgba(64, 128, 128, 0.8);
    }
    .modal p, .modal div {
        margin-bottom: 10px;
    }


    вместо iframe правильнее включить
    <object type="text/html" data="ссылка" width="100%" height="700">
                            <PARAME name=scrolling value=auto>
                            <PARAME name=frameborder value=0>
    </object>

    но не в каждом случае срабатывает
    Ответ написан
    Комментировать
  • Трафик на сайт? Где купить и не попасть в черный список?

    m77x
    @m77x
    Консультант
    За трафик не попадете ни в черный список, но и к сожалению ни в белый.
    Самое оптимальное: обмен визитами.
    Минусы, чтобы "заработать на просмотры" - вам придется просмотреть туеву хучу вредоносных сайтов, поэтому (это называется "сёрфинг") сёрфите в виртуалке с обнесенным фаерволом (лучший Agnitum [был, пока Яша не купил]).
    Плюсы: вы посмотрите хоть на работы других вебмастеров, может какие идеи и подойдут.

    А так - пользуйтесь монстрами типа websurf.ru или wmmail.ru
    Ответ написан
    1 комментарий
  • Какие ресурсы оперативно сообщают о новинках в стандартах HTML / CSS / JS?

    m77x
    @m77x
    Консультант
    создать информер на базе newsfiber.com там же и информер можете создать с вашим значением поискового выражения
    Ответ написан
    Комментировать