1
Wie positioniere ich bestimmte Elemente wie Überschriften, horizontale Reihen usw. so, dass sie an der Position sind, an der ich sie haben möchte. Es ist ziemlich schwierig zu erklären, aber hier ist ein Beispiel, damit Sie es verstehen können.Styling-Elemente
Ich habe mein Basislogo oben links platziert (es ist ein Vorlagenlogo für jetzt) in derselben Zeile oder derselben "Position" Ich brauche es direkt gegenüber dem Logo auf der anderen Seite der Seite. Das einzige Problem ist, dass es unter meinem Logo erscheint.
Hier ist ein Beispiel dafür, wie ich es erwarten sein: https://gyazo.com/b904252fa22783b78e820d57318798cc
Dies ist, wie es wirklich ist:
JSFiddle: https://jsfiddle.net/seesqz9u/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<a href="http://www.steamcommunity.com/login/">
<h3 style="float: right; position: fixed;">SIGN IN WITH STEAM</h3>
</a>
<div class="navbar">
<ul>
<li><a href="coinflip.html">COINFLIP</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Vielen Dank für die Erklärung :) – Senoj