HTML und CSS Frage?

Hallo,

ich möchte die Grüne und gelbe Kärtchen im zweiten <section> nach oben in die MITTE schieben. Jedoch hakt es bisschen bei mir. Zudem müssen wir nur Flexbox benutzen das heisst kein margin oder position etc....

HTML_CODE:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Flexbox</title>

  <link rel="stylesheet" href="../CSS/style.css">

</head>

<body>

  <header>

    <div class="layout2">

 <nav>

    <div class="container">

      <ul>

        <li>

          <a class="item1" href="#">LOGO</a>

          <a class="item" href="#">Menu 1</a>

          <a class="item" href="#">Menu 2</a>

          <a class="item" href="#">Menu 3</a>

          <a class="item2" href="#">Button</a>

        </li>

      </ul>

    </div>

  </nav>

 

</div>

</header>

<main>

  <div class="layout4">

  <section>

   

 

    <div class="laayout2">

     

      <div class="brownhelp"><div class="brownbox"></div></div>

      <div class="sectionone">

        <div class="content1">

          <div class="border"></div>

    <div class="border1"></div>

    <div class="border2"></div>

    <div class="border3"></div>

    <div class="border4"></div>

        </div>

  </div>

</div>

</section>

<section>

    <div class="laayout3">

  <div class="sectiontwo">

      <div class="content2">

        <div class="box"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

       

      </div>

    </div>

    </div>

</section>

</div>

</main>

</body>

</html>

CSS_CODE:

*{

  margin: 0;

  box-sizing: border-box;

}

header {

  background-color: #cae1fc;;

}

.layout2 {

  display: flex;

  align-items: center;

  justify-content: space-around;

  flex-direction: column;

}

.container {

  height: 150px;

  width: 1425px;

  background-color:rgb(80, 98, 104);

  display: flex;

  justify-content: space-around;

  align-items: center;

}

div ul {

  width: 100%;

}

div li {

  display: flex;

   justify-content: space-around;

   align-items:center;

  list-style: none;

}

.item {

  background-color: rgb(39, 185, 171);

  width: 120px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

 

}

.item1 {

  background-color: rgb(193, 67, 67);

  width: 115px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

}

.item2 {

  background-color: rgb(112, 29, 189);

  width: 80px;

  height: 90px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: small;

  display: flex;

  text-align: center;

  justify-content: center;

  flex-direction: column;

  text-decoration: none;

}

.layout2 > nav {

  height: 100vh;

}

nav {

  display: flex;

  align-items: flex-end;

  max-height: 170px;

}

/**/

.layout4 {

  background-color: #cae1fc;

}

.laayout2 {

  height: 1000px;

  display: flex;

  justify-content:space-around;

}

.sectionone {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  max-height: 345px;

  width: 270px;

 

}

.content1 {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 20px;

  background-color: #cae1fc;;

}

