Hallo, ich arbeite seit ungefähr drei Monaten mit html und habe jetzt ein Problem: Ich will einen Text neben mein Bild platzieren, doch immer wenn ich alles nach links floate zerstört das meine navigationsleiste. Möchte noch anmerken, dass meine Skills zu diesem Thema ziemlich beschränkt sind. Hier findet ihr mein CSS - unten html. Danke für eure hilfe! 😊
.topnav {
background-color: rgb(245, 245, 245);
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #1d1d1d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #3f79e6;
color: white;
}
.topnav .icon {
display: none;
}
@Media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@Media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
margin-left: 30px;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@Media screen and (min-width: 601px){
#produkte {
margin-left: 20%;
float: left;
}
}
.produkt {
width: 200px;
border: solid #dedcd9;
background-color: #f6f8fa;
padding: 10px;
margin: 20px;
display: block;
text-align: right;
height: 200px;
}
.produkt img {
width: 180px;
padding: 10px;
display: block;
}
p, a, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
font-display: block;
}
a {
font-size: x-large;
color:#3f79e6;
}
Das ist mein html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta-charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div id="produkte">
<div class="produkt" id="schuh"><a href="#schuh"><center><img src="bilder/schuh.jpg" alt="Schuh"></center></a></div>
<div class="desc"><a>Nike Air</a></div><p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
<div class="produkt" id="schuh"><a href="#schuh"><center><img src="bilder/schuh.jpg" alt="Schuh"></center></a></div>
<div class="produkt" id="schuh"><a href="#schuh"><center><img src="bilder/schuh.jpg" alt="Schuh"></center></a></div>
</div>
</body>
</html>
Warum sollte seine Schrift denn auf einem System installiert sein müssen? Er benutzt font-face, damit die User die Schrift sehen können. Font-Face bestimmt nicht einfach irgendeine Schriftart, wie du es vielleicht irrtümlich an dem "font-family" gelesen hast, sondern lädt eine Schrift in dein System, sie der Benutzer zusammen mit den anderen Dateien lädt, sobald er die Seite öffnet. Mit dem font-family setzt man den Namen der ins css geladenen Schrift fest, so dass man sie später unter diesem Namen in Text-Tags einsetzen kann.