Beiträge von lagraf

  • Bottom fixierter Footer und Ausklappbereich

    Hallo Sempervivum,

    danke für das Beispiel, habe ich mir angesehen! Sollte es zum Auftrag kommen werde ich es berücksichtigen.

    Frage zu flex: Ich habe gelesen dass IE 10 und davor dieses Modell nicht unterstützen, dass es aber Möglichkeiten gibt, die Darstellung mehr oder weniger auch darauf hinzubekommen. Soll man diese älteren Browser überhaupt noch unterstützen?

  • Bottom fixierter Footer und Ausklappbereich

    Hallo tk1234, hallo Sempervivum,

    die Seite ist nur als Layout gedacht, damit der Kunde sieht wie die Oberfläche aussehen kann. Daher ist alles HTML, CSS, etc nur dazu da, dass das Layout dargestellt wird, mehr nicht. Die Darstellung wurde inzwischen schon zig-Mal geändert, begonnen hat alles mal mit einer schwarzen Page. Daher ist irgendwo im CSS File auch noch der schwarze Hintergrund beim Aufklappen übrig geblieben, habe ich inzwischen schon korrigiert. Sollte sich der Kunde doch mal entscheiden dass er eine neue Page haben will, dann beginnt ein Aufbau von Null komplett neu, nur die Optik wird übernommen!

    Und um der nächsten Frage vorzubeugen: Warum tue ich mir den Aufwand an, das Layout solange umzubauen, bis es dem Kunden vielleicht gefällt: Ich muß nicht davon leben, beziehe mein Geld von woanders und nehme das zum Lernen und Üben her.

    Trotzdem danke für die Einwände, sollte es was werden, werde ich sie berücksichtigen, auch wenn ich die meisten davon sowieso von selber vorgehabt hätte oder sich manche bei einer Echt- statt einer Dummyseite gar nicht stellen würden.:)

  • Bottom fixierter Footer und Ausklappbereich

    Ich hab was gefunden, weiß aber nicht, ob das die beste Lösung ist:)

    Ich ändere beim Auf- und Zuklappen des Aufklappbereiches per Javascript die Eigenschaft von .site-footer, funktionieren tut's auf jeden Fall!

    Code
    // Beim Aufklappen
