Блог

Главная - Вопросы по программированию - Как я могу удалить большое пустое пространство со своей страницы?

Как я могу удалить большое пустое пространство со своей страницы?

#html #css

#HTML #css

Вопрос:

Я работал на своей странице и увидел, что справа есть большое пустое пространство, я вижу, как оно перемещает полосу прокрутки. Как я могу это удалить?

Это мой код:

 `<!doctype html>
<html>
<head>
<title>Agenda - Central de Estudos</title>
<meta charset="utf-8">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="description" content="Central de estudos. Todas as matérias. Temas abordados em sala de aula.">
<meta name="keywords" content="estudo, matéria, escola">
<link rel="stylesheet" href="G:/TRABALHOS/Central de estudos - Arquivos/header_style.css">
<link rel="stylesheet" href="G:/TRABALHOS/Central de estudos - Arquivos/footer_style.css">
<style>
h1{text-align: center;}
h2{font-size: 18px;}
article{
    margin: 30px;
    height: 721.5px;
}
@font-face{
    font-family: Sepet;
    src: url(G:/Programação/Webdesign/Curso-de-Webdesign/Projeto-Fashion/Fontes/Sepet.ttf);
}
article img{
    width: 700px;
    position: absolute;
    bottom: 250px;
    left: 900px;
}
.handwriting{
    font-family: Sepet;
    font-size: 30px;
    position: relative;
    left: 1000px;
    bottom: 150px;
}
.handwriting a{
    text-decoration: none;
}
</style>
</head>
<body>
    <header>
        <h1>Central de Estudos<span>     <a href="file:///G:/TRABALHOS/Central de Estudos - Arquivos/index-login-on.html">Início</a> <a href="#">Matérias</a> <a href="file:///G:/TRABALHOS/Central de estudos - Arquivos/Exercícios.html">Exercícios</a> <a href="file:///G:/TRABALHOS/Central de estudos - Arquivos/Agenda.html">Agenda</a> <a href="file:///G:/TRABALHOS/Central de estudos - Arquivos/Login-login-on.html">Login</a></span></h1>
        <img src="https://cdn.pixabay.com/photo/2018/07/20/12/26/earth-3550553_960_720.png" alt="Globo escolar">
    </header>
    <main>
        <article>
            <h1>Agenda</h1>
            <hr>
            <h2>Tarefas</h2>
            <ul>
               <li>25/03/2019 | Ciências | Livro - Pg. 17 Ex. 7</li>
               <li>26/03/2019 | Português | Livro - Pg. 46</li>
               <li>26/03/2019 | Geografia | Caderno - Atividade 07</li>
            </ul>
            <h2>Provas</h2>
            <ul>
                <li>26/03/2019 | Artes | Conteúdos abordados (diversos)</li>
                <li>01/04/2019 | Ciências | O ser humano (visão geral) e a célula (visão geral)</li>
            </ul>
            <h2>Entrega de trabalhos</h2>
            <p>Não há trabalhos para entrega no momento.</p>
            <img src="https://cdn.pixabay.com/photo/2012/04/18/14/41/opened-37229_960_720.png">
            <p class="handwriting"><a href="#">Aulas</a></p>
        </article>
    </main>
    <footer>
        <p>Autoria do site de Bruno M. B. Sdoukos.</p>
        <p>Copyright amp;copy; 2019</p>
    </footer>
</body>
</html>`

Я думаю, что проблемы с полями нет, я уже пытался указать «margin: 0» в поле «style», но это не решает проблему.

Obs: Страница находится в файле моего компьютера, поэтому я не могу поместить сюда ее URL.

Ответ №1:

Один из способов отладить это самостоятельно — добавить следующее CSS правило:

 * {
  border: 1px solid red;
}

Это сразу покажет вам, какие элементы отвечают за прокрутку.

введите описание изображения здесь

Есть 2 элемента, вызывающих горизонтальную прокрутку из-за их больших left значений свойств. Либо удалите эти большие значения, либо переосмыслите свой макет, чтобы он помещался в пределах начального окна просмотра.

 article img {
  width: 700px;
  position: absolute;
  bottom: 250px;
  left: 900px; /* <-- Causing horizontal scroll */
}
.handwriting {
  font-family: Sepet;
  font-size: 30px;
  position: relative;
  left: 1000px; /* <-- Causing horizontal scroll */
  bottom: 150px;
}

Комментарии:

1. Я удалил ‘left: 1000px’, и это решило проблему. Но могу ли я расположить текст иначе?

2. Вы также удалили left: 900px из article img ?

3. Да, теперь мне нужен другой способ позиционирования текста и изображения.

4. @BrunoSdoukos согласился. Но это совершенно другой вопрос. Я бы начал здесь изучать Flexbox. Затем попробуйте свой макет еще раз и вернитесь к SO, если вы застряли.

5. @BrunoSdoukos Если вы довольны моим ответом, я был бы признателен, если бы вы могли выбрать его в качестве выбранного ответа.

Ответ №2:

 .handwriting{
font-family: Sepet;
font-size: 30px;
position: relative;
left: 1000px;
bottom: 150px;
}

Это «left: 1000px» толкает 

 <p class="handwriting"><a href="#">Aulas</a></p>

путь вправо, вызывающий пробелы для остальной части страницы