-1
Ich kann mein Logo nicht links neben der Navigationsleiste erscheinen lassen. Es erscheint nur in der Mitte und das Navigationsmenü bewegt sich nach unten. Bitte kannst du mir helfen, es zu reparieren und zu verstehen, was ich falsch gemacht habe?Kann das Logo nicht links von der Navigation schweben lassen
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylecafe.css">
</head>
<body>
<div id="contacttop">
<div id="contacttop2">
<div id="phoneemail">
<p><span id="phone">☏</span> 012240478624 <span id="envelope">✉</span> <a href="#">[email protected]</a></p>
</div>
<div id="socialmedia">
<a href="#"><img src="img/instagram.png" width="16px" height="16px"></a>
<a href="#"><img src="img/googleplus.png" width="16px" height="16px"></a>
<a href="#"><img src="img/facebook.png" width="16px" height="16px"></a>
</div>
</div>
</div>
<div id="navwrap">
<nav>
<a href="index.html" id="logo"></a>
<!--<img src="burger.png">-->
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="tout.html">Google Tour</a></li>
<li><a href="menu.html">Menu ▼</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="whatson.html">What's On</a></li>
</ul>
</nav>
</div>
<div id="banner"></div>
<section id="info"></section>
<section id="contactbot">
<form></form>
<div id="hours"></div>
</section>
<footer></footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
/*--- css reset ---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*--- end css reset ---*/
a {
color: black;
text-decoration: none;
}
body {
font-family: 'Open Sans', sans-serif;
}
#contacttop {
width: 100%;
background: #f2e8c1;
}
#contacttop2 {
width: 80%;
height: 30px;
background: #f2e8c1;
margin: 0 auto;
}
#phoneemail {
width: 50%;
float: left;
}
#phoneemail p {
font-size: .75em;
font-weight: 600;
line-height: 30px;
}
#phone, #envelope {
font-size: 1.3em;
}
#socialmedia {
width: 90px;
height: 30px;
float: right;
}
#socialmedia img {
display: block;
margin: 7px 0 7px 14px;
float: right;
}
#navwrap {
width: 100%;
background: #663200;
height: 90px;
}
nav {
width: 80%;
margin: 0 auto;
height: 90px;
}
#logo {
background: url(../img/logo.png) no-repeat;
width: 126px;
height: 75px;
margin: 7.5px 0;
float: left;
}
nav ul {
float: right;
}
nav ul li {
display: inline;
margin-left: 30px;
line-height: 90px;
}
nav ul li a {
font-size: 1.1em;
color:#dddddd;
font-weight:600;
}
#current {
color: white;
}
Willkommen bei Stackoverflow! Bitte geben Sie ein [minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) für Ihren Versuch an, z. als [Stack Snippet] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/), damit wir versuchen können, Ihr Problem zu lösen und zu erklären, warum Ihr eigener Versuch ist gescheitert - so können Sie etwas Nützliches für Ihre zukünftige Entwicklung lernen und eine Antwort auf dieses einzelne Problem bekommen. – andreas