.border {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border1 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.border2 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border3 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border4 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.brownhelp {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  max-height: 345px;

  width: 1200px;

}

.brownbox {

  background-color: burlywood;

  width: 1150px;

  height: 305px;

 

}

/*YELLOW*/

.laayout3 {

  display: flex;

  justify-content: space-around;

  align-items: flex-start;

  height: auto;

 

}

.sectiontwo {

  display: flex;

  width: 800px;

  justify-content: space-around;

  align-items: center;

}

.content2 {

  display: flex;

  justify-content: space-around;

  gap: 200px;

}

.box {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box2 {

  background-color: green;

  width: 200px;

  height: 190px;

}

.box3 {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box4 {

  background-color: green;

  width: 200px;

  height: 190px;

}

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend
Welche verschieden Arten von Systemen gibt es (eingebettete Systeme etc)? Wer kann kontrollieren ob ich die Systeme richtig zugeordnet hab (siehe Foto)?

Ist die Tabellenkalkulationssoftware auf dem PC ein System von Systemen oder ist es eine eigenständige Anwendung?
Und was für ein System ist das Blutdruckmessgerät?

Mit freundlichen Grüßen

1 Eigenständige (stand-alone) Anwendungen: Dies sind Anwendungssysteme, die auf einem lokalen Rechner wie einem PC laufen. Sie besitzen alle nötigen Funkti- onalitäten und müssen nicht mit einem Netzwerk verbunden sein. Beispiele sol- cher Anwendungen sind Office-Anwendungen auf einem PC, CAD-Programme, Software zur Fotobearbeitung usw.

2 Interaktive transaktionsbasierte Anwendungen: Diese Anwendungen werden auf einem entfernten Computer ausgeführt. Die Benutzer können entweder von ihren eigenen PCs aus oder über Terminals darauf zugreifen. Hierzu gehören sicherlich Webanwendungen wie E-Commerce-Anwendungen, bei denen man mit einem entfernten System verbunden ist, um Waren und Dienstleistungen zu kaufen. Diese Anwendungsklasse enthält auch Geschäftssysteme, wobei der Zugang zu diesen Systemen über einen Webbrowser oder über spezielle Client-Programm- und Cloud-basierte Dienste wie E-Mail und Foto-Sharing erfolgt. Interaktive An- wendungen benötigen häufig einen großen Datenspeicher, auf den bei jeder Transaktion zugegriffen wird und der dabei jeweils aktualisiert wird.

3 Eingebettete Steuerungssysteme: Dies sind Softwaresteuerungssysteme, die Hard- waregeräte steuern und verwalten. Zahlenmäßig gibt es wahrscheinlich mehr ein- gebettete Systeme als irgendeine andere Art von System. Beispiele für eingebet- tete Systeme sind die Software in einem Mobiltelefon, Software zur Steuerung des Antiblockiersystems im Auto und Mikrowellensoftware zum Steuern des Kochvorgangs.

4 Unterhaltungssysteme: Dies sind Systeme, die in erster Linie für die private Nut- zung gedacht sind und die zur Unterhaltung ihrer Nutzer dienen. Die meisten dieser Systeme sind Spiele. Die Qualität der angebotenen Benutzerinteraktion ist das wichtigste Unterscheidungsmerkmal von Unterhaltungssystemen.

5 Datenerfassungssysteme: Dies sind Systeme, die mithilfe von Sensoren Daten aus ihrer Umgebung sammeln und diese Daten an andere Systeme zur Verarbeitung senden. Die Software muss mit Sensoren interagieren und wird oft in einer le- bensfeindlichen Umgebung oder unter extremen Bedingungen installiert wie bei- spielsweise innerhalb eines Motors oder an einem unzugänglichen Ort.

6 Systeme von Systemen: Diese sind Systeme, die aus vielen anderen Softwaresys- temen zusammengesetzt sind. Einige davon können allgemeine Softwarepro- dukte wie ein Tabellenkalkulationsprogramm sein. Andere Systeme in dem Ver- bund sind eventuell speziell für diese Umgebung geschrieben worden.

Bild zum Beitrag
PC, Computer, Software, Technik, Hardware, programmieren, System, Java, Elektrotechnik, compiler, datenerfassung, Datenbank, Informatik, Python, Softwareentwicklung, Technologie, Datenbanksystem, Frontend, IT-Studium, Backend-Developer
SVG-Favicon benutzt kein CSS?

Guten Tag,

ich möchte folgendes (Logo.svg) SVG-Element als Favicon setzen:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" 
     y="0px" 
     width="1134px" 
     height="702px" 
     viewBox="-36.12 -144.12 1134 702"
     enable-background="new -36.12 -144.12 1134 702" 
     xml:space="preserve">
    <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
    <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
    <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
    <polygon fill="blue" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
    <polygon fill="blue" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
    <polygon fill="blue" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

Jedoch verändert sich die Farbe nicht, sondern bleib nur schwarz.

Ich füge das Element im head so hinzu:

<link rel="icon" type="image/svg+xml" href="/Media/Images/Logo.svg">
HTML, Webseite, CSS, Favicon, Frontend, SVG
Website Programmierung Frontend - Backend Programmiersprache

Hallo alle zusammen,

mich interessiert neuerdings im Bereich der Programmierung das Thema: Welche Programmiersprache für eine dynamische Website? Wenn ich zum Beispiel ein Forum auf einer Website entwickeln möchte, oder NOCH größere Programme, dann interessiert es mich, was man da für Sprachen benutzten könnte.

Außerdem habe ich mitbekommenm, das bei vielen größeren online-Diensten ein Unterschied der Programmierung beim frontend und beim backend besteht. Zum Beispiel habe ich von der Kobination:

Zur Ausgabe der Daten auf der Website(Frontend) --> Phyton Zur Programmierung im Hintergrund(Backend) --> C++

gelesen. Jetzt frage ich mich dazu wiegesagt, welche Programmiersprache für Frontend, und welche für das Backend gut geeignet ist, ich habe mich ein bisschen umgeschaut, und bin zu mehreren Sprachen für das jeweilige End gekommen:

Frontend: -PHP -Phyton -ASP

Backend: -C -C++ -Java

Ihr könnt ja mal ein paar Vorschläge mit euren Meinungen schicken, welche Sprachen in welchen Kombinationen man für größere Website-Projekte gebrauchen kann. Auch wichtig wäre mir, was ich mich auch schon öfters gefragt habe, warum überhaupt eine Programmiersprachen-Unterscheidung zwischen Front- und Backend herrschen muss. Darüber bin ich mir auch noch nicht ganz im Klaren.

Also, ich bitte bitte bitte euch um eure Unterstützung für die Beantwortung meiner Fragen, weil es mir wirklich TOTAL wichtig wäre. Und es mir wirklich interessieren würde.

Ich danke euch allen schonmal im Voraus,

mit vielen Grüßen Ichfragewas

Internet, Webseite, programmieren, Meinung, Programmiersprache, Projekt, Vorschlag, Backend, Frontend
Warum funktioniert der Button Offene Zahlungen begleichen nicht?

Hallo!

Mein Button Offene Zahlungen begleichen übergibt nicht den UserNamen der in dem DropDown menü asgewählt wird und ich habe keine Ahnung warum das so ist?

<div class="col-md-4"> <!-- Adjust the column width to make it narrower -->

<!-- Filters Card -->

<div class="card mb-3">

<div class="card-header">

Filter

</div>

<div class="card-body">

<div class="mb-3">

<label for="userDropdown" class="form-label">Benutzer auswählen:</label>

<select class="form-select" id="userDropdown" onchange="filterOrders()">

<option value="All Users">Alle Benutzer</option>

@foreach($users as $user)

<option value="{{ $user }}">{{ $user }}</option>

@endforeach

</select>

</div>

<div class="form-check">

<input class="form-check-input" type="checkbox" value="" id="unpaidCheckbox" onchange="filterOrders()">

<label class="form-check-label" for="unpaidCheckbox">

Offene Zahlungen anzeigen

</label>

</div>

</div>

</div>

<!-- Total Owed and Pay Button Card -->

<div class="card mb-3">

<div class="card-header">

Offene Zahlungen

</div>

<div class="card-body text-center total-owed-box">

<h4>€<span id="totalOwed">0.00</span></h4>

<form method="POST" action="{{ route('admin.payOrders') }}" id="payForm" class="d-inline">

@csrf

<input type="hidden" name="user" id="hiddenUser">

<input type="hidden" name="unpaidOnly" id="hiddenUnpaidOnly">

<button type="button" class="btn btn-success" onclick="showPasswordModal('{{ route('admin.payOrders') }}')">Offene Zahlungen begleichen</button>

</form>

</div>

</div>

<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="passwordModalLabel">Passwort eingeben</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

</div>

<div class="modal-body">

<div class="mb-3">

<label for="passwordInput" class="form-label">Passwort</label>

<input type="password" class="form-control" id="passwordInput" required>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>

<button type="button" class="btn btn-primary" onclick="validatePassword()">Bestätigen</button>

</div>

</div>

</div>

</div>

</form>

function showPasswordModal(validateUrl, orderId, userName) {

const password = prompt('Please enter your password:');

if (password) {

validatePassword(validateUrl, orderId, password, userName);

}

}

function validatePassword(validateUrl, orderId, password, userName) {

const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

fetch(validateUrl, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'X-CSRF-TOKEN': token

},

body: JSON.stringify({

password: password,

orderId: orderId,

userName: userName

})

})

.then(response => response.json())

.then(data => {

if (data.valid) {

alert('Order marked as paid successfully.');

location.reload(); // Reload the page to update the order status

} else {

alert(data.message);

}

})

.catch(error => {

console.error('Error:', error);

alert('An error occurred. Please try again later.');

});

}

</script>

<!-- Bootstrap Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</body>

</html>

Könnt ihr mir vllt. helfen, DANKE!!!!

HTML, Webseite, JavaScript, Programmiersprache, Webentwicklung, Frontend
NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
Qwik JS (ähnlich React) stellt context nicht richtig bereit?

Ich habe eine website die, wenn ein User diese öffnet, einen state für den user erstellen soll. Dieser wird mit useStore erstellt und hält ein dict. Von diesem state wird mithilfe von useContextProiver ein context erstellt um ihn den untergordneten komponenten zugänglich zu machen. Die zugehörige contextId die mit createContextId erstellt wurde, wird exportiert. Das Ganze findet im Komponenten StateShare stat. In einem anderen komponenten displayTodo soll dann der state aufgegriffen werden mit useContext.
Beide Komponenten werden in der index.tsx nacheinander returned damit sie ausgeführt werden. Das sieht dann so aus:
export default component$(() => {
return (

    <>

    <StateShare />

    <DisplayTodo />

    </>

  );

});

Es kommt dann zu einem error sobald das Programm ausgeführt wird:
Actual value for useContext(todo-context) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

Diesen habe ich jetzt so verstanden, dass eben die stateShare Komponente nicht richtig ausgeführt wird bevor die DisplayTodo Komponente ausgeführt wird. Ich weiß aber nicht wieso... Ich bin sehr neu mit Qwik; Mache ich vielleicht etwas komplett falsch? Welches Konzept sollte ich mir da nochmal angucken?

HTML, Webseite, JavaScript, Framework, Programmiersprache, Webentwicklung, Frontend, React

Meistgelesene Beiträge zum Thema Frontend