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>