Du kannst natürlich auch clientseitig die Fensterbreite abfragen und gleich die richtige Seite holen:
$(document).ready( function() {
var height = $(window).height();
var width = $(window).width();
if (width > 600) url = 'body.php'; else url = 'body_mobile.php';
$('body').load(url);
});AFAIK hat man von PHP aus keinen Zugriff auf die Abmessungen des Browserfensters. Du kannst jedoch den Inhalt des body-Elementes mit Ajax holen und dabei Breite und Höhe übergeben. Dann kann das PHP jeweils die richtige Seite aufbauen und zurück liefern.
Das wird hier beschrieben:
kann man auf der allerersten seite, hier index.php eine art if-abfrage mache, ob die pc variante kommt oder eine völlig abgespeckt, nur 2 menupunkte und alle fotos mittig und groß untereinander
Hast Du dich schon mit Mediaqueries beschäftigt? Damit kannst Du ja das CSS von der Fensterbreite abhängig machen und Elemente, die nicht sichtbar sein sollen, unsichtbar machen.
Wenn ich dies lese: "start_pc.php bzw. start_smartphone.php" so ist es natürlich auch möglich, zwei Varianten der HP zu machen. Man kann daran denken, wenn die Unterschiede sehr groß sind. Ich würde mir das aber zweimal überlegen, weil Du dann beide Varianten pflegen und ändern musst, wenn z. B. neue Bilder hinzu kommen.
dass ein frame über dem bild liegt, der zb, transparent macht, oder
die ränder etwas dunkel, ihr kennt diese ja bestimmt sowieso.
bei diesen effekten gehen die einfach über den sticky header beim scrollen, als gäbe es ihn nicht ????
Wenn ich dich richtig verstehe, sind diese Bilder und Frames bzw. Overlays nicht auf dem sticky Header selber sondern irgend wo auf der Seite und überdecken dann den Header?
Vermutung: Häufig ist diese Überdeckung gewollt und wird durch einen hohen z-index erzwungen. Wenn dem so ist, müsstest Du durch einen abgestuften z-index, d. h. auf dem Header einen z-index, der noch höher ist, erreichen können, dass der Header wiederum die Overlays überdeckt.
Besser wäre es allerdings, wenn Du eine Demoseite hättest, wo man sich das Problem ansehen kann. Oder den Code posten, wenn Du noch keinen Webspace hast.
Du brauchst nur einen Container, auf den Du die CSS-Regel anwenden kannst. Also z. B.:
<div class="zeiger_zoom-in"></div>im body.
Und das CSS trägst Du in deine CSS-Datei ein:
.zeiger_zoom-in {
cursor:zoom-in;
height: 200px;
}Wenn der Container keinen Inhalt hat, musst Du ihm eine Höhe geben, weil die Höhe sonst 0 ist und der Container unsichtbar.
Weißt Du schon, wie man CSS einbindet?
https://www.html-seminar.de/stylesheets_in_html_einbinden.htm
Um das CSS für den Cursor zu definieren, brauchst Du ja einen Selektor, der angibt, für welches Element die Regel gelten soll. Bei dem CSS in Posting #42 und #43 müsste das ein Element, z. B. ein div, mit der Klasse "zeiger_zoom-in" innerhalb eines anderen Elementes mit der ID "Inhalt" sein.
Um einen schnellen Einstieg zu bekommen, versuche aber erst Mal, die Regel auf das body-Element anzuwenden:
body {
cursor:zoom-in;
}Beschreibe doch Mal, was Du genau vor hast: Bei welchem Element soll der Mauszeiger auf "zoom-in" gehen? Wie soll dieses Element aussehen?
Für solche Bilderwechsel ist u. a. Cycle2 sehr gut geeignet:
http://jquery.malsup.com/cycle2/
Wichtig dabei wäre, dass die Bilder alle in dem Frame scaliert sind, sich also nicht hässlich verzerren, sondern an die Seite angepasst sind.
Diese Aufgabe ist nicht ganz trivial: Es erfordert, dass alle Bilder das selbe Seitenverhältnis haben. Wenn nicht, muss man akzeptieren, dass entweder etwas abgeschnitten wird oder Leerräume bleiben. Das Einpassen kann dann mit CSS object-fit geschehen:
Das liegt daran, dass das figure-Element per Default eine relativ großen Außenabstand (margin) hat. Verkleinert man diesen, rücken die Bilder näher zusammen:
Ich habe das noch etwas weiter untersucht und vermutlich gibt es eine einfachere Lösung: Ändere in Zeile 4 in photoswipe.min.css die Position auf fixed:
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
.pswp{display:none;/* hier --> */position:fixed!important;width:100%;height:100%;left:0;top:0px; overflow:hidden;-ms-touch-action:none;touch-action:none;z-index:1500;-webkit-text-size-adjust:100%;-webkit-backface-visibility:hidden;outline:0}
.pswp *{-webkit-box-sizing:border-box;box-sizing:border-box;}
.pswp img{max-width:none;}
.pswp--animate_opacity{opacity:.001;will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4,0,0.22,1);transition:opacity 333ms cubic-bezier(0.4,0,0.22,1)}
.pswp--open{display:block}
.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}
.pswp--zoomed-in .pswp__img{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}
.pswp--dragging .pswp__img{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}
.pswp__bg{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0;-webkit-backface-visibility:hidden;will-change:opacity}
.pswp__scroll-wrap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.pswp__container,.pswp__zoom-wrap{-ms-touch-action:none;touch-action:none;position:absolute!important;left:0;right:0;top:0;bottom:0;}
.pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.pswp__zoom-wrap{position:absolute;width:100%;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 333ms cubic-bezier(0.4,0,0.22,1);transition:transform 333ms cubic-bezier(0.4,0,0.22,1)}
.pswp__bg{will-change:opacity;-webkit-transition:opacity 333ms cubic-bezier(0.4,0,0.22,1);transition:opacity 333ms cubic-bezier(0.4,0,0.22,1)}
.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{-webkit-transition:none;transition:none}
.pswp__container,.pswp__zoom-wrap{-webkit-backface-visibility:hidden}
.pswp__item{position:absolute!important;left:0;right:0;top:0;bottom:0;overflow:hidden}
.pswp__img{position:absolute;width:auto;height:auto;top:0;left:0}
.pswp__img--placeholder{-webkit-backface-visibility:hidden}
.pswp__img--placeholder--blank{background:#222}
.pswp--ie .pswp__img{width:100% !important;height:auto !important;left:0;top:0}
.pswp__error-msg{position:absolute;left:0;top:50%;width:100%;text-align:center;font-size:14px;line-height:16px;margin-top:-8px;color:#CCC}
.pswp__error-msg a{color:#CCC;text-decoration:underline}Hallo Hanna,
scheint ein bekanntes Problem zu sein:
https://github.com/dimsemenov/Pho…mment-340648679
Versuche zunächst, ob die Lösung: focus in den Optionen auf false setzen, das Problem löst.
Das Einzige was nach wie vor nicht geht ist das Untermenü bei 2zeiligem Navi.
Der Grund dafür ist, dass das Untermenü von den Punkten des Hauptmenüs in der zweiten Zeile überdeckt wird. Das kann behoben werden, indem man dem ul des Untermenüs einen hohen z-index gibt.
Eigentlich finde ich, dass nichts dagegen spricht, wenn das Menü bei schmalem Fenster zweizeilig wird, weil man dann weiter Zugriff auf alle Menüpunkte hat. Es sieht nur ein wenig merkwürdig aus, wenn durch die Überdeckung ein Hauptmenüpunkt in der zweiten Zeile nur zum Teil sichtbar ist.
Versuche folgendes: Beim ul der zweiten Stufe das margin-top löschen und statt dessen top: 100%; setzen:
html-seminar.de/woltlab/attachment/2252/
Mit den weiteren Problemen in den anderen Browsern sehen wir dann weiter, wenn dies funktioniert.
Gibt es eigentlich extra Befehle, die nur für den Internetexplorer bestimmt sind und die alle anderen Browser ignorieren?
Der Internetexplorer war schon immer der Schrecken der Webentwickler. Es ist weniger das Problem, dass es spezielle Befehle für ihn gibt, sondern mehr, dass er bestimmte Befehle gar nicht unterstützt oder darauf anders reagiert. Konkret trifft das z. B. auf position: sticky; zu, es wird vom IE nicht unterstützt.
Die Untermenüs konnte ich mit folgenden Änderungen im CSS sichtbar machen:
overflow: auto; auf overflow: visible; geändert für .nav-list in navi.css ab Zeile 91
position: relative; hinzugefügt für .navlist ul li in navi.css Zeile ab Zeile 88
mit der Positionierung rechts funktionierts nicht so recht beim Resizen
Hast Du mit right und bottom positioniert wie in deinem ursprünglichen CSS? Dann müsste es eigentlich in der rechten unteren Ecke kleben.
Ändere ich max-height: 400px auf height: 400px ist das Foto ok, aber es ist nicht mehr responsive.
Das ist der Nachteil von Hintergrundbildern: Der Container passt sich nicht an das Bild an und es ist schwer reponsiv zu machen und Abschneiden oder verzerren zu vermeiden.
Es gibt im wesentlichen zwei Varianten, um über ein Bild etwas darüber zu legen, die ich hier zusammen gestellt habe:
https://jsfiddle.net/Sempervivum/k84scz1a/24/
Statt Text ist es in deinem Fall ein weiteres Bild.
Mit obsoluter Positionierung des Herzens solltest Du eigentlich zum Ziel kommen. In deinem ersten Code finde ich diese jedoch nicht, sondern nur relative Pos. für das Herz. Du musst dem Container das position: relative; geben und dem Herz ein position: absolute;.
#Inhalt {
background-color: orange;
padding-bottom: 2em;
.zeiger_zoom-in {
cursor:zoom-in;
}
}So kannst Du CSS nicht verschachteln. Wenn Du es so umstellst, sollte es funktionieren:
#Inhalt {
background-color: orange;
padding-bottom: 2em;
}
.zeiger_zoom-in {
cursor:zoom-in;
}Oder, falls es dir darauf ankommt, dass das .zeiger_zoom-in innerhalb von #Inhalt liegt, so:
#Inhalt .zeiger_zoom-in {
cursor:zoom-in;
}Nicht ganz simpel aber auch nicht übermäßig kompliziert und ohne jQuery:
https://www.dev-tips-and-tricks.com/animate-elemen…view-vanilla-js
... und das, was ich in Posting #7 vorgeschlagen habe, ist hier genauer beschrieben und ist kein Ajax sondern eine Alternative dazu, die viel einfacher ist: