bei mir war JavaScript aus… aber Bilder bleiben verzerrt….
Beiträge von ny_unity
-
-
Auf meinem iPhone geht er nicht auf, bei meiner Freundin ja. Geht er bei dir auf?
wie sehen die Bilder auf deinem Telefon aus? Bei mir sind die verzerrt - auf PC ging es -
danke, habs angepasst und hochgeladen.... was aber jetzt irgendwie nicht mehr geht ist im safari die geschichte mit dem menü button... habe extra
Code<script> document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {}); </script>
das ist mein nav
Code
Alles anzeigen<nav id="header-nav"> <!-- DESKTOP-NAVIGATION --> <div class="container" id="desktop-nav"> <div class="row"> <div class="col-6"> <a href="index.html" class="logo-link"> <img src="./src/img/as_logo.webp" alt="Logo von DDM André Schneider"> </a> <ul> <li class="active"><a href="index.html">Startseite</a></li> <li><a href="leistungen.html">Leistungen</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="referenzen.html">Referenzen</a></li> <li><a href="impressum.html">Impressum</a></li> </ul> </div> </div> </div> <!-- MOBILE-NAVIGATION --> <div class="container" id="mobile-nav"> <div class="row"> <div class="col-6"> <a href="index.html" class="logo-link"> <img src="./src/img/as_logo.webp" alt="Logo von DDM André Schneider"> </a> <div class="clearfix" id="mobile-nav-dropdown"> <div id="mobile-nav-button"><span>≡</span></div> <div class="clearfix" id="mobile-nav-content"> <ul> <li class="active"><a href="index.html">Startseite</a></li> <li><a href="leistungen.html">Leistungen</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="referenzen.html">Referenzen</a></li> <li><a href="impressum.html">Impressum</a></li> </ul> </div> </div> </div> </div> </div> </nav>
-
ich habe jetzt:
Code
Alles anzeigen.flex-row { display: flex; flex-flow: row wrap; width: 95%; justify-content: space-between; } .flex-row img { min-width: 1px; } .flex-row img:nth-child(2) { margin-left: 25px } @media (max-width: 768px) { .flex-row { flex-direction: column; } .flex-row img { margin-left: auto; margin-right: auto; } }
aber bei 768px, also wenn flex-direction column ist, sind die bilder wieder in voller größe, greift dann das js nicht?
-
jau, das sieht wirklich gut aus. Aber wie bekomme ich jetzt einen Abstand zwischen die Bilder und bei max-width 768px soll es wie ab dem 5. Bild in Spalten, statt in einer Zeile dargestelt werden. flexdirection column bei @media mit max-width 768px?
-
hast du ein beispiel, wie die größe des flex berechnet werden kann?
-
Hier sind die Referenzen und die Änderungen von dir sind eingepflegt, was ich aber jetzt fix gemacht habe, ist das die Bilder maximal 600px hoch sind, weil die gerade in voller Auflösung da waren... Kann ich die irgendwie an die Größe des containers richten?
-
ja danke, das hab ich geschafft...
kann ich im container selbst die rows als flex darstellen und dann mit justify oder muss ich komplett auf flex umstellen und alle als flexboxen darstellen?
habe es aktuell so:
Code
Alles anzeigen<article class="referenz-bilder"> <div class="container"> <div class="row"> <div class="col-6"> <h2 id=dacharbeiten-referenz>Dacharbeiten und Neubau</h2> <div class="col-3"> <img src="./src/img/dacharbeiten_1.webp" id="bild1" alt="Sanierung und Neubau"> </div> <div class="col-3"> <img src="./src/img/dacharbeiten_2.webp" id="bild2" alt="Sanierung und Neubau"> </div> </div> </div> <div class="row"> <div class="col-6"> <h2 id=flachdachabdichtungen-referenz>Flachdachabdichtungen</h2> <div class="col-3"> <img src="./src/img/flachdachabdichtungen_1.webp" id="bild3" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/flachdachabdichtungen_2.webp" id="bild4" alt="Flachdachabdichtungen_2"> </div> </div> </div> <div class="row"> <div class="col-6"> <h2 id=dachklempnerei-referenz>Dachklempnerei</h2> <div class="col-3"> <img src="./src/img/dachklempnerei_1.webp" id="bild5" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_2.webp" id="bild6" alt="Flachdachabdichtungen_2"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_7.webp" id="bild7" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_4.webp" id="bild8" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_3.webp" id="bild9" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_6.webp" id="bild10" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_5.webp" id="bild11" alt="Flachdachabdichtungen_1"> </div> </div> </div> </div> </article>
und im CSS
Code.referenz-bilder > .container > .row:nth-child(1), .referenz-bilder > .container > .row:nth-child(2) { display: flex; justify-content: space-between; }
aber das klappt nicht
-
Das kannst Du dann mit Flexlayout, für den Container display: flex; und justify-content: je nachdem, wie Du den freien Raum verteilen möchtest.
https://css-tricks.com/snippets/css/a…xbox-properties
CSS, das Du mit Javascript setzt, hat immer die höchste Priorität. Setze statt des Attributes height die Höhe unter style:
document.getElementById("bild2").style.height = bild2_height + 'px';
danke, das mit document.getElementById("bild2").style.height = bild2_height + 'px' klappt gut und ich muss für die einzelnen bilder das CSS nicht ändern.
ich möchte noch einen eventlistener erstellen wenn das window-fesnter die größe ändert...
Codefunction reportWindowSize() { var bild2_height_resized = document.getElementById("bild1").height; var bild4_height_resized = document.getElementById("bild3").height; document.getElementById("bild2").style.height = bild2_height_resized + 'px' document.getElementById("bild4").style.height = bild4_height_resized + 'px' } window.onresize = reportWindowSize;
klappt gut.... jetzt probiere ich mich an der Ausrichtung.
-
danke für deinen Vorschlag, aber das ist nicht ganz was ich suchte....
ich habe jetzt per js:
Codevar bild2_height = document.getElementById("bild1").height; document.getElementById("bild2").height = bild2_height;
gemacht, dann wird die Größe von Bild2 von Bild1 genommen. Das ist soweit okay, aber wie kann ich Bild 2 jetzt aber zentrieren? Es sieht halt jetzt so aus:
html-seminar.de/woltlab/attachment/3141/
das rechte bild, also das zweite sollte dann weiter nach rechts, damit es ordentlich aussieht.
Kann ich das CSS mit dem JS überschreiben? Ich hatte voreingestellt im css, dass height auf auto steht, dann greift der js code nicht mehr...
-
Sempervivum danke für deine Antwort, sorry das ich jetzt erst antworte.
PS: Du schriebst:
Unter "Dachklempnerei" finde ich jedoch 7 Bilder. Möchtest Du diese jetzt in zwei Spalten anordnen, so dass jeweils zwei nebeneinander stehen?
es sind ja immer zwei nebeneinander, hab es ja mit Spalten gelöst. Es geht wie in Beitrag #2 darum, die Bilder immer gleich groß darzustellen. Du meinst, dass ich die Bilder in der Größe ändern soll. Okay, das kann ich machen, ich dachte nur das es über HTML / CSS oder JS machbar wäre, die Größe des größeren Bildes so anzupassen, dass es die Größe des benachbarten Bildes hat.
-
Hallo zusammen,
ich habe eine Seite mit Referenzen, die natürlich Bilder von der fertigen Arbeit enthalten. Die Bilder sind aber mal im Hoch- und mal im Querformat., also unterschiedliche Breite und Höhe.
Die Seite ist kategorisiert in einzelne Themenbereiche. Der einzelne Themenbereich wiederum hat jeweils zwei Bilder nebeneinander unter sich.
HTML:
Code
Alles anzeigen<!-- REFERENZEN --> <section id="referenz-bereich"> <div class="container"> <div class="row"> <div class="col-6"> <header class="intro-container"> <h1>Referenzen</h1> <p> Wir möchten Ihnen hier fortlaufend und aktualisiert gern einige Arbeiten von unserem angebotenen Leistungsspektrum präsentieren. </p> <p> Zögern Sie nicht uns anzusprechen, wir sind uns sicher, Ihnen bei Ihren Bauvorhaben erfolgreich unterstützen zu können. </p> </header> </div> </div> <article class="referenz-bilder"> <div class="container"> <div class="row"> <div class="col-6"> <h2 id=dacharbeiten-referenz>Dacharbeiten und Neubau</h2> <div class="col-3"> <img src="./src/img/dacharbeiten_1.webp" alt="Sanierung und Neubau"> </div> <div class="col-3"> <img src="./src/img/dacharbeiten_2.webp" alt="Sanierung und Neubau"> </div> </div> </div> <div class="row"> <div class="col-6"> <h2 id=flachdachabdichtungen-referenz>Flachdachabdichtungen</h2> <div class="col-3"> <img src="./src/img/flachdachabdichtungen_1.webp" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/flachdachabdichtungen_2.webp" alt="Flachdachabdichtungen_2"> </div> </div> </div> <div class="row"> <div class="col-6"> <h2 id=dachklempnerei-referenz>Dachklempnerei</h2> <div class="col-3"> <img src="./src/img/dachklempnerei_1.webp" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_2.webp" alt="Flachdachabdichtungen_2"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_3.webp" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_4.webp" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_5.webp" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_6.webp" alt="Flachdachabdichtungen_1"> </div> <div class="col-3"> <img src="./src/img/dachklempnerei_7.webp" alt="Flachdachabdichtungen_1"> </div> </div> </div> </div> </article> </div> </section>
CSS:
Code
Alles anzeigen/* === REFRENZEN === */ #referenz-bereich { padding-top: 1rem; } @media (max-width: 1024px) { #referenz-bereich { padding-bottom: 4rem; } } @media (max-width: 866px) { #referenz-bereich { padding-bottom: 5rem; } } @media (max-width: 768px) { #referenz-bereich { padding-bottom: 0; } } #dacharbeiten-referenz, #dachklempnerei-referenz, #flachdachabdichtungen-referenz { text-align: center; } #referenz-bereich img { display: inline-block; width: auto; height: auto; max-width: 100%; margin-left: auto; margin-right: auto; max-height: 6000px; } /* === GRID-SYSTEM === */ .container { width: 95%; margin-left: auto; margin-right: auto; } .row::after { content: ""; clear: both; display: block; } [class*='col-'] { float: left; min-height: 1px; padding: .8rem; } .col-1 { width: 16.666%; } .col-2 { width: 33.333%; } .col-3 { width: 50%; } .col-4 { width: 66.666%; } .col-6 { width: 100%; } @media (max-width: 1024px) { .col-1 { width: 33.333%; } } @media (max-width: 768px) { .col-1 { width: 50%; } .col-2 { width: 100%; } .col-3 { width: 100%; } .col-4 { width: 100%; } } @media (max-width: 480px) { .col-1 { width: 100%; } .col-2 { width: 100%; } .col-3 { width: 100%; } .col-4 { width: 100%; } }
Kann ich die Bilder noch irgendwie auf eine Höhe / Breite bringen? Wenn ich die Bilder im Hochformat auf die Höhe der im Querformat ändere, dann passt das zwar, aber dann ist zu viel Platz nach außen, das sieht dann auch blöd aus...
Hat jemand einen Lösungsansatz für mich?
Danke,
Erik
-
danke, ich habe es jetzt mal so gelöst, da sich alles immer wiederholt, sieht das ganz gut aus und ist logisch, also für mich. aber ich schau mir das mit dem dispaly:contents aber mal an, aber für die Vervollständigung im Thread:
CSS:
Code
Alles anzeigen/* ==== GENERELLES === */ .clearfix::after { content: ""; display: block; clear: both; } /* ==== GLOBAL === */ * { box-sizing: border-box; } body { margin: 0; font-family: 'Exo2', 'Helvetica Neue', 'Arial', sans-serif; font-size: 16px; background-color: #E4E8F1; color: #000000; } .grid-header, .grid-summe-first, .grid-summe { background-color: #9FA2A9; border-color: #000000; border-style: solid; border-width: 1px 1px 0px 0px; text-align: center; font-weight: bold; } .row_first { font-weight: bold; color: #ffffff; text-align: right; background-color: #004088; border-color: #000000; border-style: solid; border-width: 1px 1px 0px 1px; } .row_gerade { background-color: #ffffff; text-align: right; border-color: #000000; border-style: solid; border-width: 1px 1px 0px 0px; } .row_ungerade { background-color: #6E92BB; text-align: right; border-color: #000000; border-style: solid; border-width: 1px 1px 0px 0px; } .grid-summe { text-align: right; border-color: #000000; border-style: solid; border-width: 1px 1px 1px 0px; } .grid-summe-first { border-color: #000000; border-style: solid; border-width: 0px 1px 1px 1px; } .grid-header:first-child, .grid-summe-first:first-child, .grid-summe:first-child { border-width: 1px 1px 0px 1px; } /* Farben Hintergrund: #E4E8F1; Font-Color: #000000; Blau: #004088; Orange: #ef7900; hellblau: #6E92BB aktiv(orange): #fcbe00; hintergrund tabellenüberschrift: #9FA2A9; */ /* === Navigationsleiste === */ .navbar { background-color: black; } .dropdown-menu { background-color: black; } a.dropdown-item { color: #ef7900; } .navbar-light .navbar-nav .nav-link { color: #ef7900; } .navbar-light .navbar-nav .nav-link:hover { color: white; } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: #ef7900; } .navbar-toggler { background-color: white; } .dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; } /* === Dashboard für fehlende Unterlagen === */ #dashboard-start-first { margin: 2rem; display: grid; grid-template-columns: repeat(4, auto); column-gap: 2.5rem; align-items: start; width: 95%; } @media (max-width: 1400px) { #dashboard-start-first { display: grid; grid-template-columns: repeat(3, auto); } } @media (max-width: 1200px) { #dashboard-start-first { display: grid; grid-template-columns: repeat(2, auto); } } @media (max-width: 900px) { #dashboard-start-first { display: grid; grid-template-columns: repeat(1, auto); } } #fehlende-unterlagen { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(9, auto); width: 100%; } #auftragsstatus-kurz { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(3, auto); width: 100%; } #geburtstag-intern { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(3, auto); width: 100%; } #wichtige-links { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(1, auto); width: 100%; }
html
Code
Alles anzeigen<main id="startseite"> <div class="container-fluid" id="dashboard-start-first"> <div id="fehlende-unterlagen"> <div class="grid-header">Team/Disponent</div> <div class="grid-header">Jahresunt.</div> <div class="grid-header">Vorsorge</div> <div class="grid-header">APBP</div> <div class="grid-header">Checkliste</div> <div class="grid-header">HWK</div> <div class="grid-header">ausl. AÜV</div> <div class="grid-header">fehl. AÜV</div> <div class="grid-header">∑</div> <div class="row_first">BF</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_first">BF</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_first">BF</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_first">BF</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_first">BF</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_first">BF</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_ungerade">0</div> <div class="row_first">BF</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="row_gerade">0</div> <div class="grid-summe-first">Gesamt</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> <div class="grid-summe">0</div> </div> <div id="auftragsstatus-kurz"> <div class="grid-header">Anwesenheit</div> <div class="grid-header">Anzahl</div> <div class="grid-header">Anteil</div> <div class="row_gerade">Krank</div> <div class="row_gerade">5</div> <div class="row_gerade">3%</div> <div class="row_ungerade">Produktiv</div> <div class="row_ungerade">100</div> <div class="row_ungerade">97%</div> <div class="grid-summe-first">Gesamt</div> <div class="grid-summe">103</div> <div class="grid-summe">100%</div> </div> <div id="geburtstag-intern"> <div class="grid-header">Mitarbeiter</div> <div class="grid-header">am</div> <div class="grid-header">wird</div> <div class="row_gerade">Max Mustermann</div> <div class="row_gerade">29.03.</div> <div class="row_gerade">33</div> <div class="row_ungerade">Marlene Musterfrau</div> <div class="row_ungerade">10.04.</div> <div class="row_ungerade">29</div> </div> <div id="wichtige-links"> <div class="grid-header">Links</div> <div class="row_gerade">Google</div> <div class="row_ungerade">Website</div> <div class="row_gerade">Wetter</div> <div class="row_ungerade">YouTube</div> </div> </div> </main>
-
die Entwicklertools kenne ich ja, danke, damit arbeite ich auch. Ich wäre aber jetzt nicht darauf gekommen, wie ich die Zeilen kleiner machen kann, außer mit height.
Kannst du mir einen Tipp => keinen Lösungsvorschlag => nennen, wie ich jetzt das hinbekomme, dass die erste Spalte und erste Zeile in allen grids anders farbig ist?
Muss ich mit Klassen arbeiten, oder gibts einen Trick?
-
hey, klasse, das sieht schon ganz gut aus, aber ich habe im ersten Container 4 Spalten und in jeder Spalte ist ein weiteres div was wieder ein grid ist mit unterschiedlichen Spalten, klappt gut, aber, bei den anderen werden die Zeilen so derart groß, das es nicht schön aussieht:
row-gap: 0; hat nichts gebracht
HTML
Code
Alles anzeigen<main id="startseite"> <div class="container-fluid" id="dashboard-start-first"> <div id="fehlende-unterlagen"> <div>Team/Disponent</div> <div>Jahresunt.</div> <div>Vorsorge</div> <div>APBP</div> <div>Checkliste</div> <div>HWK</div> <div>ausl. AÜV</div> <div>fehl. AÜV</div> <div>∑</div> <div>BF</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>TEAM4</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>TEAM3</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>TEAM2</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>ST</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>WS</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>XX</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> <div>0</div> </div> <div id="auftragsstatus-kurz"> <div>Anwesenheit</div> <div>Anzahl</div> <div>Anteil</div> <div>Krank</div> <div>5</div> <div>3%</div> <div>Produktiv</div> <div>100</div> <div>97%</div> <div>Gesamt</div> <div>103</div> <div>100%</div> </div> <div id="geburtstag-intern"> <div>Mitarbeiter</div> <div>am</div> <div>wird</div> <div>Max Mustermann</div> <div>29.03.</div> <div>33</div> <div>Marlene Musterfrau</div> <div>10.04.</div> <div>29</div> </div> <div id="wichtige-links"> <div>Links</div> <div>Google</div> <div>Website</div> <div>Wetter</div> <div>YouTube</div> </div> </div> </main>
CSS::
Code
Alles anzeigen/* === Dashboard für fehlende Unterlagen === */ #dashboard-start-first { margin: 2rem; display: grid; grid-template-columns: repeat(4, auto); column-gap: 2.5rem; width: 95%; row-gap: 0; } #fehlende-unterlagen { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(9, auto); width: 100%; } #auftragsstatus-kurz { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(3, auto); row-gap: 0; width: 100%; } #geburtstag-intern { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(3, auto); width: 100%; } #wichtige-links { margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(1, auto); width: 100%; }
-
also, ich hab jetzt mal auf Grid umgebaut, das die col-größen jetzt von bootstrap kommen ist erstmal dahingestellt, wird ja au anderem Wege genauso gehen.
HTML
Code
Alles anzeigen<main id="startseite"> <div class="container-fluid"> <div class="row" id="dashboard-start-first"> <div clas="col-6" id="fehlende-unterlagen"> <div class="row grid-header"> <div class="col"> <span>Team/Disponent</span> </div> <div class="col"> Jahresunt. </div> <div class="col"> Vorsorge </div> <div class="col"> APBP </div> <div class="col"> Checkliste </div> <div class="col"> HWK </div> <div class="col"> ausl. AüV </div> <div class="col"> fehl. AüV </div> <div class="col"> ∑ </div> </div> <div class="row grid-row"> <div class="col"> <span>BF</span> </div> <div class="col"> 0 </div> <div class="col"> 0 </div> <div class="col"> 0 </div> <div class="col"> 0 </div> <div class="col"> 0 </div> <div class="col"> 0 </div> <div class="col"> 0 </div> <div class="col"> 0 </div> </div> </div> <div clas="col-2" id="auftragsstatus-kurz"> <div class="row grid-header"> <div class="col"> Anwesenheit </div> <div class="col"> Anzahl </div> <div class="col"> Prozent </div> </div> </div> <div clas="col-2" id="geburtstag-intern"> <div class="row grid-header"> <div class="col"> Mitarbeiter </div> <div class="col"> am </div> <div class="col"> wird </div> </div> </div> <div clas="col-2" id="wichtige-links"> <div class="row grid-header"> <div class="col"> Link </div> </div> </div> </div> </div> </main>
CSS:
Code
Alles anzeigen/* ==== GENERELLES === */ .clearfix::after { content: ""; display: block; clear: both; } /* ==== GLOBAL === */ * { box-sizing: border-box; } body { margin: 0; font-family: 'Exo2', 'Helvetica Neue', 'Arial', sans-serif; font-size: 16px; background-color: #E4E8F1; color: #000000; } .grid-header { background-color: #9FA2A9; border-color: #000000; border-style: solid; border-width: 1px; } .grid-header > .col { display: flex; align-items: center; justify-content: center; border-style: solid; border-color: #000000; border-width: 0px 1px 0px 0px; } .grid-header > .col:last-child { border-style: solid; border-color: #000000; border-width: 0px; } .grid-row { background-color: #ffffff; border-color: #000000; border-style: solid; border-width: 0px 1px 1px 1px; } .grid-row > .col { display: flex; align-items: center; justify-content: center; border-style: solid; border-color: #000000; border-width: 0px 1px 0px 0px; } .grid-row > .col:last-child { border-style: solid; border-color: #000000; border-width: 0px; } /* Farben Hintergrund: #E4E8F1; Font-Color: #000000; Blau: #004088; Orange: #ef7900; hellblau: #6E92BB aktiv(orange): #fcbe00; hintergrund tabellenüberschrift: #9FA2A9; */ /* === Navigationsleiste === */ .navbar { background-color: black; } .dropdown-menu { background-color: black; } a.dropdown-item { color: #ef7900; } .navbar-light .navbar-nav .nav-link { color: #ef7900; } .navbar-light .navbar-nav .nav-link:hover { color: white; } .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: #ef7900; } .navbar-toggler { background-color: white; } .dropdown-submenu { position: relative; } .dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-left: .1rem; margin-right: .1rem; } /* === Dashboard für fehlende Unterlagen === */ #dashboard-start-first { margin: 2rem; } #fehlende-unterlagen { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; } #auftragsstatus-kurz { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; } #geburtstag-intern { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; } #wichtige-links { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }
Javascript:
Code
Alles anzeigenconst spalte1AufGroesseBringen = function() { let spalte_1_header = document.querySelector('#fehlende-unterlagen > div.row.grid-header > div:nth-child(1) > span'); let spalte_1_header_style = getComputedStyle(spalte_1_header); let spalte_1_header_width = spalte_1_header_style.width; let spalte_1_row = document.querySelector('#fehlende-unterlagen > div.row.grid-row > div:nth-child(1) > span'); let spalte_1_row_style = getComputedStyle(spalte_1_row); let spalte_1_row_width = spalte_1_row_style.width; //Erhöung der Spaltenbreite1 um width1 - width2 let spalte_1_row_width_adding = parseInt(spalte_1_header_width) + 6 - parseInt(spalte_1_row_width) + parseInt(spalte_1_row_width); spalte_1_row.setAttribute('style', 'width: ' + spalte_1_row_width_adding + 'px'); }; window.onLoad = spalte1AufGroesseBringen(); window.addEventListener('resize', spalte1AufGroesseBringen());
Bin ich auf dem richtigen Weg, oder baue ich gerade etwas umständlich, wie ich Spalte 1 aus Reihe 2 wie auf die Größe von Reihe 1 bekomme?
MfG
Erik
-
Das ist die natürliche Konsequenz, wenn fertiger Code ohne Erklärungen oder Kommentare gepostet wird: Die Probleme gehen los, wenn der Code erweitert oder an andere Gegebenheiten angepasst werden soll. Es hat schon seinen Grund, dass in den Forenregeln steht, dass das nicht erwünscht ist:
Regeln „Hilfestellung im Forum“
Wie war das noch mit dem Hungrigen, dem man einen Fisch schenkt?
Das fischen muss ich mir wohl selbst beibringen
-
Die Variante von MrMurpy habe ich jetzt mal um eine Zeile erweitert, das sieht zwar gut aus, aber beim Umbruch passt nichts mehr und für mich ist es auch nicht einfach nachvollziehbar, wo dann der zweite Mitarbeiter, also Wert für Spalte Disponent/Team hinkommt. Es wird ja irgendwann automatisch eingefügt, auf Basis der Ergebnisse aus dem SQL. Da ist mir das Grid dann glaube lieber, das teste ich jetzt mal.
-
danke für Eure Hilfe und Beispiele. Ich schau mir das in Ruhe an und möchte verstehen was MrMurphy das "gecoded" hat. Das wird bisschen dauern
und danke für die netten Worte Sempervivum
-
hmm, schau mal, ist die herangehensweise so okay? Sollte ich was ändern?
Ich habe lange gefriemelt, wie ich die Größe der Spalten berechnen kann, habe es dann so gelöst. auf Basis des Textes...
Was mir nicht ganz gefällt ist, dass der Rahmen der divs nicht durchgängig ist. Das hat sich aber erst durch align-self: flex-end; geändert, weil ich wollte die Spaltenüberschriften unten stehen haben, erst standen die oben....
Kannst gern meckern wenn ich sinnlose sachen mache, oder komplett falsch das ganze aufbaue...
HTML
Spoiler anzeigen
Code
Alles anzeigen<div class="flex-container" id="dashboard-start-first"> <div class="flex-container"> <article id="fehlende-unterlagen"> <div id="fehlende-unterlagen-header"> <div class="grid-header spalte1"> Disponent/Team </div> <div class="grid-header spalte2"> Jahresun. </div> <div class="grid-header spalte3"> Vorsorge </div> <div class="grid-header spalte4"> APBP </div> <div class="grid-header spalte5"> Chechkliste </div> <div class="grid-header spalte6"> HWK </div> <div class="grid-header spalte7"> ausl. AÜV </div> <div class="grid-header spalte8"> fehl. AÜV </div> <div class="grid-header spalte9"> ∑ </div> </div> <div id="fehlende-unterlagen-grid"> <div class="grid-row spalte1"> BF </div> <div class="grid-row spalte2"> 0 </div> <div class="grid-row spalte3"> 0 </div> <div class="grid-row spalte4"> 0 </div> <div class="grid-row spalte5"> 0 </div> <div class="grid-row spalte6"> 0 </div> <div class="grid-row spalte7"> 0 </div> <div class="grid-row spalte8"> 0 </div> <div class="grid-row spalte9"> 0 </div> </div> </article> </div> </div>
CSS:
Spoiler anzeigen
Code
Alles anzeigen* { box-sizing: border-box; } body { margin: 0; font-family: 'Exo2', 'Helvetica Neue', 'Arial', sans-serif; font-size: 16px; background-color: #E4E8F1; color: #000000; } .flex-container { display: flex; flex-wrap: wrap; background-color: #E4E8F1; } .flex-container > div { margin: 10px; padding: 20px; } .dashboard-start { margin-top: 2rem; } #dashboard-start-first { justify-content: space-around; } #fehlende-unterlagen-header { display: flex; flex-wrap: wrap; align-items: stretch; border-color: #000000; background-color: #9FA2A9; border-style: solid; border-width: 1px; } #fehlende-unterlagen-grid { display: flex; flex-wrap: wrap; align-items: stretch; border-color: #000000; border-style: solid; border-width: 0px 1px 1px 1px; width: 100%; text-align: end; } .grid-header { font-weight: bold; text-align: center; align-self: flex-end; border-style: solid; border-width: 0px 1px 0px 0px; border-color: #000000; } .grid-header:last-child { border: none; } .grid-row { font-weight: normal; text-align: right; border-style: solid; border-width: 0px 1px 0px 0px; border-color: #000000; } .grid-row:last-child { border: none; } .spalte1 { width: 23%; } .spalte2 { width: 13%; } .spalte3 { width: 13%; } .spalte4 { width: 8%; } .spalte5 { width: 16%; } .spalte6 { width: 8%; } .spalte7 { width: 8%; } .spalte8 { width: 7%; } .spalte9 { width: 4%; }