nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Scharwies
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hallo, würde sich das Grundprinzip dieser Seite: Linkbeschreibung auch mit Flexbox realisieren lassen? D.h. eine Box/Sidebar fixed?
Wie sinnig ist der Einsatz von flex hinsichtlich der Kompatibilität in älteren Browsern?
Herzlichen Dank!
Hallo
würde sich das Grundprinzip dieser Seite: Linkbeschreibung auch mit Flexbox realisieren lassen? D.h. eine Box/Sidebar fixed?
Kein Problem.
Wie sinnig ist der Einsatz von flex hinsichtlich der Kompatibilität in älteren Browsern?
Das Flexbox-Modell zu verwenden ist heutzutage kein Problem mehr.
Gruss
MrMurphy
Danke!
Ich bin relativ neu dabei und lese mir gerade viel an. Dabei stoße ich auch immer wieder über CSS Grid. Ist das für das obengenannte Beispiel übertrieben oder sinnvoll? Ist denn die Flexbox allgemein ratsam oder soll man eher nach Responsitive Design suchen und sich daran orientieren?
Welche Seiten und Links würdet Ihr mir denn empfehlen, wenn ich die Seite umsetzen möchte? Ich habe mich nach einem fertigen Template umgesehen, aber nichts gefunden.
Vielen Dank!
@@Martina Müller
Dabei stoße ich auch immer wieder über CSS Grid. Ist das für das obengenannte Beispiel übertrieben oder sinnvoll?
Vor allem eins: Zukunftsmusik. CSS Grid ist AFAIK in noch keinem Browser implementiert. (Es sei denn experimentell.)
Ist denn die Flexbox allgemein ratsam oder soll man eher nach Responsitive Design suchen und sich daran orientieren?
Beides. RWD mit Flexbox.
In media queries lassen sich je nach Viewportbteite unterschiedliche Werte für flex, order etc. setzen.
LLAP 🖖
Hallo Martina Müller,
dein Beitrag bereitet mir etwas Bauchschmerzen. Zum einen benutzt du Begriffe, die in der realen und in der virtuellen Welt unterschiedliche Bedeutungen haben, zum Anderen scheint dir das erforderliche Grundlagenwissen zu fehlen um Antworten richtig einordnen zu können.
Ist denn die Flexbox allgemein ratsam oder soll man eher nach Responsitive Design suchen und sich daran orientieren?
Das sind keine gegensätzlichen Eigenschaften, sondern Flexbox unterstützt das Responsive Design, indem es dafür bestimmte Verhaltensweisen bereitstellt.
Ich bin relativ neu dabei und lese mir gerade viel an. Dabei stoße ich auch immer wieder über CSS Grid. Ist das für das obengenannte Beispiel übertrieben oder sinnvoll?
Hier kommen die unterschiedlichen Begrifflichkeiten ins Spiel. Ein Grid hat mehrere Bedeutungen und deshalb besteht die Gefahr, dass wir von unterschiedlichen Bedeutungen ausgehen.
Wenn du ein vorgefertiges Grid wie Bootstrap meinst: Das ist übertrieben.
Es handelt sich wie fast alle Webseiten um ein Grid, aber ein sehr einfaches bestehend aus drei Spalten. Das läßt sich jedoch sehr einfach nachstellen, zumal mit Flexbox.
Ich habe mich nach einem fertigen Template umgesehen, aber nichts gefunden.
Weil es so einfach ist wirst du dafür auch kein Template finden.
Welche Seiten und Links würdet Ihr mir denn empfehlen, wenn ich die Seite umsetzen möchte?
Du solltest erst einmal die Grundlagen von HTML und CSS lernen. Die scheinen dir zu fehlen, ansosten würdest du für ein einfaches klar strukturiertes 3-Spalten-Layout kein Template suchen.
Gleichzeitig würde es die Kommunikation erleichtern, da du viele Begriffe aus HTML / CSS schlicht noch nicht verstehen kannst oder noch schlimmer, falsch verstehst, ohne es zu merken.
Zu aktuellem HTML / CSS habe ich für Anfänger leider noch keine empfehleneswerten Seiten im Internet gefunden. Da sind eher Literatur oder Videotrainings wie "Flexible Boxes" von Peter Müller empfehlenswert.
Gruss
MrMurphy
@@MrMurphy1
Hier kommen die unterschiedlichen Begrifflichkeiten ins Spiel. Ein Grid hat mehrere Bedeutungen und deshalb besteht die Gefahr, dass wir von unterschiedlichen Bedeutungen ausgehen.
Ich bin bei meiner Antwort davon ausgegangen, dass sie mit „CSS Grid“ CSS Grid meint.
LLAP 🖖
Ich antworte jetzt mal beiden in EINER Antwort, danke auch beiden herzlich! :-)
In der Tat fehlen mir ein paar Grundlagen. Wenn man im Internet quer liest, geht die Taktung auch sehr durcheinander: Da hat man mal einen Artikel aus 2012 dabei, da weiß man schon nicht mehr, ob der aktuell ist. Ein bisschen was an Grundlagen ist bei mir wirklich da, da endet aber irgendwo in 2011 oder so. Und da hat sich seither einfach viel getan. In der Wüste des Internets weiß man dann mitunter nicht, was jetzt der Standard ist oder sein sollte. Insofern hoffe ich, dass Ihr mich jetzt nicht enttäuscht: Ich habe dieses Buch hier bestellt: Linkbeschreibung, ist das der richtige Peter Müller und ist die Ausgabe auch in Ordnung?
Im akuten Beispiel meines "Problems" (One the Grid lässt sich der Quelltext einfach nicht gut sichten. So unstrukturiert wie der Quelltext ist, ist oftmals mein Vorgehen. Es ist eine ziemlich wilde Masche aus Learning bei doing und copy und paste. Ich weiß, dass das hier vermutlich eine Mische aus Tod und Horror ist. Und um noch konkreter zu werden (und so bin ich erst auf dieses Grid gestoßen): Muss ich mich auf drei Spalten nebeneinander konzentrieren, also
X | Y | Z
oder ist die eine fix und daneben ist ein "Rahmen", der die zwei "flexiblen" Spalten beherbergt? Also quasi
X | Y Z
umgeben von einem Rahmen. In der Hoffnung, dass Ihr meine Skizzen versteht. Vielen Dank nochmals!
Hallo
ist das der richtige Peter Müller und ist die Ausgabe auch in Ordnung?
Beides: ja
Und um noch konkreter zu werden
Beides nicht. Viel einfacher:
Zwei Spalten:
Die linke fixiert und 35% Breite.
Die Rechte 65% Breite.
In der rechten Spalte befinden sich dann einfach jeweils gleichhohe Container, die ausgehend von den 65% jeweils 50% Breite beanspruchen und durch die Float-Anweisung jeweils zu zweit nebeneinander stehen.
Gruss
MrMurphy
Beides nicht. Viel einfacher:
Zwei Spalten:
Die linke fixiert und 35% Breite.
Die Rechte 65% Breite.
In der rechten Spalte befinden sich dann einfach jeweils gleichhohe Container, die ausgehend von den 65% jeweils 50% Breite beanspruchen und durch die Float-Anweisung jeweils zu zweit nebeneinander stehen.
Danke! D.h., das wurde nicht mit Flexbox umgesetzt. Wäre das denn trotzdem ratsam, das mit Flexbox zu machen?
Hallo
D.h., das wurde nicht mit Flexbox umgesetzt. Wäre das denn trotzdem ratsam, das mit Flexbox zu machen?
Ratsam? Schwierig zu beantworten.
Ich persönlich würde Flexbox teilweise verwenden, weil es halt speziell für das Grund-Layout entwickelt wurde. Im Gegensatz zu Float und anderen Lösungen. Wobei Flexbox bei so einem einfachen Layout seine Stärken nicht mal richtig ausspielen kann.
Gruss
MrMurphy
@@Martina Müller
D.h., das wurde nicht mit Flexbox umgesetzt. Wäre das denn trotzdem ratsam, das mit Flexbox zu machen?
Ja. Spätestens wenn die Bereiche unterschiedliche Hintergrundfarben bekommen sollen, stößt man mit Floats an das nächste Problem. Faux colums sind auch nur ein Hack. Flexbox liefert die saubere Lösung.
LLAP 🖖
Servus!
In der Tat fehlen mir ein paar Grundlagen. Wenn man im Internet quer liest, geht die Taktung auch sehr durcheinander: Da hat man mal einen Artikel aus 2012 dabei, da weiß man schon nicht mehr, ob der aktuell ist. Ein bisschen was an Grundlagen ist bei mir wirklich da, da endet aber irgendwo in 2011 oder so. Und da hat sich seither einfach viel getan. In der Wüste des Internets weiß man dann mitunter nicht, was jetzt der Standard ist oder sein sollte.
Hast du unsere Tutorials schon gelesen?
und diesen Artikel:
Herzliche Grüße
Matthias Scharwies
Wieder vielen Dank an BEIDE!
Die Tutorials habe ich (bis auf das letztgenannte) gelesen. Ich kann daran aber gut eines meiner Probleme deutlich machen: In Anwendung auf die Wunschseite: Wäre die linke Seite die <aside> und die rechte die <section>? Oder ist das der Bereich, den man <article> nennen MUSS? Und MUSS man das überhaupt? Könnte man die Boxen innerhalb der rechten Seite als Div-Container "gestalten" - oder gibt es dafür schon wieder eine passendere Variante? Manchmal weiß ich nicht, ob ich zu verzwickt denke, oder ob mir das zu hoch ist.
Hallo
das kommt darauf an wie aktuell deine Seite werden soll.
Semantisch enthält die linke Spalte Angaben die in einem header-Element erwartet werden, also header. Die rechte Spalte enthält die Haupt-Navigation, also das nav-Element. Die Container im nav-Element sind a-Elemente.
Veraltet kann die Seite natürlich auch komplizierter erstellt werden.
Gruss
MrMurphy
Semantisch enthält die linke Spalte Angaben die in einem header-Element erwartet werden, also header. Die rechte Spalte enthält die Haupt-Navigation, also das nav-Element. Die Container im nav-Element sind a-Elemente.
In dem Fall ist es tatsächlich einfacher als gedacht. Auf die Idee, dass das die eigentliche Navigation ist, bin ich gar nicht gekommen.
Hallo,
ich habe mal ein Beispiel ohne Inhalt erstellt.
Das grundsätzliche HTML könnte folgendermaßen ausssehen:
Matthias Apsel<body>
<header>
<h2>header</h2>
</header>
<nav>
<a href="#">00</a>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
<a href="#">06</a>
<a href="#">07</a>
<a href="#">08</a>
<a href="#">09</a>
</nav>
</body>
Das CSS für das Grundlayout folgendermaßen:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
background-color: aquamarine;
height: 100%;
width: 35%;
position: fixed;
}
header h2 {
margin-top: 0;
}
nav {
width: 65%;
height: 100%;
margin-left: 35%;
display: flex;
flex-wrap: wrap;
}
und für das Responsive Design mit Media Queries zusätzlich:
@media only screen and (max-width: 1300px) {
a {
width: 100%;
}
}
@media only screen and (max-width: 800px) {
header {
width: 100%;
position: relative;
}
nav {
width: 100%;
margin-left: 0;
}
}
Dazu dann noch etwas Hintergrundfarbe und ein paar zu empfehlende Grunddaten ergibt folgende komplette Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
}
/*Spezielle Einstellungen*/
@media all {
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
background-color: aquamarine;
height: 100%;
width: 35%;
position: fixed;
}
header h2 {
margin-top: 0;
}
nav {
width: 65%;
height: 100%;
margin-left: 35%;
display: flex;
flex-wrap: wrap;
}
a {
color: black;
width: 50%;
height: 90%;
display: block;
text-decoration: none;
}
a:nth-child(1) {
background-color: red;
}
a:nth-child(2) {
background-color: yellow;
}
a:nth-child(3) {
background-color: blue;
}
a:nth-child(4) {
background-color: orange;
}
a:nth-child(5) {
background-color: green;
}
a:nth-child(6) {
background-color: purple;
}
a:nth-child(7) {
background-color: silver;
}
a:nth-child(8) {
background-color: white;
}
a:nth-child(9) {
background-color: fuchsia;
}
a:nth-child(10) {
background-color: teal;
}
}
@media only screen and (max-width: 1300px) {
a {
width: 100%;
}
}
@media only screen and (max-width: 800px) {
header {
width: 100%;
position: relative;
margin-top: 0;
}
nav {
width: 100%;
margin-left: 0;
}
}
</style>
</head>
<body>
<header>
<h2>header</h2>
</header>
<nav>
<a href="#">00</a>
<a href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
<a href="#">06</a>
<a href="#">07</a>
<a href="#">08</a>
<a href="#">09</a>
</nav>
</body>
</html>
Gruss
MrMurphy
@@MrMurphy1
@media only screen and (max-width: 1300px)
I.d.R. ist es besser, sich von klein nach groß vorzuarbeiten (mobile first), also media queries mit min-width zu verwenden.
Und die Breakpoints in em anzugeben, nicht in px.
LLAP 🖖
Das ist sehr nett, vielen lieben Dank! Ich mache mich mal dran und melde mich in Kürze wieder, aber nochmals vielen Dank.
Ich hätte noch einige Fragen (die teilweise auch nicht zu dem Thema gehören) und würde mich wieder über Hilfe freuen.
a) Ich habe überlegt, die rechte Seite statt der <a href>-Container mit Bildern im Pinterest-Style zu machen. Ich habe diverse Lösungen mit JQuery probiert. Kann es aber sein, dass das gar nicht so recht möglich ist? Die Bilder benötigen in den Skripten immer fixe px-Angaben.
b) Was wäre eine Alternative zu a), wenn ich die Elemente mit Fotos füllen will? Am Ende soll das eine Art Reiseführer werden, man soll aufs Bild klicken und dann zum Reiseziel kommen. Eine richtig passende Idee hatte ich noch nicht, außer dem überforderten Pinterest.
c) Bei diesem "Reiseführer" wäre ja verschiedene Funktionen ganz schön: Ich sag mal als Beispiel: Der Facebook-Daumen. Wenn man durch Blogs surft, sind die ja besser ausgestattet als jeder Werkzeug-Kasten. Man kann mit Google teilen, twittern, Instagramm. Wird der ganze Krempel überhaupt genutzt? Gibt es einen Standard, den man anbieten sollte?
d) Wie würdet Ihr es mit Kommentar-Funktionen halten? Würdet Ihr eine eigene bauen, eine von Facebook integrieren, dieses Disqus nehmen?
e) Früher war Java Script - ich sage mal - etwas verpönt, weil das auch teilweise deaktiviert wurde. JQuery scheint dagegen durch die mobilen Geräte zum Standard zu gehören. Kann man das also bedenkenlos verwenden?
Herzlichen Dank!
@@Martina Müller
a) Ich habe überlegt, die rechte Seite statt der <a href>-Container mit Bildern im Pinterest-Style zu machen. Ich habe diverse Lösungen mit JQuery probiert. Kann es aber sein, dass das gar nicht so recht möglich ist?
Wenn du beschreiben könntest, was „das“ ist?
d) Wie würdet Ihr es mit Kommentar-Funktionen halten? Würdet Ihr eine eigene bauen, eine von Facebook integrieren, dieses Disqus nehmen?
Eigene. Ich möchte mich nicht bei irgendeinem zweifelhaften Dienst anmelden (d.h. meine Daten dor zu hinterlegen und von dort ausgeschnüffelt zu werden), um irgendwas zu kommentieren.
e) Früher war Java Script - ich sage mal - etwas verpönt, weil das auch teilweise deaktiviert wurde. JQuery scheint dagegen durch die mobilen Geräte zum Standard zu gehören. Kann man das also bedenkenlos verwenden?
jQuery ist JavaScript. Es ist eine Bibliothek, die mitunter bedenkenlos eingebunden wird, obwohl man nur einen Bruchteil davon nutzt und besser ohne die Bibliothek dran wäre.
LLAP 🖖
Wenn du beschreiben könntest, was „das“ ist?
Ich versuche es mal: Für die rechte Seite der angefertigten Lösung: Wenn man statt der <a href>-Elemente Bilder nimmt, diese Bilder aber über die ganze Seitenbreite angezeigt werden sollen. Also zwei Bilder nebeneinander, wenn der Bildschirm "kleiner" wird, nur noch eins, es dabei aber keine "Lücken" gibt, also * { padding: 0; margin: 0 }
Das ganze in diesem "Format" => Beispielbild
Die Skripte, die ich gesehen habe, erfordern immer eine Breitenangabe in (meistens) 250px.
Daher auch meine zweite Frage: Wie könnte man das noch ansprechend darstellen? Also so, dass es gut aussieht?
Hallo
Daher auch meine zweite Frage: Wie könnte man das noch ansprechend darstellen? Also so, dass es gut aussieht?
Was sieht für dich gut aus? Was sieht für mich gut aus? Was sieht für deine Besucher gut aus? Keine Ahnung.
Die Skripte, die ich gesehen habe, erfordern immer eine Breitenangabe in (meistens) 250px.
Wo? Solche Angaben helfen niemanden weiter.
Skripte hört sich nach JavaScript an. Warum so kompliziert? Was mit CSS geht sollte mit CSS erledigt werden. Zumal viele User JavaScript blockiert haben, zum Beispiel um nervige Werbung zu blockieren.
man soll aufs Bild klicken und dann zum Reiseziel kommen.
Warum um alles in der Welt willst du dann die a-Container löschen? Die sind doch dann genau richtig.
Allerdings ist Flexbox dafür ungeeignet und entfällt.
Ich würde das mit CSS erledigen und habe mal ein Beispiel basierend auf dem vorigen erstellt. Natürlich können die Bilder auch wie in deinem Beispielbild über die gesamte Fensterbreite in 5 oder 6 Spalten angeordnet werden. Aus deinen Bemerkungen wird leider nicht deutlich, was du im Endeffekt willst.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
img {
display: block;
max-width: 100%;
}
}
/*Spezielle Einstellungen*/
@media all {
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
background-color: aquamarine;
height: 100%;
width: 35%;
position: fixed;
}
header h2 {
margin-top: 0;
}
nav {
width: 65%;
margin-left: 35%;
}
nav {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
/*column-width = Mindestbreite, nicht fixe Breite*/
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
-moz-column-rule-with: 0;
-webkit-column-rule-with: 0;
column-rule-with: 0;
-moz-column-rule-style: none;
-webkit-column-rule-style: none;
column-rule-style: none;
-moz-column-rule-color: silver;
-webkit-column-rule-color: silver;
column-rule-color: silver;
-moz-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
}
a {
color: black;
width: 100%;
display: block;
text-decoration: none;
}
}
@media only screen and (max-width: 1500px) {
nav {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width: 1300px) {
nav {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (max-width: 800px) {
header {
width: 100%;
position: relative;
}
nav {
width: 100%;
margin-left: 0;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width: 550px) {
nav {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
</style>
</head>
<body>
<header>
<h2>header</h2>
</header>
<nav>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Auto_Union_1000s-02.JPG" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Auto_Union_1000_Sp_Garmisch-Partenkirchen_regne.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Desfile_de_Autos_Clasicos_y_Antiguos%2858%29.JPG" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/de/b/b8/Chemnitz_roter_turm.jpg"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Desfile_de_Autos_Clasicos_y_Antiguos%2865%29.JPG" alt="Beispielbild"></a>
<a href="#"><img src="http://www.torange-de.com/photo/12/16/Alte-Autos-1336984729_99.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/'38_Packard_%28Auto_classique_Laval_'11%29.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/2007-06-16_Auto_Union_1000_%28Frontpartie%29.jpg/800px-2007-06-16_Auto_Union_1000_%28Frontpartie%29.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/d/db/'65_Imperial_Ghia_Limo_%28Auto_classique_Laval_'11%29.JPG" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Brennan-autos_1906.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a1/'52_Hudson_%28Auto_classique_VAQ_Mont_St-Hilaire_'11%29.jpg" alt="Beispielbild"></a>
<a href="#"><img src="http://images.fotocommunity.de/bilder/landschaft/wald/ein-morgen-im-wald-18247546-82ad-4b73-a700-8e8bb74fb471.jpg"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Hamburg-university-2005-05.png"></a>
<a href="#"><img src="http://images.fotocommunity.de/bilder/aufnahme-techniken/langzeitbelichtung/hamburg-hafen-30869a4b-a166-4aaf-abc1-7b74cae08310.jpg" alt="Beispielbild"></a>
</nav>
</body>
</html>
Gruss
MrMurphy
Dass das tatsächlich geht, hätte ich nicht gedacht. Herzlichen Dank! Ich versuche, den Code zu verstehen und dadurch "schlauer" zu werden.
Vielen Dank!!
Weiter geht's :-)
Siehe hier: Testseite
Ich habe einen Filter eingebaut, bei hover verschwindet die rechte Bilderspalte (in Chrome). Kann man dagegen Abhilfe schaffen? Wie gängig sind diese Filter eigentlich?
Vielen Dank und Gruß!
Hallo,
das Problem kann ich nachvollziehen. Offensichtlich haben Chrome (und auch Opera) Probleme wenn filter und transition gleichzeitig verwendet werden. Abhilfe konnte ich nicht finden. Ich würde auf transition in diesem Zusammenhang verzichten.
Wie gängig sind diese Filter eigentlich?
Solche Fragen kannst du auf der Seite caniuse klären. Für Filter z. B.
http://caniuse.com/#search=filter
Da IE filter im IE11 und sogar im Edge nicht unterstützt sollte es in der Praxis nicht verwendet werden.
Oder du müsstest schauen ob es für den IE ein sogenanntes Fallback gibt. Also eine Lösung, die dann nur im IE funktioniert und zusätzlich ins CSS eingebaut werden kann. Das kann mehr oder weniger aufwändig sein.
Gruss
MrMurphy
Ich hab Abhilfe gefunden, aber im Internet Explorer funktioniert das ganze auch nicht.
Insofern: Wie mache ich das am besten? Doch per Jquery? Eigentlich wollte ich auch noch jeweils einen Text über die Grafik legen. Um's kurz zu machen: Ungefähr so wie hier oben bei der Newsübersicht: Hier. Muss man dafür einen Div-Container um jedes Bild legen? Wenn ja, ändert das wieder etwas an der variablen Fotobreite?
Vielen Dank und Gruß!
Hallo
Insofern: Wie mache ich das am besten?
Keine Ahnung. Du solltest dich nicht zu sehr auf hover-Effekte konzentrieren, schon gar nicht mit JavaScript, das wie schon geschrieben von vielen Usern blockiert ist.
Insgesamt solltest du dir auch bewußt machen, das inzwischen wohl schon über 80% aller User im Internet mit Touchscreen-Geräten (hauptsächlich Smartphones und Tablets) unterwegs sind, mit noch immer stark steigender Tendenz. Und die können keinen hover-Effekt. Unveränderbar.
Eigentlich wollte ich auch noch jeweils einen Text über die Grafik legen. Um's kurz zu machen: Ungefähr so wie hier oben bei der Newsübersicht: Hier.
Das ist kein Problem.
Muss man dafür einen Div-Container um jedes Bild legen?
Nein, warum willst du immer alles verkomplizieren? Benutze einfache Lösungen.
Wenn ja, ändert das wieder etwas an der variablen Fotobreite?
Da kein div erforderlich ist - nein.
Texte können über span-Elemente eingefügt werden. Ich habe ein einfaches Beispiel gemacht und eins mit "zwei" Texten, die dann auch unterschiedlich formatiert werden können:
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Auto_Union_1000s-02.JPG" alt="Beispielbild"><span>Kurzer Text</span></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Auto_Union_1000_Sp_Garmisch-Partenkirchen_regne.jpg" alt="Beispielbild"><span>Und noch etwas mehr und mehr Text über das Bild<br><span>Autorin: Coco Chanel</span></span></a>
und das zugehörige CSS:
nav a {
position: relative;
}
nav a>span {
color: white;
background-color: hsla(0, 0%, 100%, 0.4);
position: absolute;
bottom: 0;
width: 100%;
display: inline-block;
padding: 0.3rem;
}
nav a span span {
color: yellow;
display: inline-block;
}
a:hover>span {
display: none;
}
Gruss
MrMurphy
Hallo MrMurphy1,
Insgesamt solltest du dir auch bewußt machen, das inzwischen wohl schon über 80% aller User im Internet mit Touchscreen-Geräten (hauptsächlich Smartphones und Tablets) unterwegs sind, mit noch immer stark steigender Tendenz. Und die können keinen hover-Effekt. Unveränderbar.
Das stimmt so nicht.
Bis demnächst
Matthias
Diese Lösung ist ja quasi browserkompatibel:
Oder ist die "unschick"?
Noch mal eine Frage zu jquery: Viele Menüs funktionieren doch damit, insbesondere bei mobilen Versionen, oder?
Hallo
Noch mal eine Frage zu jquery: Viele Menüs funktionieren doch damit, insbesondere bei mobilen Versionen, oder?
Ja, auf mobilen Geräten wird JavaScript selten blockiert.
Diese Lösung ist ja quasi browserkompatibel:
Soll die Schrift oben im Bild ohne durchscheinenden Hintergrund stehen?
Gruss
MrMurphy
Soll die Schrift oben im Bild ohne durchscheinenden Hintergrund stehen?
Ich weiß jetzt nicht, was Du genau meinst. Im IE und in Chrome sieht das schon mal gleich aus: Die Fotos sind "dunkler" und mit Text. Bei Hover sind sie normal zu sehen. Der Text soll irgendwann unten stehen, aber das bekomme ich vermutlich hin (mit Padding-Bottom?).
Die Lösung ist offenbar browserkompatibler als die Image-Filter (die z.B. im Internet-Explorer nicht funktionieren).
Hallo,
ich hatte das zunächst nicht verstanden. Damit sollten alle Browser zurechtkommen.
Der Text soll irgendwann unten stehen, aber das bekomme ich vermutlich hin (mit Padding-Bottom?).
Das ist eher ungeeignet, da die Bilder unterschiedlich hoch sind.
Offensichtlich willst du nur Text mit einer Schrift (Art, Größe, Farbe) benutzen. Dann schlage ich folgende Lösung vor:
Der Text kommt in zwei geschachtelte span-Elemente, also
<a href="#"><img src="pfad/bildname.jpg" alt="Beispielbild"><span><span>Kurzer Text</span></span></a>
Das äußere span liegt mit seiner Hintergrundfarbe komplett auf dem Bild. In dem inneren span werden die Texteinstellungen (Schriftart, -größe u.s.w.) vorgegeben und der Text unten im Bild ausgerichtet.
Das CSS dazu könnte dann so aussehen:
/* Damit "position: absolute;" sich an den a-Elementen ausrichtet */
nav a {
position: relative;
}
/* Einstellungen für alle span-Elemente, egal welcher Ebene */
nav a span {
display: inline-block;
width: 100%;
}
/* Einstellungen für den "Hintergrund vor dem gesamten Bild" */
nav a>span {
background-color: hsla(0, 0%, 100%, 0.4);
position: absolute;
bottom: 0;
height: 100%;
}
/* Einstellungen für den Text */
nav a>span>span {
color: white;
position: absolute;
bottom: 0;
padding: 0.3rem;
}
a:hover>span {
display: none;
}
Gruss
MrMurphy
Weiter geht's :-)
Siehe hier: Testseite
Ich habe einen Filter eingebaut, bei hover verschwindet die rechte Bilderspalte (in Chrome). Kann man dagegen Abhilfe schaffen? Wie gängig sind diese Filter eigentlich?
Vielen Dank und Gruß!
...liegt hieran: -webkit-transition: all .6s ease; /* Transition for Webkit browsers */
Gibt es dafür Alternativen?
Weiterhin herzlichen Dank für die Hilfe(stellungen)!
Eine paar weitere Fragen:
Für das Menü gibt es ja relativ wenig Platz, wenn man sich auf den Platz besinnt, der auch im Original vorhanden ist (Linkbeschreibung.
a) Ist so ein Menü-Symbol mittlerweile gängig? Oder sollte ein Menü besser doch textbasierend sein?
b) Aufgrund des begrenzten Platzes wäre wohl eine Art "Dropdown-Lösung" nach dem Klick auf das Menü sinnvoll. Als ich noch etwas fitter im HTML/CSS-Bereich war, wären Dropdown-Menüs etwas verpönt. Der Grund war, dass die Bedienung für ältere PC-Nutzer nicht ganz (ich sag mal) "logisch" wäre. Sind die "Alten" jetzt sozialisiert? :-)
c) Gibt es eine gute, reine CSS-Lösung für Dropdown-Menüs? Viele Seiten, die ich gesehen habe, setzen letztendlich doch auf irgendeine Spur von JS.
d) Habt Ihr andere Ideen für platzsparende Menüs?
Herzlichen Dank!
Hallo,
a) Ist so ein Menü-Symbol mittlerweile gängig? Oder sollte ein Menü besser doch textbasierend sein?
Gängig - na ja, weit verbreitet ist genauer. Menüs sollten aber besser textbasierend sein. Aufklappmenüs sollten so weit wie möglich vermieden werden. Siehe zum Beispiel
http://www.creativeconstruction.de/blog/hamburger-menue-ja-oder-nein/
b) Aufgrund des begrenzten Platzes wäre wohl eine Art "Dropdown-Lösung" nach dem Klick auf das Menü sinnvoll. Als ich noch etwas fitter im HTML/CSS-Bereich war, wären Dropdown-Menüs etwas verpönt. Der Grund war, dass die Bedienung für ältere PC-Nutzer nicht ganz (ich sag mal) "logisch" wäre. Sind die "Alten" jetzt sozialisiert?
Ein eindeutiges nein. Symbole alleine für sich sind grundsätzlich Mist. Und das hat nichts mit dem Alter des Users zu tun. Es gibt nur wenige Symbole die von allen Usern richtig gedeutet werden oder besser: denen von allen die gleiche Bedeutung zugemessen wird, egal ob richtig oder falsch. Selbst Webseitenersteller benutzen Symbole häufig anders, als wofür sie erdacht wurden.
Dazu ist vor ein paar Monaten eine interessante Untersuchung zu Emoticons bzw. Emojis (also Symbole) durch die Presse gegangen. Dabei hat sich herausgestellt, dass viele von denen falsch genutzt und gedeutet werden. Siehe zum Beispiel
http://www.stern.de/digital/computer/missverstandene-emojis---das-bedeuten-sie-wirklich-6187396.html
Symbole, über deren Bedeutung der User sich nicht eindeutig im Klaren ist (oder zumindest meint deren Bedeutung zu kennen) werden von den Meisten nicht angeklickt. Wichtige Informationen bleiben ihnen so vorenthalten.
c) Gibt es eine gute, reine CSS-Lösung für Dropdown-Menüs? Viele Seiten, die ich gesehen habe, setzen letztendlich doch auf irgendeine Spur von JS.
gute? reine? Das ist ähnlich wie bei den Symbolen. Das wird von jedem anderes interpretiert. Viele Webseitenersteller, grade Anfänger, wollen viel Klimbim und Action. Ich bin eher für sachliche Lösungen, auch wenn die nicht so "hübsch" sind. Von daher solltest du schon genauer beschreiben wie das Menü aussehen soll und wie es funktionieren soll. Mit Googeln solltest du Lösungen finden die deinen Vorstellungen nahekommen. Zum Beispiel "menü nur css". Wenn du das nicht umsetzen kannst helfen wir dir weiter.
d) Habt Ihr andere Ideen für platzsparende Menüs?
Die einzelnen Links sollten für den Benutzer leicht sichtbar und erreichbar sein. Alles andere baut nur Barrieren auf, die dem Benutzer die Seite verleiden. In Klappmenüs sollten sich insgesamt nicht mehr als 7, 8 Menüpunkte verbergen. Für mehr Links sollte eine extra Seite erstellt werden, auf die die Benutzer mit der Zurück-Taste zuverlässig zurückkommen.
Und keine Symbole ohne Text.
Leider meinen viele Webseitenersteller ihr vermeintliches Können durch komplizierte versteckte Menüs zeigen zu müssen ohne zu Bedenken, was die ihren Besuchern damit antun.
In einem anderen Forum wurde bereits vor Monaten das Layout geändert und die Eingabe für Quelltext hinter einem Aufklappmenü "versteckt". Ergebnis: Selbst altgediente User meinen das der Button gestrichen wurde und neue User kopieren Quelltext einfach ins Textfeld, weil sie den Menüeintrag nicht finden. Und das sind altersmäßig keine alten Menschen.
Webseitenersteller leben zudem häufig in einem engen Biotop, das mit der Wirklichkeit nichts zu tun hat. So habe ich schon mehrmals erlebt, das Bekannte von Webseitenerstellern mit deren Icons und Menüs nicht zurechtkamen. Ergebnis: Die Bekannten bekommen eine persönliche Erklärung und kommen dann mit der Seite zurecht. Der Webseitenersteller fühlt sich bestätigt.
Sinnvoller wäre es jedoch für die Webseitenersteller mal über den Tellerrand zu schauen und sich zu überlegen, das die meisten anderen Besucher ihrer Webseiten wie ihre Bekannten vor der persönlichen Einweisung sind. Aber die bekommen keine persönliche Einleitung und sind mit der Bedienung der Seite überfordert und schnell wieder weg.
Dabei sind solche Bekannte die besten Tester. Sie sollten keine persönliche Einweisung bekommen, sondern der Webseitenersteller sollte die Seite so umbauen, das seine Erklärung überflüssig ist.
Gruss
MrMurphy
@@Martina Müller
Für das Menü gibt es ja relativ wenig Platz,
Auf Webseiten gibt es immer genug Platz. Nutzer sind an das Konzept des Scrollens gewöhnt.
Die Frage ist, in welcher Reihenfolge man Menü und Hauptinhalt präsentiert.
a) Ist so ein Menü-Symbol mittlerweile gängig?
Was MrMurphy1 sagte. U.a. schreibt auch Luke Wroblewski immer wieder darüber, dass Nutzer mit dem Hamburger-Icon nichts anfangen können und wie sich die Conversion einer Seite verbessert, wenn man das Icon durch das Wort „Menü“ ersetzt (oder Icon + Wort).
c) Gibt es eine gute, reine CSS-Lösung für Dropdown-Menüs?
Menü hinter dem Hauptinhalt, aber vor diesem ein seiteninterner Link zum Menü. Das dürfte auch für Screenreader sinnvoll sein.
Bei größeren Viewports kann man das Menü nach oben holen (Flexbox: order) und den dann überflüssigen Link zum Menü verschwinden lassen.
So sieht’s aus. (Der Einfachheit halber habe ich Sass verwendet. Zum generierten CSS geht’s mit [View Compiled].)
LLAP 🖖
@@Gunnar Bittersmann
Bei größeren Viewports kann man das Menü nach oben holen (Flexbox:
order) und den dann überflüssigen Link zum Menü verschwinden lassen.
Natürlich nur visuell, also nicht per display: none. Für Screenreader soll ja alles wie gehabt bleiben.
Hab den Pen angepasst.
LLAP 🖖
@@Martina Müller
Das ganze in diesem "Format" => Beispielbild
Daher auch meine zweite Frage: Wie könnte man das noch ansprechend darstellen? Also so, dass es gut aussieht?
Ich hab da was gebastelt.
LLAP 🖖