Html/CSS Text neben Bild?
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>
1 Antwort
Zuerst zu ein paar Fehlerkorrekturen und Änderungsvorschlägen.
1) Es gibt keine font-display-Eigenschaft. Entferne font-, dann passt es wieder. Da bei dem Selektor mit diesem Fehler eigentlich nur der Zustand von a-Elementen sich durch dieses Property ändern würde, würde ich das Property auch in den Elementselektor weiter unten (für a) verschieben.
2) Du hast zwei Media Queries mit denselben Bedingungen:
@Media screen and (max-width: 600px) {
die du demzufolge zu einem verbinden könntest.
3) Dir fehlt ein title-Tag im head-Bereich deines Dokuments. Dieses Element ist nicht optional.
4) Bei einem meta-Tag muss der Bindestrich zwischen Elementname (meta) und Attributname (charset) gegen ein Leerzeichen ausgetauscht werden.
5) Für das Element #myTopnav würde ich ein nav-Element nutzen, statt einem div.
6) Es gibt kein center-Tag im HTML5-Standard. Wenn du Elemente horizontal zentrieren möchtest, verwende die Mittel, die CSS dir zur Verfügung stellt (z.B. text-align: center für das umgebende Blockelement).
7) IDs kennzeichnen sich durch Eindeutigkeit aus. Du aber verwendest die ID schuh allerdings mehrmals.
8) Dein JavaScript lässt sich auf wenige Zeilen verkürzen:
const topNavigation = document.getElementById("myTopnav");
function toggleNavigation() {
topNavigation.classList.toggle("responsive");
}
Dabei würde ich auch gleich noch passende, ausdrucksstarke Bezeichner verteilen. Das Navigationselement braucht nur einmal im DOM gesucht werden, daher sollte dies außerhalb der Funktion geschehen.
Im Markup würde ich das a-Element sogar gegen ein button-Element austauschen (was dann aber noch ein paar nachträgliche Änderungen im CSS erfordert).
<button class="icon" id="navigation-toggler" type="button">
<i class="fa fa-bars"></i>
<span class="visually-hidden">Open</span>
</button>
Das JavaScript würde ich gleich nochmal reduzieren und durch den Einsatz eines EventListeners braucht es auch kein onclick-Attribut mehr.
const topNavigation = document.getElementById("myTopnav");
document.getElementById("navigation-toggler").addEventListener("click", () => topNavigation.classList.toggle("responsive"));
Eine passende Implementation für den visually-hidden-Selektor findest du hier (im ersten Snippet).
Zu deinem Problem:
Die float-Eigenschaft hebt Elemente, auf die es wirkt, aus den normalen Textfluss. Für dein Vorhaben brauchst du es nicht.
Zuerst würde ich die Darstellung eines Produktes ändern. Bei dir sind es noch aneinandergereihte Elemente ohne Bezug zueinander.
Ein Produkt könnte durch ein figure-Element repräsentiert werden:
<figure class="produkt">
<div class="bild">
<img src="bilder/schuh.jpg" alt="Schuh">
</div>
<figcaption class="beschreibung">
<strong>Nike Air</strong>
<p>Toller Schuh mit ...</p>
</figcaption>
</figure>
Die Links habe ich hier entfernt, denn ich erachte sie als unnötig.
Im Selektor für #produkte wird float herausgeworfen. Es wird dort überhaupt nicht gebraucht. Der Klassenselektor für produkt wird hingegen mit
display: flex;
erweitert, was dafür sorgt, dass .bild und .beschreibung horizontal nebeneinander platziert werden. Mehr zu Flexbox Layouts kannst du z.B. hier nachlesen.
Anschließend sind noch ein paar Anpassungen notwendig, sodass bspw. .bild eine Breite von 180px bekommt (das img-Element kann sich mit width: 100% an diese Breite anpassen).
Als Grundlage, auf der du weiter aufbauen kannst, sollte das für dich ausreichen.