Размещение обьекта

kaplunA · May 9, 2017

Привет . Не могу понять почему моя картинка(аватар) появляется перед меню. Мне нужно что бы она была в правой части экрана . Первым лого , потом меню и сразу за ним аватар.

Spoiler


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="Style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="headermenu">
				<span class="logo">YokNgalam</span>
				<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Destination</a></li>
				<li><a href="#">Lttinary</a></li>
				<li><a href="#">Review</a></li>
				<li><a href="#">Contact</a></li>
				</ul>
				<img src="img/Avatar.png" width="48" height="48" class="avatar">
			</div>
		</div>
		<div class="content"></div>
		<div calss="footer"></div>
	</div>
</body>
</html>


body{
	background-color: #75DED9;
	font-size: 16px;
}
.headermenu {
	margin-top: 50px;
}

.logo{
	font-size: 20px;
	margin-left: 150px;
	color: #fff;
	margin-top: 14px;
	float: left;
}
.avatar{
	padding-right: 50px;
	float: right;
	overflow: hidden;
}
ul {
	
	padding: 0;
	list-style: none; 
	margin: 0 0;
	float: right;
}
li {
	float: left;
}
a {
	display: block;
	padding: 1em;
	color: #fff;	
	text-decoration: none;
	margin-right: 30px;
	border: 2px solid transparent;
	border-radius: 50px;
}
a:hover {
	border: 2px solid #fff;
	border-radius: 50px;
}

прошу прощения разобрался)

Schamil74 · May 10, 2017

В хедере пусть будет два блока лого и меню, аватар включи в меню, отдельно третьим не выделяй его.

На флексах удобней было бы

Sign In

Размещение обьекта

Question

kaplunA

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Schamil74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information