1
Все форматирование, как я хочу, кроме шины не в нужном месте. Я хотел бы, чтобы шина двигалась прямо вверх в промежуток, который я оставил рядом с текстом.HTML-изображение не в нужном месте
Вот codepen версия этого: http://codepen.io/anon/pen/qardrz
<!DOCTYPE html>
<html>
<head>
<title>Home - Duck Duck Grouse</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-top: -5px;
}
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
margin-top: -5px;
}
.navli {
float: left;
width: 25%;
margin-top: 0px;
}
.navli a {
display: block;
color: white;
text-align: center;
padding: 14px 0px;
text-decoration: none;
}
.navli a:hover:not(.active) {
background-color: #333;
}
.activeNav {
background-color: #000;
}
.navli:last-child {
border-right: none;
}
#spike {
width: 40%;
}
#wew {
width: 53%;
margin-left: 3%;
}
</style>
</head>
<body>
<img src="https://i.sli.mg/km2FIO.jpg" class="banner" />
<ul class="navbar">
<li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
<li class="navli"><a class="nava" href="contact.html">Contact</a></li>
<li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
<li class="navli"><a class="nava" href="menu.html">Menu</a></li>
</ul>
<p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here.
Founded in 1969, we import only the finest beans grown by slaves in Africa, and
we run over entire duck families ourselves, ensuring that they are finely crushed,
just to have the freshest roadkill for our famous roast duck recipe. The tires on
our cars have tiny spikes on them, ensuring your meat is finely tenderised before
it even enters the kitchen.</p>
<img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />
</body>
</html>