Задать вопрос
ArtZen
@ArtZen
web-dev???
html

Что в моей вёрстке не так?

Доброго времени суток всем)))

Вопрос очень нубский, да я и сам еще нуб, только учусь, так что хотелось что бы мне здесь помогли, а не высмеяли. Совсем недавно решил заняться версткой, и после пары уроков и статей, попытался сам самостоятельно сверстать что-то. Но видимо не до конца понял. Суть вопроса такова; почему логотип, и иконка социальных сетей не находятся на одном уровне? Как тег "выталкивает" другой или ошибка в стилях?

Простите за г***о-кодерство)))

Сразу скажу, что начинаю так сказать свое обучение с самых основ, поэтому специально не пользуюсь всякими 960gs и Bootstrap.

Вот собственно код(если это так можно назвать), а вот и результат.
P.S Понимаю что глупо спрашивать, но все же спрошу, может кто-нибудь в дальнейшем мне поможет, я имею ввиду менторство, зарание спасибо всем.

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
 <div class="header">
  	<div class="logo">
  		<a href="#" class="logo"><img src="img/logo.png" alt="#"></a>
  		<div class="facebook">
  			<a href="#" class="facebook"><img src="img/facebook.png" alt="#"></a>
      </div>     
    </div>
  </div>    
</body>
</html>


body {
	background-color: #eeeeee;
}
 .header {
 	height: 600px;
 	background-image: url(../img/h_baner.png);
 	width: 100%;
  position: absolute;
 	background-position: top center;
 	background-repeat: no-repeat;
 	top: 0;
 	left: 0;
 }
.logo {
	margin-top: 50px;
	margin-left: 100px;
}
	
.facebook {
	margin-top: 50px;
	margin-left: 400px;
}
eb0267957da848f6a8e558514e3ed875.png
  • Вопрос задан
  • 282 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
pm_wanderer
@pm_wanderer
junior-HTML
У вас дважды указан класс facebook. Ну и структура сама не правильная
Ответ написан
6 комментариев
6 комментариев
igamov
@igamov
†Верстайло ракамакафо†
Так должно по идее сработать.
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <div class="header">
   <div class="logo">
      <a href="#"><img src="img/logo.png" alt="#"></a>
    </div>     
    <div class="facebook">
       <a href="#"><img src="img/facebook.png" alt="#"></a>
   </div>
  </div>    
</body>
</html>


body {
  background-color: #eeeeee;
}
 .header {
  width: 100%;
  height: 600px;
  background-image: url(../img/h_baner.png);
  background-position: top center;
  background-repeat: no-repeat;
}
.logo {
  float: left;
  margin-top: 50px;
  margin-left: 100px;
}
  
.facebook {
  float:  left;
  margin-top: 50px;
  margin-left: 400px;
}
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать дизайн мобильного приложения Гороскоп
28 апр. 2024, в 18:14
2500 руб./за проект
Сайт с видеозвонками и чатами на react
28 апр. 2024, в 18:08
10000 руб./за проект
Дизайн визитки для сервисного центра
28 апр. 2024, в 18:05
1000 руб./за проект
Ещё заказы