Проблема переполнения CSS / HTML на веб-странице

#html #css #windows #overflow

#HTML #css #Windows #переполнение

Вопрос:

Изображение текущего состояния веб-страницы:

Изображение текущего состояния веб-страницы

Я начинающий программист, в настоящее время изучаю HTML / CSS / JavaScript. Я занимаюсь созданием веб-страницы и пытаюсь выбраться из болота учебников, пачкая руки.

Я создал одну веб-страницу, которой доволен, и это моя вторая. Я считаю, что моя проблема связана с моим изображением в формате .png в моем HTML-файле, поскольку при его загрузке он загружается очень большим и сильно переполняет страницу. Даже после изменения ширины и добавления overflow: hidden; это убирает полосы прокрутки, но страница по-прежнему грязная.

Я пробовал overflow: hidden; в html, body{} и самом теге img. Я предоставлю свой код и фотографии текущей страницы, чтобы показать вам проблему. Тем временем скрытое переполнение будет отключено.

(В ссылке есть фотография страницы). Код, размещенный ниже

 * {
    margin: 0;
    padding: 0;
}

.wrapper {
    padding: 1170px;
    margin: auto;
}

img {
    max-width: 200px;
    max-height: 200px;
}

header {
    background-color: purple;
    background-image: url(../imgs/mountains.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

 <!DOCTYPE html>
<html>
    <head>
        <title>Practice2 page</title>
        <link rel="stylesheet" href="stylesheets/practice2.css">
    </head>
    <body>
        <header>
            <div class="wrapper">
                <div class="logo">
                    <img src="imgs/image1.png" alt="logo" width="200">
                </div>
                <ul class="nav-bar">
                    <li><a href="#">HomePage</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact Me</a></li>
                    <li><a href="#">News</a></li>
                </ul>
            </div>

            <div class="hook">
                <h1>DeadInside</h1>
                <a href="#">Learn More</a>
            </div>
        </header>
    </body>
</html>

1. я хочу извиниться, я все еще относительно новичок в этом, что такое word press? я использую VS code. а также что такое Maiusc? спасибо за любую помощь!!

2. WordPress — это программное обеспечение, которое позволяет создавать веб-сайты и упрощает управление ими благодаря веб-сайтам, разработанным на полном html / css / js. На самом деле это одна из самых популярных. Под Maiusc я имел в виду ключ на клавиатуре!!! Ctrl Maiusc R — это сочетание клавиш, последовательность клавиш, которые вы должны нажимать на клавиатуре.

Ответ №1:

Проблема в вашем .wrapper классе, у него есть padding:1170px , и это приводит к тому, что элемент-оболочка намного больше, чем тело

Попробуйте сделать это

 .wrapper {
    padding: 10px;
    margin: auto;
}

Вы можете использовать заполнение во всех разделах с

 padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

Подробнее об этом свойстве в W3Schools

1. это работало до сих пор!! я установил его на 100 пикселей только для тестирования, и это мало, что бы вы посоветовали мне тоже установить??

2. @KevinMichealProsser Это зависит от графики, которую вы хотите разместить на странице, нет значения по умолчанию или правильного значения 🙂 ! Если ответ был полезным, подумайте о том, чтобы пометить его как правильный!