Возникли проблемы при перемещении h1 и #logo

0

Создание веб-сайта для практики html/css. Не #logo переместить позицию моего изображения h1 и #logo.

body {
  text-align: center;
  background: url(/images/bg.png);
  background-size: cover;
  font-family: sans-serif;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  position: absolute;
  width: 100%;
  display: block;
}

p {
  text-align: center;
  font-size: 24px;
  font-family: sans-serif;
}

h1 {
  display: inline-block;
  color: black;
  position: relative;
  top: -90%;
  text-align: center;
  text-indent: 10px;
  font-size: 20px;
}

h1:hover {
  color: #B40400;
}

#logo {
  top: 50%;
}
<a href="http://www.example.com">
  <h1>Test</h1>
</a>
<img border="0" id="logo" src="http://placehold.it/420x120" alt="MAL." width="420" height="120">

<h1>Test1</h1>
<h1>Test2</h1>
<h1>Test3</h1>
<h1>Test4</h1>
<h1>Test5</h1>

Пожалуйста помоги! Благодарю.

Теги:

2 ответа

0

@Mal ваша скрипка не правильная, правильный синтаксис...

<div id="wrap">
    <img border="0" id="logo" src="/images/logo.png" alt="MAL." width="420" height="120" />
        <h1 class="name"><a href="http://www.example.com">Test</a></h1>
        <h2>Test1</h2>    
        <h2>Test2</h2>    
        <h2>Test3</h2>    
        <h2>Test4</h2>  
        <h2>Test5</h2>    
   </div>

Вы должны закрыть тег, и вы должны быть внутри вашего

Поделиться
0

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

Скорее используйте поля:

margin: top, right, bottom, left;

Итак, чтобы переместить ваш H1:

margin: 50px, 0, 0, 0;

ИЛИ

margin-top: 50px;
Поделиться
  • 0
    Я пытаюсь заставить сайт работать на всех размерах окна. Я посмотрел на этот stackoverflow.com/questions/4668789/…, который сказал, чтобы удалить все поля.
  • 0
    Удаление всех полей не очень хороший совет. Заставить сайт работать на экранах всех размеров не обязательно означает, что вы должны избавиться от наценок. Возможно, вам следует начать с некоторых базовых курсов в html / css, прежде чем искать ответы в stackoverflow.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню