Beiträge von ny_unity

ny_unity · 16. Juli 2021

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

<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>&equiv;</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>

Alles anzeigen

ny_unity · 16. Juli 2021

ich habe jetzt:

Code

.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;
  }
}

Alles anzeigen

aber bei 768px, also wenn flex-direction column ist, sind die bilder wieder in voller größe, greift dann das js nicht?

ny_unity · 16. Juli 2021

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?

ny_unity · 16. Juli 2021

hast du ein beispiel, wie die größe des flex berechnet werden kann?

ny_unity · 16. Juli 2021

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?

ny_unity · 16. Juli 2021

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

<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>

Alles anzeigen

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

ny_unity · 16. Juli 2021

Zitat von Sempervivum

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/snippet…exbox/#flexbox-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...

Code

function 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.

ny_unity · 16. Juli 2021

danke für deinen Vorschlag, aber das ist nicht ganz was ich suchte....

ich habe jetzt per js:

Code

var 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...

ny_unity · 8. Juli 2021

Sempervivum danke für deine Antwort, sorry das ich jetzt erst antworte.

Zitat von Sempervivum

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.

ny_unity · 1. Juli 2021

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

<!-- 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>

Alles anzeigen

CSS:

Code

/* === 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%; }
}

Alles anzeigen

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

ny_unity · 16. März 2021

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

/* ==== 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%;
}

Alles anzeigen

html

Code

<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">&sum;</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>

Alles anzeigen

ny_unity · 16. März 2021

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?

ny_unity · 16. März 2021

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

<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>&sum;</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>

Alles anzeigen

CSS::

Code

/* === 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%;
}

Alles anzeigen

ny_unity · 16. März 2021

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

<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">
								&sum;
							</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>

Alles anzeigen

CSS:

Code

/* ==== 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;
}

Alles anzeigen

Javascript:

Code

const 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());

Alles anzeigen

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

ny_unity · 16. März 2021

Zitat von Sempervivum

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

ny_unity · 16. März 2021

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.

ny_unity · 16. März 2021

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

ny_unity · 11. März 2021

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

CSS:

Spoiler anzeigen

ny_unity · 11. März 2021

danke, ich teste mich mal ran

ny_unity · 11. März 2021

gute Frage... für mich als Anfänger soll es eigentlich mit als Hilfe dienen, gerade was die Navigationsleiste betrifft, diese auch responsive zu machen...

Beiträge von ny_unity

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Bilder verschiedener Größen gleich darstellen

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch

Rahmen um die cols in einer row, auch bei Umbruch