document.querySelector(".site-footer").style.position = "relative"
// Beim Zuklappen
document.querySelector(".site-footer").style.position = "absolute"

  • Bottom fixierter Footer und Ausklappbereich

    Ich habe eine ziemlich kurze Suchseite, wo defaultmäßig nur nach einem Wert gesucht werden soll. Deshalb fixiere ich den Footer ganz unten am Bildschirmrand:

    Code
    * { margin: 0; padding: 0; }
    html, body { height: 100vh; }
    #site-content { position: relative; min-height: 100%; }
    .site-footer { position: absolute; bottom: 0; width: 100%; }

    Allerdings gibt es auf der Seite einen JS+jQuery Ausklappbereich, der detailiertere Suchmöglichkeiten aufklappt und dadurch die Seite vergrößert. Dadurch rutscht der untere Teil der Seite aber unter den Footer hinein. Was kann man machen, damit der Footer beim Ausklappen nach unten rutscht, sodaß die volle Seite gesehen wird?

  • Problem mit Bootstrap Affix

    Hallo Sempervivum,

    die Seite habe ich mir angesehen!

    Am Besten funktioniert noch die Variante, wo man den gesamten Body-Inhalt in eine Table packt und Header bzw. Footer über thead und tfoot einbindet. Allerdings ist die Table-Syntax nicht mehr state-of-the-art.

  • Problem mit Bootstrap Affix

    Ich möchte einen Header am oberen Rand fixieren, dazu verwende ich affix. Mit margin-top schiebe ich den Main Content hinunter, damit er nicht im Header liegt. Ist der Main Content länger als eine Seite und ich drucke die Page über die Browser Funktion, dann passt dies zwar bei der ersten Seite, ab der nächsten Seite schiebt sich der Text allerdings in den Header hinein. Wie kann ich das verhindern?

  • Responsive Reaktion bei schmalem Display

    Auch doctype ändert nichts, der Block .box steht entweder zentriert (justify-content: center) oder unten (justify-content: flex-end) bei .col, aber immer der gesamte Block (.box_name und .box_size).

    Ich habs probiert mit

    Google Chrome Version 84.0.4147.105 (Offizieller Build) (32-Bit) und

    Firefox 78.0.2 (32-Bit)

    Ich stelle nochmal die aktuellen Styles rein, vielleicht habe ich was übersehen:

  • Responsive Reaktion bei schmalem Display

    Wenn ich sempervivums Code von .box und .box_name verwende, dann steht der ganze Block (.box_name und .box_size) am unteren Rand des Fotos. Es soll aber .box_name mittig und nur .box_size am unteren Rand des Fotos stehen. Die Anweisungen margin-top: auto und margin-bottom: auto ändern nichts. Müßte nicht zusätzlich .box_size positioniert werden?

    Die Mediaquery habe ich eingebaut:

    Code
    .box { padding: 15px; padding-bottom: 0px; display: flex; flex-direction: column; justify-content: center; background-color: #c0ffff; }
.box_name { padding: 5px; margin: 0; font-size: 200%; text-align: right; margin-top: auto; margin-bottom: auto; background-color: #ffc0c0; }
.box_size { padding: 5px; text-align: right; vertical-align: bottom; margin-bottom: 15px; background-color: #ffc0c0; }
.box_size span { font-size: 80%; white-space: nowrap; }

@media screen and (max-width: 608px) { .box_name, .box_size { text-align: center; } }

    608 ist genau die Breite, wo die Columns umspringen. Ist gewährleistet, dass die Angabe von 608 auf allen Geräten und Browsern passt oder sollte man die Columns händisch schon vorher, z.B. bei 768 zum umspringen zwingen? Wie würde man das anstellen?

    figure hilft mir bei diesem Foto nichts, denn der Name und die Modeldaten sollen genauso dargestellt werden, wie gewünscht. Allerdings kann ich figure in der Übersicht der gesamten Models gut verwenden.

    Wird flex nur von neuen Browsern unterstützt?

  • Responsive Reaktion bei schmalem Display

    Mit Flex würde das Layout so aussehen:

    Allerdings habe ich dabei die gleichen Probleme wie im ursprünglichen Layout wenn die Browserbreite kleiner wird und das Layout umspringt:

    • Der Text in "box" soll zentriert erscheinen
    • Der vertikale Freiraum in "box" soll verschwinden

    Außerdem soll der Block "box_size" sich am unteren Rand des Div befinden (vertical-align bzw. margin-bottom). Das sind alles keine Probleme mit der Entscheidung flex oder nicht flex zusammenhängen.

    Wie kann man das steuern?

  • Responsive Reaktion bei schmalem Display

    Hallo Leute,

    ich spiele mich schon seit 2 Tagen mit einem responsive Design, welches auf breiten Displays 2 Blöcke nebeneinander darstellt (links Modeldaten, rechts Foto). Dabei soll der Block "box_size" auf der Unterkante des Fotos abschließen, unabhängig davon, wieviele Zeilen er beinhaltet (vertical-align: bottom oder bottom: 0px), was ich aber nicht hinbringe.

    Wird das Browserfenster in der Breite verkleinert, springen die Blöcke um, wobei einige Layoutänderungen erfolgen sollen:

    • Der Leerraum vor Block "box_name", zwischen "box_name" und "box_size" und nach "box_size" soll verschwinden. Letzterer wird wahrscheinlich durch korrektes Anbringen von vertical-align: bottom oder bottom: 0px schon weg sein.
    • Die Textblöcke "box_name" und "box_size" sollen zentriert über dem Foto stehen und der Text zentriert sein.

    Ich habe ein minimales Testfile erstellt und zur Erleichterung die Blöcke farbig hinterlegt. Vielleicht hat jemand Lust und kann mir dabei weiterhelfen.

    LG

  • Request_Uri über .htaccess weiterleiten

    Danke für die Rückmeldung,

    ich hatte aber heute Nacht eine Idee und die habe ich ausprobiert und es klappt! Man darf anscheinend die einzelnen Rewrite Statements nicht durch ein anderes Statement (<IF>) trennen, sondern muss sie direkt hintereinander setzen, ist nicht so wie in "normalen" Programmiersprachen:

    Apache Configuration
    <IfModule mod_rewrite.c>
    <IF "%{HTTP_HOST} == 'weltladen.rachbauer.org'">
        RewriteEngine On
        RewriteBase /
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . http://weltladen.rachbauer.org/404.html?param=%{REQUEST_URI} [L]
    </IF>
</IfModule>

    Arne: Ich verwende lokal die XAMPP Installation, aber anscheinend kann die RewriteRule nicht /404.html oder localhost/weltladen/404.html aufrufen, wenn der Aufruf nicht über eine Domain oder einen Virtuellen Host erfolgt.

  • Request_Uri über .htaccess weiterleiten

    Ich habe inzwischen gelesen dass der Rewrite nur funktioniert, wenn man einen VHOST über localhost anlegt!

    Ich habe jetzt noch eine IF Abfrage in die .htaccess eingebaut, was dazu führt, dass der Server endlos looped! Hat jemand eine Idee, wie eine IF einen Endlosloop in der .htaccess hervorrufen kann?

  • Request_Uri über .htaccess weiterleiten

    Ich habe jetzt folgendes in .htaccess eingebaut was auf der Domain am remote server funktioniert, der Parameter wird per GET an die 404.html weitergeleitet:

    RewriteEngine On

    RewriteBase /

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule . /404.html?param=%{REQUEST_FILENAME} [L]

    Am Testrechner mit xampp installiert und dem Aufruf
    localhost/dir/xyz.html

    wobei xyz.html nicht existiert erhalte ich die Meldung, dass die URL nicht existiert, obwohl mode_rewrite eingebunden ist.

    Wenn ich statt der RewriteRule aber ErrorDocument zur Weiterleitung verwende, klappt die Weiterleitung, aber ich kann halt REQUEST_FILENAME nicht mitgeben.

    Hat jemand eine Idee woran es beim localen Aufruf liegen könnte, dass rewrite nicht klappt?

  • Request_Uri über .htaccess weiterleiten

    Eine meiner Seiten wird von verschiedenen anderen Seiten mit folgender Syntax aufgerufen:

    http://www.domain.tld/userkennung

    Die Userkennung ist immer unterschiedlich und wird nicht als Parameter (?userkennung oder ?user=userkennung) übermittelt, sondern so als wäre es ein Unterordner. Jetzt könnte ich für jeden möglichen User diesen Unterordner "userkennung" anlegen mit einer index.html und einer Weiterleitung auf eine zentrale Seite oder mit einem .htaccess und einer ErrorDocument Seite, die ebenfalls weiterleitet.

    Besser wäre es, wenn man auf http://www.domain.tld direkt dies mittels .htaccess abfangen und die Request_Uri über das aufgerufene ErrorDocument oder per Rewrite auf die zentrale Seite weiterleiten könnte. Dort könnte ich die Uri auswerten und entsprechend der Userkennung verarbeiten.

    Gibt es da eine Möglichkeit und wie würde dies funktionieren?

  • Image über Image fixieren

    Ich habe dein 2. Beispiel ausprobiert, aber mit der Positionierung rechts funktionierts nicht so recht beim Resizen - ev. bekommt man das mit media queries hin.

    Problemlos ist allerdings eine Positionierung links, das funktioniert bei jeder Breite.

    Ich denke, ich werde dem Kunden diese Variante vorschlagen!:)

    Danke für deine Infos!

  • Image über Image fixieren

    Code
    <div class="row">
   <div class="left">
      ...
   </div>
   <div class="right" style="background-image: url('foto.jpg'); background-repeat: no-repeat; max-height: 400px">
      <img src="herz.png" style="position: relative; bottom: 15px; right: 50px; opacity: 0.7">
   </div>
</div>

    Damit erhalte ich nur einen 1cm hohen Streifen von foto.jpg.

    Ändere ich max-height: 400px auf height: 400px ist das Foto ok, aber es ist nicht mehr responsive.

    Ich habe mal im Code den gesamten Aufbau skizziert: Es gibt eine row und darin 2 Blöcke nebeneinander. Im linken Block gibt es ein paar beschreibende Texte, im rechten Block das Foto dazu.

  • Image über Image fixieren

    Ich habe ein Foto und möchte in der rechten unteren Ecke immer an der gleichen Stelle ein Herz anzeigen. Wenn ich die Browserbreite verkleinere und das Foto irgendwann anfängt sich responsive zu verkleinern springt das Herz aus dem Foto heraus. Kann man es irgendwie fixieren, damit es immer an der gleichen Stelle im Foto bleibt? Ich habe schon die verschiedensten position Angaben versucht, bringe es aber nicht hin.

    Code
    <div>
   <img src="foto.jpg" style="max-height: 400px">
   <img src="herz.png" style="position: relative; bottom: 15px; right: 50px; opacity: 0.7">
</div>