TailwindCSS Höhe eines Containers in einem Container ignorieren lassen?

Heyy,
ich habe vor, das die Job Angebote unter dem Titel landen, der Titel an sich aber trotzdem noch von der höhe Zentriert ist. Kann mir wer dabei helfen?

<div class="flex 2xl:flex-row justify-start items-center w-full md:w-9/12 2xl:w-full 2xl:justify-center min-h-[38rem] h-[88vh] relative">
    <div class="space-y-8 xl:ml-4 2xl:min-w-[52rem] 2xl:w-[62rem]" id="left">
        <img class="w-6 xl:w-8 transition-all delay-100 ease-in-out" src="Vector.svg" alt="Fluxify Vector">
        <div class="space-y-3">
            <h2 class="font-syne font-medium text-[1.435rem] leading-[1.525rem] lg:text-[1.735rem] lg:leading-[1.825rem] 2xl:text-[1.835rem] 2xl:leading-[2.225rem] line-clamp-3 2xl:line-clamp-2 transition-all delay-100 ease-in-out">Deine Karriere bei uns - Bewerbe Dich noch heute!</h2>
            <p class="font-sura text-md leading-4 md:text-lg 2xl:text-lg text-[#8A8A8A] md:leading-5 2xl:leading-5 line-clamp-4">Bist du Softwareentwickler, Webseitenentwickler, Designer, Konzeptentwickler, Systemadministrator oder kannst du einen anderen Bereich der IT abdecken? Bewirb Dich bei uns - wir bieten Dir als Freelancer Kunden & Aufträge mit fairer Bezahlung.</p>
            <div class="">
                <x-jobs.offers/>
            </div>
        </div>
    </div>
    <div class="2xl:flex justify-end w-full hidden" id="right">
        <div class="select-none relative 2xl:left-44">
            <img class="rounded-[1.56rem] min-w-[28.5rem] 2xl:max-w-[38rem]" src="placeholder-01.jpg">
        </div>
    </div>
</div>

Hier ein Screenshot mit:

Und hier ohne + eine Einzeichnung, wo es hin sollte:

Ich bedanke mich herzlich über jede Hilfe!

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, Programmiersprache, Webdesign, Webentwicklung, Frontend
HTML/CSS/JS: Warum funktioniert meine bindDelete-Funktion nicht und wie kann ich die Preisangaben untereinander formatieren?

Hi, ich habe an einen Spezialisten eine Frage:

import Order from './Order.js';
import ArticleModel from './ArticleModel.js';

export default function UserOrderViewHandler(articleModel) {
  this.articleModel = articleModel;
  this.order = new Order(-1, null, [], 0, 0, 0, 0, 0, false);
}

UserOrderViewHandler.prototype.renderPage = function() {
  let body = document.getElementsByTagName('body')[0];
  body.innerHTML = "";
  body.innerHTML = `<div class="container">
    <sidebar>
      <h1 class="mb-4">Unser Sortiment</h1>
      <div id="articleList">
        <div class="row space-between">
          <div class="col-md-4 mb-4">
            <div class="card" data-index="0">
              <div>
                <h2>Salamipizza</h2>
                <p>Halbe hausgemachte Pizza mit Käse und regionaler Salami</p>
                <p><strong>6.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="1">
              <div>
                <h2>Hamburger</h2>
                <p>Burger mit österreichischem Rindfleisch, Ketchup und Senf</p>
                <p><strong>6.00 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="2">
              <div>
                <h2>Wochenmenü</h2>
                <p>Frittatensuppe --- Spaghetti Bolognese --- Muffin</p>
                <p><strong>12.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </sidebar>
    <sidebar>
      <h1 class="mb-4 extramargin">Bestellung</h1>
      <ul id="order"></ul>
      <div class="form-group">
        <label for="pickupTime">Gewünschte Abholzeit:</label>
        <input type="time" id="pickupTime" class="form-control">
      </div>
    </sidebar>
  </div>`;
}

UserOrderViewHandler.prototype.renderOrder = function() {
  let orderElement = document.getElementById('order');
  orderElement.innerHTML = "";
  orderElement.className = "list-group";

  let i = 0;

  for (let article of this.order.articleList) {
    let articleElement = document.createElement('li');
    articleElement.className = "list-group-item d-flex justify-content-between align-items-center";
    articleElement.innerHTML = `
      <div>1 x ${article.name} &emsp; &emsp; &emsp;${article.price.toFixed(2)} €</div>
      <button class="delBtn btn btn-danger btn-sm" data-index="${i}">Entfernen</button>
    `;
    orderElement.appendChild(articleElement);
    i++;
  }
}

UserOrderViewHandler.prototype.bindAddBtn = function() {
  let buttons = document.getElementsByClassName('addBtnClss');
  const that = this;

  for (let button of buttons) {
    button.addEventListener('click', function() {
      let index = this.closest('.card').getAttribute('data-index');
      let article = that.articleModel.getByIndex(index);

      if (article) {
        that.order.addArticle(article);
        that.renderOrder();
      }
    });
  }
}

UserOrderViewHandler.prototype.bindDeleteBtn = function() {
  let orderElement = document.getElementById('order');
  orderElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('delBtn')) {
      let index = event.target.getAttribute('data-index');
      that.order.deleteArticle(index);
      that.renderOrder();
    }
  });
}
  1. Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
  2. Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:

Danke für die Hilfe.

Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
Mit eigener Domain kostenlose Email Server möglich?

Ich versteh nicht ganz wie Email funktioniert im Hintergrund.

ich habe normalerweise ein Webhosting Paket wo alles schon mit einer Inklusiv Domain Verknüpft ist.

Man kann mit Oberfläche seine Postfächer anlegen, die Webmail Anwendung nutzen oder über die imap smtp ein/ausgangsserver die Mails in seiner Eigenen Email Anwendung anzeigen / verschicken usw.

Wenn ich einen VPS von Ionos für 1€ miete müsste ich das selber machen ?

dann gehen die keine ahnung 5gb nicht nur für Apache/Nginx das ich installieren muss drauf und die Website an sich sondern

das muss ich auch teilen mit irgendeiner email software.

Und würde es auch so gehen das ich mir eine Domain miete für 0.5ct 12 Monate bei Strato.

Meine NextJs Webapp bei Vercel Deploy mit dieser Domain kann man ja einrichten wenn man irgendwas an den Dns einstellungen macht, sollte nicht schwer sein.
Und dann als extra irgendwo kostenlos mit

dieser domain irgendwo postfächer erstellt auch wenn es nur 1gb sind.

zb info@mustermann.de , und dann bei web.de umsonst gehostet.

Website umsonst bei vercel

Und die cents strato Domain zeigt auf vercel.

Ich will versuchen die kosten zu minimieren da normale Pakete Overkill für mich sind und ich so Freunden/Bekannten auch helfen kann einzusteigen.

Es ist auch attraktiv wenn ich Kunden habe die selber neu selbstständig sind und wenig geld haben.

Besser einen armen Kunden die Seite erstellen ohne Monatliche Kosten bis auf Domain 1 cent / 1 jahr danach 1€ statt garkeinen kunden weil er nicht 6€ pro monat ausgeben will für hosting domain ssl email.

Wenn es mit Wordpress sein soll kommt man nicht drumherum dann kommen auch noch 15€ für Plugins und Page Builder dazu.

Schon sind wir bei 250€ Im Jahr

Server, Homepage, Linux, E-Mail, HTML, IT, Webseite, WordPress, JavaScript, Informatik, PHP, Webentwicklung, Webhosting, React, github, Angular

Meistgelesene Fragen zum Thema Homepage