Beiträge von ny_unity

  • Bilder verschiedener Größen gleich darstellen

    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

  • Bilder verschiedener Größen gleich darstellen

    ich habe jetzt:

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

  • Bilder verschiedener Größen gleich darstellen

    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:

    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

  • Bilder verschiedener Größen gleich darstellen

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

    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.

  • Bilder verschiedener Größen gleich darstellen

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

  • Bilder verschiedener Größen gleich darstellen

    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.

  • Bilder verschiedener Größen gleich darstellen

    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:

    CSS:

    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

  • Rahmen um die cols in einer row, auch bei Umbruch

    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:

    html

  • Rahmen um die cols in einer row, auch bei Umbruch

    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?

  • Rahmen um die cols in einer row, auch bei Umbruch

    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

    CSS::

  • Rahmen um die cols in einer row, auch bei Umbruch

    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

    CSS:

    Javascript:

    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

  • Rahmen um die cols in einer row, auch bei Umbruch

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

  • Rahmen um die cols in einer row, auch bei Umbruch

    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.

  • Rahmen um die cols in einer row, auch bei Umbruch

    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