Мне нужно сделать такой 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;
}
Вот скрин с сайта.