CSS background image и текст нижнего колонтитула

Работа через учебник, чтобы узнать о CSS, и я пытаюсь выяснить, как создается какое-то пространство. Когда я проверяю страницу, пробел находится в теге body. Я думал, что тег body поместит весь текст в фоновое изображение. Но когда я изменяю размер окна, создаются различные уровни белого пространства (как вы можете видеть на изображении).CSS background image и текст нижнего колонтитула

Я хотел бы создать новую строку для More Text, так что когда размер экрана будет меньше размера, строка останется ниже изображения - вместо создания пробела между ними. Спасибо за любую помощь.

HTML

{% load staticfiles %} 
<html> 

<head> 

    <title>Title</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="{% static 'css/blog.css' %}"> 
    <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css"> 

</head> 

<body> 

    <div class="page-header"> 
     <h1><a href="/">Title</a></h1> 
    </div> 

    <div class="page-footer"> 
     <h1>More text</a></h1> 
    </div> 

</body> 

</html>

CSS

h1 a { 
    color: #666699; 
    font-family: 'Lobster'; 
} 

body { 
    background-image: url('../images/Death_to_stock_photography_wild_6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.page-header { 
    background-color: transparent; 
    margin-top: 0; 
    padding: 20px 20px 20px 40px; 
} 

.page-footer { 
    background-color: transparent; 
    position:absolute; 
    padding: 20px 20px 20px 40px; 
    bottom:0; 
} 

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { 
    color: gray; 
    font-size: 26pt; 
    text-decoration: none; 
    position: relative; 
    bottom: 10px; 
    height: 5px; 
} 

.content { 
    margin-left: 40px; 
} 

h1, h2, h3, h4 { 
    font-family: 'Lobster', cursive; 
    color: #666699; 
}

источник

2016-08-12 Jebediah15

с прокладкой? поле? –

issus с обивкой - обивка: 20px 20px 20px 40px; удалите его и попробуйте. Надеюсь, он работает. –

@NagaSaiA все еще имеет пустое пространство внизу, когда я меняю размер после удаления прокладки – Jebediah15

Вы можете использовать медиа-запросы для определения атрибутов для данного элемента для меньшего экрана.

@media screen and (max-width: 800px){ 
    .myclass{ 
     myattribute:myvalue; 
    } 
}

легче и лучшее решение будет использовать основу третьей стороны, как бутстрап или фундамент, который имеет подвесную систему для адаптивного дизайна.

источник

2016-08-12 18:09:19 shawon191

Спасибо, я смотрел на это, но мне хотелось сначала начать сначала, что кажется больше неприятностей, чем стоит – Jebediah15

Я посмотрел на свой CSS на codepen: http://codepen.io/artchibald/pen/KrJdpY

Кажется, у вас есть нижняя 0 объявлена в CSS, ниже исправленный вариант:

h1 a { 
    color: #666699; 
    font-family: 'Lobster'; 
} 

body { 
    background-image: url('../images/Death_to_stock_photography_wild_6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.page-header { 
    background-color: transparent; 
    margin-top: 0; 
    padding: 20px 20px 20px 40px; 
} 

.page-footer { 
    background-color: transparent; 
    position:absolute; 
    padding: 20px 20px 20px 40px; 
    /* REMOVE THIS--------bottom:0; */ 
} 

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { 
    color: gray; 
    font-size: 26pt; 
    text-decoration: none; 
    position: relative; 
    bottom: 10px; 
    height: 5px; 
} 

.content { 
    margin-left: 40px; 
} 

h1, h2, h3, h4 { 
    font-family: 'Lobster', cursive; 
    color: #666699; 
}

источник

2016-08-12 18:23:54

Спасибо @Archie, но пробелы остаются. – Jebediah15

CSS background image и текст нижнего колонтитула

ответ

Смежные вопросы