Hi Leute, ich versuche in CSS gerade eine Grid-Galerie zu erstellen, jedoch stoße ich ständig auf das Problem, dass die Bilder einen leeren Bereich lassen, wenn ein Bild länger ist als das andere. Wie könnte ich das angehen, dass sich die Bilder immer richtig anpassen (Es können unterschiedlich viele sein + die Höhe ist nicht von mir vorgegeben) Habt ihr eine Idee wie das funktionieren könnte?

CSS Grid ohne Leer-Bereiche?

Hi Leute,

ich versuche in CSS gerade eine Grid-Galerie zu erstellen, jedoch stoße ich ständig auf das Problem, dass die Bilder einen leeren Bereich lassen, wenn ein Bild länger ist als das andere.

Bild zum Beitrag

Wie könnte ich das angehen, dass sich die Bilder immer richtig anpassen (Es können unterschiedlich viele sein + die Höhe ist nicht von mir vorgegeben)

Bild zum Beitrag

Habt ihr eine Idee wie das funktionieren könnte?

28.11.2022, 12:03

Mit Float sieht das so aus:

1 Antwort

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Webentwicklung

28.11.2022, 12:38

Suche im Internet mal nach Masonry-Layouts. Hier findest du schon eine gute Anleitung als Start:

https://kulturbanause.de/blog/responsive-masonry-layout-mit-css/

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Ähnliche Beiträge

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zum Beitrag

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zum Beitrag

Hosting bei Auftragsprogrammierung von Webseiten?

Hallo,

ich spiele mit dem Gedanken überein Kleingewerbe oder Freelancertätigkeit Webseiten für Privat- oder Geschäftskunden zu programmieren.

Also das reine Frontend.

Wie läuft sowas in der Regel mit dem Hosting der Webseite.

Könnte ich verlangen, dass sich der Kunde selber um Domain, Webspace, Impressum , Darenschutz usw. (ggf. Backend) selber kümmert.

oder ist das direkt unprofessionell und von Erfolglosigkeit gekrönt?

Also weil der Kunde so gar keine Ahnung hat, ich aber ja nur 'ein wenig', weil ich ja hauptsächlich nur das Frontend bieten möchte? Aber er möchte vielleicht alles aus einer Hand, obwohl Frontend ja gar nichts unbedingt für Backend zuständig ist.

Ich meine, ich kenne ja die Grenzen und Zuständigkeiten unter Umständen besser als der Kunde, kann aber nur das bieten womit ich mich am besten auskenne.

Hoffe ihr versteht was ich meine😉

...zum Beitrag

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zum Beitrag

Frontend vs Backend?

Was findest du schwerer?

...zum Beitrag

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zum Beitrag

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

...zum Beitrag

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zum Beitrag

Direkt TypeScript lernen?

…oder zuerst Js dann ts

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zum Beitrag

Wie kann ich bei html einen springenden Button machen?

Ich möchte das wenn man mit dem Mauszeiger über den button geht, das der button sich dann verschiebt sodass man ihn nie drücken kann... also wie so eine art spiel... kann mir jemand den code schreiben ? Danke im vorraus.

...zum Beitrag

"textarea" html Feld mitwachsen?

<textarea class="form-control" name="Adresse">{if $pdf}{$values.Adresse|nl2br}{/if}</textarea>

Kann man dieses Feld so schreiben, dass es mitwächst. Das KEIN Scrollbalken kommt, sondern wie schon gesagt mitwächst

...zum Beitrag

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen