1

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

Обратите внимание, что линия футера должна быть во весь экран, в отличие от остального сайта, у которого есть отступы. Я вставил в html эту линию как изображение(img), затем в дивах вставил авторские права. Если я вставляю линию с относительным позиционированием(relative) линия не во весь экран, а всё это по % высчитывать очень сложно, а если я делаю абсолютное позиционирование, линия оказывается ниже авторских прав: моё

Подскажите решение, пожалуйста

Код CSS(при relative):

footer img {
	position: relative;
	margin-top: 50px;
	width: 100%;
}

footer div {
	font-family: 'Bebas Neue', serif;
	color: #A2A2A2;
}

footer span {
	font-family: 'Bebas Neue', serif;
	color: #6E6E6E;
}

.div1 {
	margin-top: 50px;
}

.div2 {
	margin-left: 500px;
	margin-top: -23px;
}
<footer>
			<img src="img_Blitz/Top-Line.png"/> <!--линия футера-->
			<div class="div1">All Content Copyright 2020 - <span>Blitz.</span> All Rights Reserved</div>
			<div class="div2">Site Developed by <span>Best PSD Freebies</span></div>
		</footer>

код CSS(при absolute):

footer img {
	position: absolute;
	margin-top: 50px;
	width: 100%;
}

footer div {
	font-family: 'Bebas Neue', serif;
	color: #A2A2A2;
}

footer span {
	font-family: 'Bebas Neue', serif;
	color: #6E6E6E;
}

.div1 {
	margin-top: 50px;
}

.div2 {
	margin-left: 500px;
	margin-top: -23px;
}

4
  • Приведи минимальный код, воспроизводящий проблему. Так непонятно в чем проблема. Нужен код, чтобы понимать где косяк. 8 мар 2020 в 17:09
  • 'footer img { position: relative; margin-top: 50px; width: 100%; } footer div { font-family: 'Bebas Neue', serif; color: #A2A2A2; } footer span { font-family: 'Bebas Neue', serif; color: #6E6E6E; } .div1 { margin-top: 50px; } .div2 { margin-left: 500px; margin-top: -23px; }' 8 мар 2020 в 17:16
  • Ок. Еще проблемный хтмл кусочек не помешает. И постарайся сниппетом оформить так, чтобы средствами СО можно было тут же воспроизвести. Чтобы можно было тут поковырять. 8 мар 2020 в 17:20
  • я изменил вопрос, там все коды 8 мар 2020 в 17:23

3 ответа 3

2

Вот так будет правильно:

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 90%;
  min-width: 500px;
  max-width: 1200px;
  height: 800px;
  margin: 0 auto;
  background-color: gray;
}

footer {
  position: relative;
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  background-color: lightgray;
}

footer .wrp {
  position: relative;
  overflow: hidden;
  width: 90%;
  min-width: 500px;
  max-width: 1200px;
  margin: 0 auto;
}

footer .div1 {
  float: left;
  display: inline-block;
  width: 49%;
  text-align: left;
}

footer .div2 {
  float: right;
  display: inline-block;
  width: 49%;
  text-align: right;
}

footer:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  width: 100%;
  background-color: darkgray;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
}
<div class="wrapper">Ваш контент</div>
<footer>
  <div class="wrp">
    <div class="div1">All Content Copyright 2020 - <span>Blitz.</span> All Rights Reserved</div>
    <div class="div2">Site Developed by <span>Best PSD Freebies</span></div>
  </div>
</footer>

0

footer img {
	position: absolute;
	left: -230px;
	width: 117%;
}

это единственный вариант, наверное

0

Как-то так

footer {
  width: 100%;
}

.container {
  display: block;
  width: 500px;
  margin: auto;
}

.line-copyright {
  display: block;
  width: 100px;
  background-color: #e3e3e3;
}
<footer>
  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="line-copyright">
    //Линия на весь экран
  </div>
</footer>

1
  • твой бэкграунд нормально работает, но у меня линия футера больше, чем ширина экрана и твоего футера, видимо, проблема с картинкой 8 мар 2020 в 17:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.