Programmieren – die besten Beiträge

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>

Computer, HTML, programmieren, CSS

Was ist hier genau das Problem (Programmieren = p5.js)?

Ich habe ein Problem mit dem programmieren, da angeblich p5js sagt: There's an error due to \"keyIsDown\" not being defined in the current scope (on line 36 in jspg?

Ich habe mal meinen Code hineinkopiert und hoffe, dass jemand hier mir helfen kann. (Ist ein Projekt für die Schule).

Ich würde gerne das Programm, wie es hier steht, ohne Probleme es zum laufen zu bringen.

let v;

let b;

let n;

let m;

let vGeschwindigkeit;

let bGeschwindigkeit;

let nGeschwindigkeit;

let mGeschwindigkeit;

function setup() {

createCanvas(310, 400);

background('lightgray');

v = -200;

b = -200;

n = -200;

m = -200;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

}

function draw() {

background(240); // Löscht Bild

rect(10, v, 65, 100);

fill('black');

rect(85, b, 65, 100);

fill('black');

rect(160, n, 65, 100);

fill('black');

rect(235, m, 65, 100);

fill('white');

circle(mouseX, mouseY, 10); // Mauszeigerkreis

fill('black');

}

if (keyIsDown(82)) { //taste r -> Spiel neu

setup();

}

if (mouseIsPressed) {

  rgbFarbwerte = get(mouseX, mouseY);

  if (rgbFarbwerte[0] > 0) {

  v = -200;

  b = -200;

  n = -200;

  m = -200; //Falls man den Hintergrund drückt, dann soll das Spiel nochmal von Anfang an wieder starten.

  }

}

if (mouseIsPressed) {

if (10 < mouseX && mouseX < 75 &&

v < mouseY && mouseY < v + 100) {

v = -200; //Taste 1 geht in die Ausgangslage

vGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (85 < mouseX && mouseX < 150 &&

b < mouseY && mouseY < b + 100) {

b = -200; //Taste 2 geht in die Ausgangslage

bGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (160 < mouseX && mouseX < 225 &&

n < mouseY && mouseY < n + 100) {

n = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (235 < mouseX && mouseX < 310 &&

m < mouseY && mouseY < m + 100) {

m = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

v = v + vGeschwindigkeit;

if (v > height) {

v = -100;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 1

}

b = b + bGeschwindigkeit;

if (b > height) {

b = -100;

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 2

}

n = n + nGeschwindigkeit;

if (n > height) {

n = -100;

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 3

}

m = m + mGeschwindigkeit;

if (m > height) {

m = -100;

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 4

}

PC, Computer, programmieren, JavaScript, Informatik, Programmiersprache

Meistgelesene Beiträge zum Thema Programmieren