Anker funktioniert nicht richtig
envoy
Anker funktioniert nicht richtig
envoy
Rolf B
Gunnar Bittersmann
Matthias ScharwiesHallo,
ich versuche gerade einfache Verknüpfungen zwischen verschiedenen Member Inhalten zu setzten. Es funktioniert aber nicht sauber, ich komme zwar zum richtigen Member, z.B. Member2, wenn ich aber dann über die thumb imgs ein Member vor oder zurück gehe, ist die Reihenfolge nicht richtig, springt immer 2 Schritte weiter. Wenn ich nur über die thumb imgs gehe, kann ich die Member saueber ansprechen. Was kann ich anders machen, um über einen Text-Link zu den Membern zu kommen?
Viele Grüße
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="css/Fenster.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var AnzahlMember=$('div.Member').length;
var MemberSliderLaenge=AnzahlMember*1000;
$('#MemberSlider').css({'width':''+MemberSliderLaenge+'px'});
});
function MemberSlider(MemberNr) {
var ZielPosition=(MemberNr-1)*1000;
$('#MemberSlider').css({'left':'-'+ZielPosition+'px'});
}
function spiegelPanelSelect(spiegelPanel) {
$('.spiegelPanel').css({'display':'none'});
$('#'+spiegelPanel).fadeIn( "1000", function() {
});
$('#MemberWrapper').delay(10).animate ({ 'opacity':0.0 }, 'slow');
}
$(document).ready(function() {
$('.rectangle').click(function(){
$('.spiegelPanel').css({'display':'none'});
$('#MemberWrapper').css({'display':'block','opacity':1.0});
});
});
</script>
<style>.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }</style>
</head>
<body>
<div id="spiegelWrapper">
<div id="spiegelPanel2" class="spiegelPanel" data-pg-collapsed>
</div>
</div>
<div id="MemberWrapper">
<style>#MemberSlider { border: none; position: relative; overflow: visible; }</style>
<div id="MemberSlider">
<div id="Member1" class="Member" data-pg-collapsed>
<p class="text">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member2"> Member2 </a> </p>
<img onClick="MemberSlider(9);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(2);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member2" class="Member" data-pg-collapsed>
<p class="text">2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member8"> Member5 </a> </p>
<img onClick="MemberSlider(1);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(3);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member3" class="Member" data-pg-collapsed>
<p class="text">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(2);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(4);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member4" class="Member" data-pg-collapsed>
<p class="text">4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(3);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(5);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member5" class="Member" data-pg-collapsed>
<p class="text">5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(4);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(6);" class="rectangle" src="images/Button_R.png" border="0"/>
</div>
<div id="Member6" class="Member" data-pg-collapsed>
<p class="text">6. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<img onClick="MemberSlider(5);" class="rectangle" src="images/button_L.png" border="0"/>
<img onClick="MemberSlider(1);" class="rectangle" src="images/Button_R.png" border="0"/>
</div
</div>
</div>
<div id="navi">
<div style="width:960px; margin:0 auto;">
<div class="buttonWrapper" onClick="MemberSlider(1);" style="cursor:pointer">
<img class="rectangle" src="01.jpg"/>
</div>
</div>
</div>
Quelltext hier
-
Moin envoy,
Du bist doch schon länger hier, da müsstest Du doch eigentlich wissen, wie man Code richtig™ formatiert. Ich habe das einmal für dich erledigt.
Keine Ursache und viele Grüße
Robert -
Moin envoy,
im Grunde kannst Du mit einem (scroll- und navigierbaren) Grid-Layout arbeiten und lediglich das Navigieren animieren. Das wäre
- zugänglich
- modernes HTML
- schlankes HTML
- ohne jQuery möglich
Damit würden sich etliche der im Folgenden angesprochenen Probleme von alleine erledigen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">XHTML (?) 1.0 (?) Transitional (?) – warum das denn?
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>Wenn XHTML als XML ausgeliefert würde, wäre es per Default UTF-8. Und in HTML5 ist die Angabe einfacher:
<meta charset="utf-8"><title></title>Ein leerer Title?
<link href="css/Fenster.css" rel="stylesheet" type="text/css" media="screen"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>Ich kenne mich mit jQuery nicht aus, daher vermag ich nicht zu sagen, ob man beide Skripte hier benötigt – ich glaube allerdings, dass dein Fall auch komplett ohne jQuery auskommt:
$(document).ready(function() { var AnzahlMember=$('div.Member').length; var MemberSliderLaenge=AnzahlMember*1000; $('#MemberSlider').css({'width':''+MemberSliderLaenge+'px'}); });… wird zu:
document.addEventListener('DOMContentLoaded', () => { const AnzahlMember = document.querySelectorAll('div.Member').length; const MemberSliderLaenge = AnzahlMember * 1000; document.getElementById('MemberSlider').style.width = `${MemberSliderLaenge}px`; });function MemberSlider(MemberNr) { var ZielPosition=(MemberNr-1)*1000; $('#MemberSlider').css({'left':'-'+ZielPosition+'px'}); }Hier wird das Element mit der ID
MemberSlidereinfach nur ziemlich weit (mehrere Tausend Pixel) nach links verschoben. Wie breit ist das Element und wie breit muss der Bildschirm sein, damit das halbwegs vernünftig funktioniert?function spiegelPanelSelect(spiegelPanel) { $('.spiegelPanel').css({'display':'none'}); $('#'+spiegelPanel).fadeIn( "1000", function() { }); $('#MemberWrapper').delay(10).animate ({ 'opacity':0.0 }, 'slow'); }Im Einblenden (Fade-In) passiert sonst nichts weiter – eine Noop?
Das sieht für mich nach einem Anwendungsfall von CSS-Animationen aus:
#MemberWrapper { transition: opacity 10s; }Und dann braucht nur noch die
opacity-Eigenschaft geändert werden.$(document).ready(function() { $('.rectangle').click(function(){ $('.spiegelPanel').css({'display':'none'}); $('#MemberWrapper').css({'display':'block','opacity':1.0}); }); });Das kann natürlich auch im
DOMContentLoaded-Eventhandler passieren und braucht ebenfalls kein jQuery …<style>.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }</style>Das JavaScript ist halbwegs ordentlich formatiert, aber das CSS ein Einzeiler … das muss ich nicht verstehen, oder? Also (zumindest ein bisschen verschönert):
.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }Was steht eigentlich im globalen
css/Fenster.css?<body> <div id="spiegelWrapper"> <div id="spiegelPanel2" class="spiegelPanel" data-pg-collapsed> </div>Lecker,
div-Suppe 🤮. Wozu brauchst Du das „Spiegel-Panel“ überhaupt in seiner vollen inhaltsleeren Breite?<div id="MemberWrapper"> <style>#MemberSlider { border: none; position: relative; overflow: visible; }</style>Was hindert dich daran, die relevanten Regeln oben schon zu definieren?
<div id="MemberSlider"> <div id="Member1" class="Member" data-pg-collapsed> <p class="text">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member2"> Member2 </a> </p> <img onClick="MemberSlider(9);" class="rectangle" src="images/button_L.png" border="0"/> <img onClick="MemberSlider(2);" class="rectangle" src="images/Button_R.png" border="0"/> </div>Du hast hier also so in deinem Hauptbereich etwas wie eine
sectionmit einem Textabsatz (p class="text"wirkt auf mich doppelt gemoppelt) mit einem Link auf den nächsten Abschnitt, gefolgt von zwei Buttons, die eigentlich auch Links sein möchten.Zudem haben die Bilder keinen alternativen Text und durch den Verzicht auf richtige Links ist diese Navigation nicht zugänglich.
<div id="navi"> <div style="width:960px; margin:0 auto;"> <div class="buttonWrapper" onClick="MemberSlider(1);" style="cursor:pointer"> <img class="rectangle" src="01.jpg"/> </div> </div> </div>Ich wollte erst vorschlagen, dass das die Navigation ist, aber im Grunde enthält sie nur einen Button, der wiederum auch nur ein Link auf den ersten Abschnitt sein möchte.
Viele Grüße
Robert -
Hallo envoy,
ich sehe ein nicht abgeschlossenes </div für #Member6.
Wenn ich das korrigiere, sehe ich ein "Bild nicht gefunden" Icon. Da es keinen alt-Text gibt, weiß ich nicht, was das sein soll. UX FAIL
Den habe ich mal als "Slider 1" gesetzt.
Klicke ich darauf, bekomme ich Lorem Ipsum Nr. 1 und zwei "Bild nicht gefunden" Icons. Auch da fehlt der alt-Text. UX FAIL.
wenn ich aber dann über die thumb imgs ein Member vor oder zurück gehe
Welche Thumb-Images? Ich sehe nur das L und R Bild, das sieht nach einem Navigationsbutton aus, nicht nach einem Thumb.
Möchte ich dann mit der Tab-Taste einen dieser mutmaßlichen Buttons auswählen, passiert nichts. UX FAIL, es sind <img> Elemente, die sind per Definition nicht interaktiv.
Ignoriere ich das und klicke auf die L und R Bilder, navigiert dein Code sauber schrittweise durch; ich kann den Fehler, den Du nennst, nicht nachvollziehen.
Ein <style> Element im Body ist übrigens fehlplatziert, das gehört in den head. Es gab mal die Idee, dass solche styles nur innerhalb des Elements wirken, wo sie notiert sind, aber das wurde aufgegeben.
Rolf
--
sumpsi - posui - obstruxi -
der Fehler entsteht bei mir, wenn ich den Textlink "Member2" drücke, ich komme zu Member2 und navigiere dann mit L und R weiter durch die Member, dann springt es bei mir von 2 auf 4 auf 6, soll aber 2, 3, 4, 5, 6 sein.
-
Hallo envoy,
ja, das ist mir bei einer Testseite, die ich aus deinem Code gemacht habe, auch passiert.
Etwas, was eigentlich Deine Bringschuld wäre.
Wenn Du mit Tab durch die Links im Inhalt läufst, scrollt der MemberWrapper und kollidiert mit Deiner eigenen Steuerung. Das kannst Du nur lösen, wenn Du selbst das Scrolling nutzt.
Im Prinzip brauchst Du den MemberSlider nicht. Lege alle Member im MemberWrapper nebeneinander (z.B. durch eine Flexbox) und gib dem MemberWrapper diese CSS-Eigenschaften:
#MemberWrapper { display: flex; margin: auto; /* Kann, muss nicht */ flex-flow: row; width: 100%; max-width: 1000px; overflow:hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;Im Moment machst Du den Wrapper im JS sichtbar, indem Du display:block setzt. Entweder änderst Du das in flex, oder verwende das hidden-Attribut zum Verstecken.
Die Bilder setzt Du so:
.Member { flex: 0 0 100%; scroll-snap-align: center; }Keine width, kein Float. Das Nebeneinandersetzen übernimmt die Flexbox und die Breite kommt aus dem 3. Parameter der flex-Eigenschaft.
Jetzt kannst Du deine Links/Rechts-Bilder in
<a href="#Member1"></a>einhüllen. Klickt man den Link, positioniert der Browser das Member mit der entsprechenden ID in den sichtbaren Bereich. scroll-behaior:smooth animiert es, und die Kombi aus scroll-snap-type und scroll-snap-align sorgt dafür, dass das Scrolling nicht zwischen zwei Membern stehen bleibt. JavaScript? Braucht man nicht, oder nur, um die Galerie sichtbar zu machen.Es kann übrigens den Browser in die Knie zwingen und irrsinnige Ladezeiten verursachen , wenn Du zu viele Bilder und Galerien auf der Seite hast. Beschäftige Dich mit lazy loading. Wenn der Anwender allerdings zu viele Bilder angeschaut hat, entsteht der Speicherbedarf am Ende doch. Überlege also gut, was du tust und denk auch an kleine, speicherarme Mobilchen.
Rolf
--
sumpsi - posui - obstruxi-
Hallo,
danke schon einmal für das feedback, wenn ich es richtig verstehe, macht es Sinn, das ganze noch einmal auf aktuelle Standards Grid oder flex um zu bauen.
Ich lese mich gerade in beides ein, verstehe aber noch nicht, welches System in meinem Fall besser ist. Ich habe ein 2 dimensionales Layout mit verschiedenen Bereichen, das spricht, soweit ich weiß, für Grid, aber die Membergeschichte für flex? Ist das so, oder falsch gedacht? Wenn ja lassen sich beide Modelle kombinieren?
-
Wie kann ich Testfiles im post hochladen, habe dazu keine Option gefunden?
-
Hallo envoy,
Testfiles hochladen
Gar nicht, sorry. Bitte gib uns einen Link auf eine Onlinepräsenz. Wenn deine Seite nicht live oder privat ist, kannst Du Online-Labore wie Codepen oder JSFiddle verwenden.
Flex vs Grid
Flexbox erstellt eindimensionale Layouts, Grid ist für zweidimensionale Layouts. Natürlich kannst Du mit Grid auch eindimensionales Layout erstellen, es ist aber umständlicher. Flexbox unterstützt auch eindimensionale, aber umbrechende Layouts (
flex-wrap: wrap) bzw. als Sammeleigenschaftflex-flow: row wrap).Deine Member-Liste scheint mir eindimensional.
Rolf
--
sumpsi - posui - obstruxi-
Ich habe mal skizziert, was ich genauer erstellen will, ich hoffe, man versteht es. Ich habe das, was ich bisher gemacht habe, mit float und einer table aufgebaut, aber das ist ja nicht mehr zeitgemäß und ich komme an einigen Stellen auch einfach nicht weiter, daher würde ich es gerne Responsive neu aufbauen. Für einen Ansatz mit, ob besser mit Flex oder Grid wäre ich dankbar. Viele Grüße
-
@@envoy
Ich habe mal skizziert, was ich genauer erstellen will, ich hoffe, man versteht es.
Nein, das lässt viele Fragen offen. Du hast den happy case skizziert. (Den Fehler machen professionelle Grafikdesigner auch gerne.)
Bei 9 Elementen ist die Anordnung klar. Wie soll’s bei achten aussehen?
Wie ich dem Thread entnehmen konnte, hast du viele Elemente auf der Seite. Warum verschenkst du dann links und rechts den Platz?
Kwakoni Yiquan
--
Ad astra per aspera -
Hallo envoy,
das war jetzt aus deinem Code nicht so ganz zu erklären. Sollen die "kleinen" Cards im Spiegelpanel sein?
Dein Wireframe-Bild zeigt nicht so viele Links wie dein Codebeispiel. In Member 1 ist ein Vorwärts-Link drin. Kein Rückwärtslink (auf Member 9 vermutlich). Fehlt der im Bild oder war der in deinem Codebeispiel zu viel?
In Unterseite A und B sind keine Vor/Zurück-Links - brauchen die keine? Gibt's da keine Navigation? Könnte für Unterseite A oder B noch der Bedarf für Vor/Zurück entstehen?
Was ist mit den 3 nav-Menüpunkten? Bleiben das 3? Können es mehr werden - wenn ja, wie soll sich das darstellen, vor allem auf schmalen Viewports (Handy)?
Ist es zwingend, dass die Vor-/Zurück-Links in das Layout der jeweiligen Memberseite eingepasst sind? Oder könnte man sie auch unterhalb der Memberanzeige darstellen und nur einmal auf der Seite haben? Das könnte Arbeit sparen…
Letztendlich hast Du hier eine Art von Tab-Control mit 3 Tabs, und eins der Tabs hat eine Wizard-Struktur (Vor/Zurück). Dafür kann man fertige Patterns heranziehen.
Rolf
--
sumpsi - posui - obstruxi
-
-
@@Rolf B
Flexbox erstellt eindimensionale Layouts, Grid ist für zweidimensionale Layouts.
Jä.
Natürlich kannst Du mit Grid auch eindimensionales Layout erstellen, es ist aber umständlicher.
Äh, nö. Ist es das?
Vor allem kommt es darauf an, was man erreichen will. Je nachdem, ist Flexbox oder Grid das richtige Werkzeug.
Flexbox unterstützt auch eindimensionale, aber umbrechende Layouts (
flex-wrap: wrap) bzw. als Sammeleigenschaftflex-flow: row wrap).Ja, und am Ende sieht’s dann blöd aus: Flexbox. Besser mit Grid
Deine Member-Liste scheint mir eindimensional.
Glaub ich nicht.
Und nächsten Sonnabend geht’s zurück
in die Zzum Anfang. Da sind auch die Codepens zu obigen Beispielen verlinkt.Kwakoni Yiquan
--
Ad astra per aspera-
Hallo Gunnar,
Äh, nö. Ist es das?
Ja, doch, find ich. Bei Flexbox sag ich
flex-flow:row wrap(oder nicht wrap) und gebe den Elementen mitflex: 0 0 xxxdie Breite xxx und mitheight: yyydie Höhe yyy.Bei Grid muss ich mit auto-fill und auto-rows hantieren, das ist deutlich umständlichere Syntax. Es sind zwar genauso viele Eigenschaften, die ich setzen muss, aber mit Flexbox komm ich klar ohne nachzugucken, bei Grid brauch ich jedesmal die Referenz. Mag an mir liegen…
Ja, und am Ende sieht’s dann blöd aus: Flexbox.
Das liegt daran, dass Du mit flex-grow:1 gearbeitet hast. Okay, wenn man feingranular responsive Bilder haben will, ist flex-grow:0 nicht hilfreich und ein auto-fill Grid mit minmax() ist die bessere Lösung.
Letztlich sind wir uns schon einig: Flex und Grid sind wie Beitel und Meißel im Werkzeugkasten. Mit beiden kann man Löcher hauen und zur Not auch eine Schraube drehen, aber beide haben ihre Schwerpunkteinsatzgebiete.
Was ich von deinen unkommentierten Präsentation halte, hab ich ja schonmal gesagt: Mit deinem Kommentar - mutmaßlich sehr wertvoll. Ohne Kommentar: write-only.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
-
Hallo Rolf,
ich habe den Ansatz mit der flexbox nachgebaut, siehe codepen und versuche jetzt die weiteren Elemente meines Layouts zu integrieren.
https://codepen.io/exenvoy/pen/ZEZeRaP
Edit: Link in spitze Klammern gesetzt
Viele Grüße
-
Wenn mein Member in etwa so aussehen soll, ist das dann auch ein Flex, das ich mit im .member definiere oder erstelle ich dafür eine neue Klasse member_layout?
-
Hallo envoy,
das ist lediglich eins von vielen Membern, mit einem Foto+Text Layout. Das Member selbst ist ein Flex-Item (also Kind einer Flexbox) und bekommt dafür die Member-Klasse.
Wenn Du für das INNERE dieses Member ein spezielles Layout festlegen willst, kannst Du eine weitere Klasse zuordnen, die das tut. Diese sollte dann das Innere des Member als Grid layouten.
Was ich Dir dann auch empfehle: Gib den Elementen mit Klasse Member die Eigenschaft
container-type:inline-size. Damit kannst Du innerhalb des Members die Maßeineinheit cqw verwenden (Prozentanteil von der Containerbreite) und du kannst sogar @container-Queries verwenden, um per CSS das Layout an unterschiedliche Membergrößen anzupassen.Du kannst auch
container-type:sizestatt inline-size verwenden, musst dann aber die Höhe der Member entweder explizit im Member festlegen oder von außen setzen (Flexbox oder Grid können so etwas tun). Damit bekommst Du dann auch für die Member-Höhe die Maßeinheit cqh hinzu. Nachteil ist dann, dass sich die Höhe nicht mehr flexibel an den Inhalt anpasst.Rolf
--
sumpsi - posui - obstruxi -
oder für den Text besser dann ein Grid?
-
ah, ok hatte deine Antwort noch nicht gelesen
-
Ich habe den Text in ein Grid-Layout gepackt, das funktioniert gut.
Die Links der Member über a href funktionieren jetzt auch, ich habe jetzt erstmal das ganze javascript herausgenommen.
Was ich nicht hinbekomme, ist das wenn ich auf Startseite klicke nur der Inhalt des Slide1 = Startseite angezeigt wird.
siehe Codepen
https://codepen.io/exenvoy/pen/GRLmoLp
Wie kann ich für die Startseite und die anderen Unterseiten den "Memberwrapper" ausblenden und den Unterseiten den passenden Content zu weisen?
Viele Grüße
-
Servus!
Ich habe den Text in ein Grid-Layout gepackt, das funktioniert gut.
Die Links der Member über a href funktionieren jetzt auch, ich habe jetzt erstmal das ganze javascript herausgenommen.
Was ich nicht hinbekomme, ist das wenn ich auf Startseite klicke nur der Inhalt des Slide1 = Startseite angezeigt wird.
siehe Codepen
https://codepen.io/exenvoy/pen/GRLmoLp
Wie kann ich für die Startseite und die anderen Unterseiten den "Memberwrapper" ausblenden und den Unterseiten den passenden Content zu weisen?
Es ist unschön, die gleiche Frage in mehreren Foren zu stellen und dann mehrere Leute blind für dich arbeiten zu lassen:
https://javascript-forum.de/showthread.php?tid=2813&pid=4575#pid4575
Viele Grüße
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Hallo,
es war nicht unhöflich gemeint, ich versuche gerade wieder in das Thema hereinzukommen, von oldschool table zu modernen Webdesign und höre mich deshalb an verschiedenen Stellen um.
War wie gesagt nicht böse gemeint.
Viele Grüße
-
Ich habe gerade von der visibilty function gelesen, probiere das aus
-
Hallo Rolf,
ich habe mein Member-Layout jetzt mithilfe eines grid containers erstellt und die Member werden sauber angezeigt. Das Ausblenden klappt auch. Was ich nicht hinbekomme, ist den ganzen MemberWrapper kleiner zu machen. Wenn ich die Größe ändere, bleibt das Foto links gleich groß und der Text wird begrenzt, aber nicht insgesamt skaliert. Kannst du mir sagen, wie ich das umsetzten kann?
Vielen Dank und viele Grüße
-
Hallo envoy,
da ich deinen aktuellen Entwicklungsstand nicht kenne - wie sollte ich da etwas sagen können?
Rolf
--
sumpsi - posui - obstruxi-
Hallo, das ist mein aktueller Stand:
-
@@envoy
Hallo, das ist mein aktueller Stand:
https://codepen.io/exenvoy/pen/GRLmoLp
Bitte verlinken. In der Hilfe steht, wie ’s geht.
Ich hab das mal für dich gemacht.
Kwakoni Yiquan
--
Ad astra per aspera-
Danke, achte das nächste Mal darauf
-
-
-
-
-
-
-
-
-
-
-
-
-
-
