0

Мне нужно сделать такой header

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

Задний фон — картинка. Текст — ссылка на главную страницу сайта.

У меня получался такой header

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

Как добавить отступ слева для текста ссылки?

Мой код html

<body>
<div id ="main">
    <div id ="header">
        <h1><a href="index.html"><p>Мой первый простой сайт</p></a></h1>
    </div>

css:

#header{
height: 90px;
background: #2a79bc url("images/header.png") no-repeat; 
}

#header h1{
font-size: 28px;
letter-spacing: -1px;
padding: 20px, 0, 0, 20px;
color: #ff5500;
}
#header h1 a {
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
margin-left: 100px;
}
#header h1 a:hover {
color: #111;
}

#header h1 a p {
margin-left: 10px;
padding-left: 100px;
}

С помощью добавления абзаца в ссылку удалось опустить ее ниже, но отступ слева сделать не получается.

Теперь мой код выглядит так

Html:

    <div id ="header">
        <h1><a href="index.html">Мой первый простой сайт</a></h1>
    </div>

css:

#header{
height: 90px;
background: #2a79bc url("images/header.png") no-repeat; 
}

#header h1{
font-size: 28px;
letter-spacing: -1px;
padding: 20px 0 0 20px;
color: #ff5500;
}
 #header h1 a {
 color: #fff;
 text-decoration: none;
 font-weight: 100;
 letter-spacing: -2px;
 margin-left: 100px;
 }
 #header h1 a:hover {
 color: #111;
 }


a {
text-decoration: none;
color: #4682B4;
}

a:hover{
text-decoration: underline;
color: #2a52be;
}

Вот скрин с сайта.

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

1 ответ 1

1

Уберите тег p из ссылки, а отступы пропишите padding: 20px 0 0 20px; то есть, уберите запятые.

PS, чтобы всё работало. пишите так:

<div id="main">
  <div id="header">
    <h1><a href="index.html">
      Мой первый простой сайт
    </a></h1>
  </div>
</div>

#header {
  height: 90px;
  background: #2a79bc url("images/header.png") no-repeat;
}

#header h1 {
  font-size: 28px;
  letter-spacing: -1px;
  padding: 20px 0 0 20px;
  color: #ff5500;
}

#header h1 a {
  color: #fff;
  text-decoration: none;
  font-weight: 100;
  letter-spacing: -2px;
  //margin-left: 100px;
}

#header h1 a:hover {
  color: #111;
}
17
  • тег p убрал, запятые тоже. Отступа слева не появилось 3 мар 2020 в 13:06
  • Покажите как теперь выглядит код? Кстати. может это только так скопировалось при перенесении кода сюда, но у вас один div (тот, что main) не закрыт.
    – Quazimorda
    3 мар 2020 в 13:08
  • Не закрыт, потому, что я только часть кода скопировал. Сейчас покажу, как выглядит код. 3 мар 2020 в 13:10
  • обновил свой вопрос 3 мар 2020 в 13:16
  • 1
    @Konstantin_SH у вас ссылка это inline-block а параграф это block, удалите параграф из ссылки 3 мар 2020 в 13:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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