Вопрос

    DarkKezar

    Я начинающий верстальщик. Верстав макет я столкнулся с следующей проблемой : сверху появляется отступ.

    Вот HTML :

    <!Doctype HTML>
    <html>
    <head>
    <title>Какой-то сайт</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="CSS\first.css">
    </head>
    <body>
        <div class="header">
                    <div class="head1">
                     <h1 class="FirstLogo">The first page</H1> 
                </div>
                    <div class="meny">
                         <ul>
                                 <li><a href=''>Главная</a></li>
                                     <li><a href='Page/About.html'>О нас</a></li>
                                     <li><a href=''>Контакты</a></li>
                             </ul>
                    </div>
            </div>
            <hr>
        <div class="content">
                <img class="photo" src="Image/3.png" height=500px; width=500px;>
                <h2 align="left">Видео</h2>
                <p >Видео предоставляет прекрасную возможность подтвердить свою точку зрения. Чтобы вставить код внедрения для видео, которое вы хотите добавить, нажмите "Видео в сети".Вы также можете ввести ключевое слово, чтобы найти в Интернете видео, которое лучше всего подходит для вашего документа.</p>
                    <p class="mobile_n">Коллекции на вкладке "Вставка" содержат элементы, которые определяют общий вид документа. Эти коллекции служат для вставки в документ таблиц, колонтитулов, списков, титульных страниц и других стандартных блоков. При создании рисунков, диаграмм или схем они согласовываются с видом текущего документа. Формат выделенного текста можно легко изменить, выбрав нужный вид из коллекции экспресс-стилей на вкладке "Главная". Текст можно также отформатировать с помощью других элементов управления на вкладке "Главная".</p>
                    <h2>Документ</h2>
                    <p>Чтобы придать документу профессиональный вид, воспользуйтесь доступными в Word макетами верхних и нижних колонтитулов, титульной страницы и текстовых полей, которые дополняют друг друга. Например, вы можете добавить подходящую титульную страницу, верхний колонтитул и боковое примечание. Откройте вкладку "Вставка" и выберите нужные элементы из различных коллекций.</p>
                    <h2>Темы</h2>
                    <p>Темы и стили также помогают придать документу единообразный вид. Если на вкладке "Конструктор" выбрать другую тему, то изображения, диаграммы и графические элементы SmartArt изменятся соответствующим образом. При применении стилей заголовки изменяются в соответствии с новой темой.</p>
            </div>
    </body>
    </html>

    Вот CSS :

    /* другие медиа запросы */
    @media (min-width:1200px){
    body{
            margin:0px;
            padding:0px;
            
    }
    .header{
            margin-bottom:30px;
            display:inline;
    }     
    hr{
        DISplay:none;
    }
    .head1{
            top:0px;    
            width:20%-10PX;
            height:auto;
       
       margin-left:0px;
            float:left;
    }
    .head1>.FirstLogo{
            color:silver;
            font-family: 'Indie Flower', cursive;
            font-size:2.4em ;
        text-align:center; 
            padding:3px 50px;
    }
    .meny{
            top:0px;
         margin-top:0px;
       margin-right:0px;
            height:auto;
            width:40%;  
        float:right;
    }
    .meny li{
            font-size:1.5em;
            color:silver;
            display:inline;
            margin-left:5% !important;
            padding:2px 5px;
            border:5px inset red;
            background-color: #8B0000;
            text-shadow: 1px 1px 2px black, 0 0 1em red;
    }
    
            text-decoration:none;
            color: inherit;
    }
    .content{
            margin-top:30%;
            font-size:0.8em;
            width:80%;
            color:silver;
            margin-top:50px;
            margin-left:10%;
            font-family: 'Indie Flower', cursive;
        font-family: 'Lobster', cursive;
    }
    p{
            text-indent: 1.5em;
            font-family: 'Indie Flower', cursive;
        font-family: 'Lobster', cursive;
    }
    h2{
            font-size:4em;
            margin-bottom:5%;
            margin-top:10%;
    }
    .photo{
        
        margin-right:25%;
            margin-left:25%;
        height:50%;
            width:50%;
    }
    .mobile_n{
    display:list-item;
    margin-left:10%;}
    
    }

    Помогите решить проблему.

    Заранее Спасибо!

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    2 ответа на этот вопрос

    Рекомендуемые сообщения

    • 1
    Vlad

    Обычно отступы сверху появляются из-за h1, вам надо обнулить у него верхний margin.

    h1 { margin-top: 0; }

    Или вообще margin целиком поставить в 0 и заменить его на padding.

    На будущее рекомендую код выкладывать в какую-нибудь песочницу, типа http://plnkr.co, тогда вам помогут быстрее.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    DarkKezar
    4 часа назад, Vlad сказал:

     

    
    h1 { margin-top: 0; }

     

    Спасибо, но не помогло.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • lev99
        Автор: lev99
        Вот такой код:
        <script type="text/javascript" src="//vk.com/js/api/openapi.js?150"></script> <!-- VK Widget --> <div id="vk_playlist_-2000646569_646569"></div> <script type="text/javascript"> VK.Widgets.Playlist('vk_playlist_-2000646569_646569', -2000646569, 646569, 'ae82627d6c8bb4500d'); </script> я нашел как переделали виджет группы:
        https://javascript.ru/forum/dom-window/40760-ne-otobrazhaetsya-vidzhet-vk-v-tabakh.html
        <iframe src="http://vk.com/widget_community.php?gid=29627308&width=190&height=220" width="190" height="220" scrolling="no" frameborder="0"></iframe> Но с виджетом плейлиста так не выходит, помогите?
      • Sparrow
        Автор: Sparrow
        Всем привет, помогите, пожалуйста, с идеями верстки следующего :

    • advertisement_alt
    • advertisement_alt
    • advertisement_alt