Ответы пользователя по тегу HTML
  • Как сделать так, чтобы div с хедера следовал за div контентной части с margin auto?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    По идее, header и body равны по ширине. Значит, nav и div тоже должны быть равны по ширине. Но это не так, потому, что браузер суёт header внутрь тега body.
    <style>
    header,nav,body,div {border:solid black 1px;margin:1em;}
    nav,div{margin: 0 auto;width:70%;}
    </style>
    
    <header>
    	<nav>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, illum iste dolorem numquam repellat sed officiis quas? Ipsum, aut, sit, consectetur optio fugiat placeat distinctio soluta asperiores nihil minus molestias non nisi dolores sint maiores! Recusandae, porro eius dolor omnis unde enim rem debitis obcaecati nostrum iste. Beatae, aperiam, tempora impedit ducimus obcaecati ipsum quos ex possimus delectus velit iusto voluptatum tenetur amet assumenda quibusdam corporis rerum et unde autem facilis explicabo repudiandae vel error officia doloremque excepturi nemo perspiciatis repellat ipsam sint doloribus illo aliquam sapiente eos fugit dolorum cum natus omnis labore reiciendis laboriosam adipisci!
    	</nav>
    </header>
    
    <body>
    	<div>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, voluptatibus, reprehenderit dolores earum voluptatem quidem perferendis molestiae magnam natus voluptate cum soluta magni nostrum facilis doloribus optio quis placeat labore enim hic. Quidem, aspernatur, distinctio atque excepturi nesciunt ipsam autem saepe voluptates ab modi porro labore explicabo soluta delectus commodi reiciendis et. Consequuntur, in, mollitia, hic doloremque id beatae ex nobis neque repellendus aperiam blanditiis laborum vitae voluptas sint dolor ut voluptates! Rerum, alias culpa minima quae labore? Ad, nulla, amet, qui laboriosam voluptatibus impedit laborum illum temporibus iste deserunt ex ullam odit voluptatum exercitationem accusantium quis natus nemo aut explicabo est dolorem corrupti eos enim porro quaerat neque expedita necessitatibus ipsam nostrum dicta eum nesciunt incidunt harum placeat asperiores officiis architecto quas. Officiis, iusto, reprehenderit, optio, pariatur mollitia saepe aliquam porro ipsam quisquam esse eius magnam illo veritatis natus nemo! Aut, adipisci, quis, facilis non dicta magnam accusamus unde possimus numquam ipsum officiis illo molestias temporibus similique quibusdam beatae et totam dignissimos omnis sequi. Quaerat, distinctio, officiis, minima enim in eius sunt eligendi voluptas eum eveniet recusandae atque aut quis neque vero? Necessitatibus quo recusandae accusamus odio quis maxime expedita asperiores id! Alias omnis perspiciatis ad sit vero magni!
    	</div>
    </body>

    Примените этот код. Вы увидите, что nav оказался уже, чем div. Header лежит внутри body и поэтому уже его.
    Теперь измените код: сделайте margin:0px и уберите border. Теперь nav и div сравняются.
    В будущем, смотрите средства разработчика в браузере. Там будет показано, как браузер изменяет и дописывает ваш код. Браузеры - они такие :-)
    61ee3c65b6489679417376.png
    Ответ написан
  • Как сделать внутреннюю ссылку в HTML правильно?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Прошу прощения, не смог разобрать код (глаза кровоточат)
    Чтобы сделать внутреннюю ссылку, вам надо создать метку там, куда вы хотите переместиться. Например:
    <a name="hochu_suda">хочу сюда!!!</a>
    Это особая ссылка-"метка".

    А на том месте, откуда вы хотите переместиться - создайте обычную ссылку:
    <a href="#hochu_suda">ткни меня</a>
    Не забудьте поставить знак #.

    Пример:
    <a href="#ponedelnik">понедельник</a>
    <a href="#vtornik">вторник</a>
    <a href="#sreda">среда</a>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, ex, dicta. Perspiciatis, unde, explicabo, voluptatem suscipit magnam ipsum omnis cupiditate voluptate velit et accusantium quos iure perferendis atque architecto. Inventore, blanditiis, alias, cupiditate tempora odit esse aliquam quisquam ratione cum officiis nulla magni in saepe eaque excepturi veritatis quae repellendus qui distinctio culpa nobis aliquid accusantium maxime quibusdam dignissimos. Aspernatur, maxime, enim, et impedit sit illo nobis laboriosam placeat obcaecati numquam deleniti amet reprehenderit natus suscipit reiciendis at recusandae expedita culpa sed rem nulla consequatur consectetur tempora! Omnis aperiam vero modi. Ullam, natus laborum omnis eaque vitae numquam dignissimos voluptates ipsam ex dicta ipsum exercitationem commodi aut nemo nostrum at quis? Amet, veniam, nam maiores excepturi repellendus minus facilis repudiandae laboriosam molestiae labore natus facere debitis corporis fuga reiciendis libero nobis magni quia necessitatibus quaerat iure odit a explicabo neque rem officia autem dolores modi mollitia ullam id consequatur earum quidem repellat ab nemo sint ut! Nostrum, quia suscipit fuga itaque ipsam a assumenda officia tempora atque dolorum. Non porro rerum nemo laboriosam quia animi delectus. Perferendis, commodi, debitis, nesciunt qui dolores aliquam nulla cupiditate a ducimus architecto error culpa. Eos, quis, distinctio, ipsam nemo nobis dicta libero voluptates vel odit blanditiis id vitae animi harum illo facere optio nihil aliquid! Inventore, sed ex explicabo sapiente officia placeat tenetur minima. Alias, amet, reiciendis, doloribus architecto quia saepe aliquam sed porro quidem nisi cupiditate omnis cum quaerat. Ut, rem, natus, harum obcaecati amet similique totam odio explicabo dolorem minus blanditiis doloribus eligendi illo iusto reiciendis voluptatum delectus nam aliquid magnam possimus? Eaque, similique, quasi, earum, dolore numquam omnis error ipsa quod quidem aliquid odio accusamus labore magni quo ratione recusandae sed eveniet in autem iure animi. Libero, quam, accusantium voluptatem est obcaecati aperiam delectus maxime saepe vel soluta. Perspiciatis, quasi, sed, animi, nemo consequuntur odit magni provident numquam deleniti molestiae quas ipsam asperiores porro maiores facere voluptas veniam cupiditate sit alias assumenda quaerat dolore corporis eum modi placeat esse dignissimos laboriosam laborum repudiandae dolorum consectetur unde iste voluptate nisi adipisci optio vitae. Consectetur, corporis, soluta, in, architecto non doloribus sapiente cumque id ab amet dignissimos ipsa adipisci eaque velit odit commodi molestias perferendis maxime ratione earum voluptate illum possimus quae odio expedita alias sunt excepturi nemo error fugiat praesentium esse neque debitis magni officiis blanditiis placeat facilis cupiditate voluptas voluptatem eius repudiandae veniam totam dolor aut ea? Minus, accusantium ipsum sunt?</p>
    <a name="ponedelnik">понедельник!!!</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, officia, eveniet, maiores aut blanditiis ipsa rerum quo quos vel error odit non mollitia quibusdam quia perferendis inventore unde. Reprehenderit, maiores eum iure odit explicabo vitae aliquam non iste ullam sapiente expedita dolores porro tempora dolorum magnam tempore officiis odio illo facere maxime consequuntur obcaecati assumenda unde voluptates neque consequatur voluptas nemo nostrum quae repellat praesentium ipsa inventore est nulla veritatis nam similique officia. Hic, libero, impedit, enim reprehenderit dolorem consectetur laudantium obcaecati sapiente optio quasi beatae distinctio! Aut, quis, sit, repellendus, nostrum magnam dignissimos earum magni error voluptas fugiat mollitia eos ratione! Assumenda, culpa, est, magnam et velit nam ratione iste repellat delectus pariatur nobis blanditiis at harum officia maxime quisquam commodi dolor praesentium aut impedit. Illum, dignissimos natus soluta nesciunt reiciendis minima rerum quod voluptate exercitationem eligendi sunt quis numquam suscipit id voluptatum ipsum impedit quasi labore dolore harum nostrum sequi beatae est eaque totam esse consequuntur iste in tempora eos perferendis temporibus rem commodi! Ratione, quam, officiis, quaerat ipsam fugiat quae deserunt et modi veniam vero at nesciunt magnam iste obcaecati corporis esse quod iusto laboriosam accusantium cumque soluta nemo officia numquam nobis natus. In, ratione, id maxime nihil corrupti architecto ullam officiis nostrum nisi enim! Obcaecati, reprehenderit, iusto, accusamus autem explicabo deleniti sapiente ratione corrupti blanditiis quam laboriosam dicta unde nemo perspiciatis facilis quis nobis totam animi ea veritatis molestias asperiores voluptates itaque aspernatur quaerat corporis sint delectus iste et a veniam inventore adipisci doloremque. Modi, minus, omnis, eveniet, quasi praesentium sit illum nemo temporibus pariatur error quos quia saepe nostrum! Laboriosam, repellat, debitis, maiores nisi quidem quos unde optio nemo modi suscipit amet possimus facilis qui consectetur quis voluptatem voluptas. Suscipit, tenetur, corporis dolores facere dolorum soluta sequi quam laboriosam tempore nostrum magnam iure eius hic distinctio praesentium sapiente tempora incidunt? Necessitatibus adipisci iusto quos nihil expedita laboriosam esse mollitia iste debitis corrupti. Quos, quas, laudantium iusto nam enim fugit maiores culpa dolorum numquam veniam eveniet atque minus sit sunt distinctio provident praesentium. Sit, maxime, commodi aliquid quos tempora beatae ipsa in asperiores est sequi nostrum nam iusto illo voluptatibus molestias ullam mollitia fuga possimus maiores totam. Magnam, obcaecati, beatae. Ratione ad maiores voluptate dolor hic blanditiis quod! Ipsum, error doloribus distinctio fuga commodi porro odit corrupti eligendi non dolore accusantium quod corporis iste autem recusandae et praesentium illum nostrum perspiciatis tempora? Voluptatem, velit aliquid dolor!</p>
    <a name="vtornik">вторник!!!</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, qui, in, aliquid aspernatur eveniet ipsa ex sapiente tempore nisi labore accusamus minus explicabo aperiam. Voluptatum alias inventore laudantium et adipisci nesciunt quia tempora optio. Commodi, dolor, officiis iusto possimus cupiditate aliquid natus dolorum nostrum sunt quos dignissimos doloribus. Amet, aliquid, quas fuga quia minus minima quisquam perspiciatis voluptatibus at mollitia animi quod eos incidunt officia provident autem reprehenderit fugiat inventore! In, iste, perspiciatis explicabo ullam tempora obcaecati laborum delectus optio saepe sint totam quaerat amet vel hic ipsa illo numquam. Veniam, necessitatibus esse dicta placeat optio voluptatem eius a natus quasi minus voluptatum illo ea qui fugit vitae quia sit explicabo magni nihil dignissimos voluptate ad dolorum quae rem temporibus soluta illum alias. Non, sapiente, minima odio deserunt obcaecati a velit asperiores rerum eos porro fugiat quia ut dolorem modi eius perferendis reprehenderit dicta quis consequatur voluptas! Eveniet, quod, voluptatem facere nisi ex unde deleniti iste obcaecati sed dignissimos aliquam deserunt quo nostrum consequuntur veniam commodi omnis quaerat modi ad laboriosam officia animi vitae magni nulla praesentium ratione repudiandae exercitationem libero natus perspiciatis. Recusandae, exercitationem quo temporibus nesciunt voluptatibus repellendus officiis voluptatem magni minima fugiat qui saepe tenetur quod dolorum debitis illo ea maxime ab quis hic labore corporis tempora amet odit molestiae. Iusto, ea, natus, molestias, dignissimos nam error magni suscipit corporis ab tempore voluptatum facere ipsa eius vel delectus ad iste voluptatem id cumque neque doloremque tempora quidem beatae laborum quo aut rem a. Accusantium, consequatur, aperiam illo officiis ullam rerum esse nulla aliquam! Quaerat, minus, quidem, odio voluptatem accusamus illum quam in natus voluptatibus adipisci deleniti cumque optio excepturi est consectetur inventore repellat temporibus similique pariatur dolorum nihil aliquid quo? Dolorem, reiciendis, optio, maxime, quia aut repellendus facere necessitatibus fuga aspernatur accusantium natus et culpa soluta. Ab, atque, qui, ut, quas porro distinctio reiciendis voluptates eius doloremque animi quos quasi at ipsum sapiente ea voluptatem hic natus explicabo debitis tempore illo voluptatum autem minus cumque vel enim quam modi reprehenderit molestiae accusamus dolores maiores error aspernatur laborum magni corporis rem consequuntur excepturi commodi praesentium necessitatibus voluptate dicta inventore magnam dolorem neque! Sit porro laudantium esse est inventore incidunt eaque eum quasi soluta. Consequuntur, natus, facere, suscipit tempora quo et nulla voluptatum nobis perferendis alias quod laborum assumenda optio esse facilis corporis commodi consequatur quia voluptatibus nesciunt provident ipsam veniam voluptates sapiente error distinctio necessitatibus praesentium rem quisquam.</p>
    <a name="sreda">среда!!!</a>


    P.S: Откуда вы взяли такой ужасный устаревший код? Это с какого-то древнего сайта, созданного при помощи Microsoft Word?
    Ответ написан
    6 комментариев
  • Как задать ширину контейнеров относительно ширины экрана в процентах?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Если вы напишите для блока width:62%;, то он займёт 62%.
    Однако, это 62% относительно его родителя. Посмотрите, насколько широк его родитель.
    Например, у нас есть код:
    <body><div></div></body>
    Если наш body занимает в ширину весь экран, то div будет занимать 62% ширины экрана.
    А вот если body занимает 50%экрана, то div будет занимать 31% ширины экрана.
    Ответ написан
    Комментировать
  • Почему одинаковый css и html работают по разному на разных страницах?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Значит, на этой странице есть что-то ещё. Или же эта страница отображается при помощи другой страницы.
    Стоп. Проверьте масштаб в браузере.
    Ответ написан
    Комментировать
  • Как убрать отступ межу блоком?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Если ваши рисунки представляют собой единый блок, то, скорее всего, справа просто осталось свободное место.
    Без исходного кода трудно что-то сказать, но, может, просто блок слишком маленький?
    Ответ написан
  • Что делать если сайт меньше 1920 пикселей?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Добрый день. Скажу вам, как бывший фронтендщик и эникейщик.
    Вы слишком рано принялись за макеты и верстку. Проштудируйте сперва полный курс HTML и CSS.
    Сейчас "гонят план", лепят скороспелых верстальщиков. Им так выгодно.

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

    Shull
    @Shull
    хочу быть хорошим IT-шником
    В любом слайдере есть набор картинок. Эти картинки как-то пронумерованы. Попробуйте функцию генератора случайных чисел. Подробнее - например, вот тут. Или вот тут.

    <div id="result">Ткни меня и получи случайное число</div>

    var my_div = document.getElementById('result');
    my_div.onclick = function(){
        alert(Math.random());
        };

    Конечно, это очень простенький код, тут есть несправедливость по отношению к крайним значениям, всё это нужно приводить к целым числам, исключить частые повторы... Но начало, как говориться, положено :-)
    Ответ написан
    Комментировать
  • Как сделать такой разделитель?

    Shull
    @Shull
    хочу быть хорошим IT-шником

    дополнительно можно поиграть с ним в стилях.
    Ответ написан
    Комментировать
  • Как реализовать слайдер в Z-плоскости?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Хм, по сути, это набор картинок с чуть-чуть разным позиционированием (чтобы из-под одной был виден краешек следующей) и разными показателями z-index (чтобы они были стопочкой).
    Ответ написан
    Комментировать
  • Какая есть понятная книга по html и css для новичка?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    HTML5 и CSS3 для чайников.
    Разумеется, там не всё. Если вы будете заниматься сайтами, вам предстоит купить ещё не одну и не две книги.
    Ответ написан
    Комментировать
  • Книга Веб-разработчику?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Здравствуйте! Отвечу, исходя из самого вопроса.
    добротные такие сайты со всякими плюшками. Под плюшками я подозреваю что-то вроде этого: анимация, база данных динамичность адаптивность.

    Итак:
    • Сайты - HTML, CSS.
    • Анимация - Canvas и JS
    • База данных - PHP и MySQL (возможны и другие варианты)
    • Динамичность - JS
    • Адаптивность - вытекает из умения пользоваться вышеперечисленным.

    Это несколько ТОЛСТЫХ книг, каждую страницу которой вы поняли и запомнили.
    На каждую главу каждой книги создавайте небольшой учебный сайт, на котором вы отточите приобретённые знания.
    Удачи!
    Ответ написан
    3 комментария
  • Как оптимальнее вставлять картинки на сайт?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Как вариант: В адаптивном дизайне есть метод, использующий несколько картинок разного размера.
    В JS создаётся скрипт, который грузит "тяжелый рисунок" только если разрешение монитора велико.
    Если разрешение "не дотягивает", то используется картинка поменьше.

    Что почитать: почитайте книгу " Добавь воздуха! Основы визуального дизайна для графики, веба и мультимедиа". Выше вам правильно написали: нужно дизайнить минималистично.
    Ответ написан
    Комментировать
  • Что лучше — общий всё-в-одном style.css или несколько файлов .css?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Это зависит от вашего уровня знаний и умений.
    Сначала вы будете делать CSS-стили внутри HTML-файла.
    Потом вы будете делать отдельный файл .CSS.
    Потом вы подключите CSS-помогайки, например, reset.css и у вас будет несколько CSS. Я сейчас именно на этом этапе.
    Потом вы начнёте использовать сборщики.
    Потом вы будете всё это разумно комбинировать.
    Удачи.
    Ответ написан
    1 комментарий
  • Как сделать реализовать fancybox?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    Буквально на днях начал переводить readme последней версии Fancybox. Итак:
    Если у вас есть набор связанных элементов, который вы хотите сгруппировать, всуньте в `rel` "групповое имя":
    <a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
    <a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>
    Ответ написан
  • Как выровнять блоки?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    У вас ошибка в написании адреса картинки в блоке с id="block21". И с DIV-ами что-то не так, 1-й, вроде, лишний. Кроме того, не в обиду, код очень перегружен. Также ужасная ситуация с id и class. Далее, вы указываете размеры картинок в HTML-коде. Пожалуйста, делайте это через CSS.
    Теперь к самому процессу. Судя по вашему CSS-коду, вы выравниваете блоки, используя margin и padding. С текущим кодом, у вас даже первой картинки не получается, все блоки выровнены по центру и идут сверху вниз, друг под другом. Вы даже не написали, как именно вы их хотите выровнять. Всегда по 2 блока в ряд? Или это меняется с размером окна?
    Я упростил ваш код, выкинув оттуда не имеющие отношения к предмету обсуждения вещи.
    Может, такое поведение блоков вам нравится больше? тыц!
    Ответ написан
    Комментировать
  • Как сделать мобильную версию сайта?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    А какое у вас разрешение на мобильнике? Бывает так, что в мобильниках с высоким разрешением, браузер принимает экран мобилы за настольный монитор.
    Если проблема именно в этом, то посмотрите решение вот тут: "Готовим адаптивный сайт к Retina дисплеям"
    Ответ написан
    Комментировать
  • Как расположить блоки на всю ширину контейнера?

    Shull
    @Shull
    хочу быть хорошим IT-шником
    самый "фронтальный" способ решения вопроса
    Конечно, тут есть подводные камни. Например, если выравнивать нечётное количество блоков, то не получится использовать всё пространство до конца. Три блока по 33% дадут 99%, а не 100%.
    Если есть немного времени, лучше переделать разметку сайта под flexbox, как вам посоветовали выше.
    Удачи.
    Ответ написан
    Комментировать