Seite auf mobiler Ansicht gleich wie auf Desktop
Hallo, ich habe eine Seite die für einen FullHD Monitor ausgelegt ist. Ich werde das auch noch ändern, dass es mit 4K usw geht. Nur die mobile Ansicht macht mir zu schaffen:
So ist es: aromacafe.de So soll es sein: PROMOTEX - Werbetechnik aus einer Hand - Index Außerdem ist mir aufgefallen dass die Hintergrundfarben, die ich für den Browser genommen habe, in der mobilen Ansicht teils nicht zu sehen sind, das sieht man gut bei einem Vergleich Desktop gegen Mobil. Was noch zu erwähnen wäre: Obwohl ich einen .htaccess Passwortschutz in einem Untervrrzeichnis habe, fragt er mich nach dem Passwort schon auf der Mainpage Edit: Ich weiß jetzt woran der letzte Punkt liegt: ich habe ein Bild in dieser „gesperrten Zone“ abgespeichert was auf der Mainpage aufgerufen wird. Wenn ich das Passwort nicht eingebe wird mir nur ein großer weißer Kasten angezeigt. Wie kann ich umgehen, dass die .htaccess den Zugriff auf Dateien verhindert? Also zumindest den Zugriff vom Programm selbst auf Dateien? |
Zum ersten Punkt kann ich nichts sagen, da nicht klar ist, was du mit mobile Ansicht meinst. Ich sehe auf PROMOTEX - Werbetechnik aus einer Hand - Index konkret keine Änderung, wenn man das Fenster kleiner macht. Aber soweit ich das sehe, ist das doch komplett XT-Commerce, d.h. man bräuchte darüber mehr Infos, welche Feature erfüllt werden und welche nicht.
Zitat:
Du könntest höchstens ein Skript schreiben, dass dir die entsprechende Datei ausgibt. Das Skript muss natürlich ausserhalb des Bereich der htaccess Datei sein. Im einfachsten Fall sähe es so aus: PHP-Code:
|
Mobile Ansicht heißt, wie es auf Handys dargestellt wird. Öffne ich die Promotex Seite auf dem PC und vergleiche die mit der Ansicht auf dem PC, sehe ich keinen Unterschied. Genau das will ich auch haben.
|
Zitat:
Wobei ich aber auch nur den Code sehe http://www.my-promotex.de/gm_javascr...=&products_id= und das ist ein 10 Jahre altes Skript. Insofern ist nicht klar, was Unterschiede produziert. |
Auch wenn ich es nicht testen kann, könnte ich mir vorstellen, dass du mit einer festen Breitenangabe für <div id="wrapper"> deinem Ziel näher kommst.
Also statt dem Format 'width: 98vw;' setze mal HTML-Code:
width: 1400px; Und wenn es dann nicht klappen sollte, könntest du zusätzlich testen, ob sich was verändert, wenn du im <head> Bereich das HTML-Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Aber wie gesagt... ich stochere da auch etwas im Dunkeln und ... aber Versuch macht klug. |
Zitat:
|
Zitat:
Fängt damit an, dass da viele Fehler drin sind, von denen ich nicht einschätzen kann, was die alles an seltsamen Dingen verursachen... der w3c.org Validator sagt folgendes https://validator.w3.org/check?uri=h...Inline&group=0 Schau mal, ob die Fehler beseitigt bekommst. Als nächstes mischt du im Code 'inline Styles'... also Formatierungen in den HTML Tags.. mit Formatierungen im Stylesheet. Hmmm... das ist mehr als unglücklich. Schmeiß diese ganzen Inline-Styles raus und formatiere das Ganze mit CSS im Stylesheet. So ganz durchschaue ich auch noch nicht die Idee, die sich hinter deinem Layout verbirgt. Du gibst eine uralt Webseite als Vorlage/Referenz an, die alles andere als responsive ist und willst es genau so haben, aber du übersiehst dabei offensichtlich, dass es zwischen der Desktopansicht und der Handyansicht noch etliche andere Displayversionen und Bildschirmauflösungen gibt. Sollen die alle von deiner Seite ausgeschlossen werden, weil sie nur Teile davon oder gar nichts sehen können? Mach doch mal einen Selbstversuch und gehe auf deine Beispielseite und verkleinere das Browserfenster... Da wird die Seite einfach abgeschnitten, wenn du unter die im CSS eingestellte Breite kommst... nicht jeder hat ein 21" Display mit 1900px Breite. Wenn du die o.a. Fehler raus hast, dann melde dich wieder - vielleicht finden wir einen Weg deine Vorstellungen mit CSS und MediaQueries irgendwie umzusetzen. |
Also... erstmal Danke für die ganzen Tipps. Ich treffe halt bald den Typen für den ich die Website mache. Da der sehr viel mit dem Handy macht, wird er so sicher auch mal auf die Website schauen wenn ich das mit ihm dann bespreche. Erstmal will ich gar nicht, dass die ganze Seite an Handys, Tablets etc. angepasst wird, sondern dass die Seite eins zu eins so angezeigt wird, wie auf dem Desktop. Also erstmal will ich gar kein richtiges Responsive Design, sondern genau das gleiche Design. Nur auf dem Handy ist es zurzeit so, dass irgendwie alles auf die Bildschirmgröße eingerückt wird, und das sieht sehr unschön aus. Ich kümmere mich jetzt erstmal um die Sachen die du oben genannt hast.
|
Ach wir reden über aromacafe.de die Seite wurde mir zuerst nicht angezeigt.
Das die auf einem Mobilgerät anderst angezeigt wird, liegt mit Sicherheit an den Größenangaben. Du positionierst und die zwängst ein was dazu führt, dass auf kleinen Geräten skaliert wird. Das ganze Layout liesse sich aber auch einfach flüssig umsetzen, sodas es auf den meisten Monitorgrößen bedienbar ist. Ich würde auf jeden Fall zu relativen Angaben raten. vw war gar nicht schlecht, alternativ auch Prozent. |
1:1 bedeutet aber auch, dass alle Elemente verkleinert werden und dann vom Inhalt (Schrift, Bilder, Links usw) wahrscheinlich nichts mehr zu erkennen ist...
hier mal ein Screenshot von deiner 'Beispielseite'. http://s414653727.online.de/tab_test/promotex.png ... hmmm... so soll das sein :(? Wobei die Bildgröße hier schon fast doppelt so groß ist wie das original auf dem Handy aussieht! Halte mal dein Handy dagegen... dann siehst du wie groß das tatsächlich ist. |
Et voila, die Seite war Gold wert! Ich hab jetzt alle Fehler behoben, und gleich auch nochmal einen CSS Checker drüber laufen lassen, auch da alles top. Sonst ist aber alles beim Alten...
|
Man kann ja bei 1:1 ranzoomen :D! Nur schaffe ich es halt nicht in ein paar Tagen, das komplette Layout für mobile Geräte „umzuschreiben“. Deswegen möchte ich ihm für den Termin erst einmal etwas präsentieren, was funktioniert. Und nicht diese untereinander gepackten Bilder, die eigentlich viel zu groß für das Handy sind und man nichts mehr erkennt :)
|
Bitte noch testen, ob das Entfernen von
HTML-Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Liste der Anhänge anzeigen (Anzahl: 2)
Tut es in der Tat, leider nicht so wie erwünscht:
Das erste Bild ist ohne den Meta Tag, das zweite mit. |
Machen wir das weiter :)?
|
Nein... wir sind eindeutig auf dem falschen Weg!
Plan B: ich habe mal die Elemente (im Kopfbereich) etwas anders formatiert... Code:
* { Dann im HTML Dokument das test.css statt des Originals verlinken. Ist aber nur ein Konzept und lange noch nicht fertig - soll nur darum gehen, ob das deinen Vorstellungen näher kommt. Die Änderungen, die ich eingebaut habe, sind durchweg am Anfang des Stylesheets... so etwa bis zum Format für '.footer' |
Wie auch immer du das gemacht hast, es sieht toll aus! Ein paar Fragen hätte ich allerdings noch, ich will ja wenigstens was dabei lernen und verstehen wieso es jetzt anders ist :D.
Zeile 48: Was bedeutet das < Zeichen? Zeile 73: Was ist der border-radius? Bzw was bewirkt er genau hier? |
Und OMG wie hast du es NUR mit CSS hingekriegt, dass die Buttons oben und das Logo ausgeschnitten ist?!?!?!
|
Also das > in Zeile bedeutet, dass ich nur das unmittelbare Kindelement <a> in #banner formatieren will... ohne das > wären alle a's ausgewählt!
Schau dir das mit den Slektoren im CSS mal hier an! https://wiki.selfhtml.org/wiki/CSS/Selektoren Das border-radius macht die Ecken eines Elementes rund... mit dem Radius, der da angegeben ist. Sind die Elemente quadratisch... so wie deine Bilder... dann wird bei einem Radius 50% sowas wie ein Kreis aus dem Element. Die überstehenden Ecken sind dann weg und es wirkt wie kreisrund 'ausgeschnitten'. Dass dein Logo nicht ganz so 100% aussieht, liegt am Bild selber, da ist das sichtbare Logo etwas nach unten verschoben und darüber ist ein Rand... mach das Bild genau quadratisch und schneide es so aus, dass keine Ränder über das Bild (das man sehen soll) hinaus ragen, dann sieht das Logo auch nicht mehr so schief aus. |
... fast vergessen... hier noch der Link zur Erklärung von border-radius.
https://wiki.selfhtml.org/wiki/CSS/E.../border-radius |
Zur weiteren Erklärung, warum das jetzt anders ist... ich habe den oberen Teil (Navigation und den Teil mit den runden Buttons) auf ein Flexbox-Layout umgestellt. Das ist von sich aus beinahe zu 100% responsive und passt sich, wenn man auf absolute Größenangaben verzichtet, automatisch an die Bildschirmgröße an.
Ok... da sind noch px Angaben drin, aber die sagen nur, das Element darf nicht größer werden als... aber kleiner darf es. Schau dir an, was Flexbox alles kann... https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
Wow, echt klasse. Ich glaube ich muss noch sehr viel lernen xD... Bist du Webdesigner oder sowas in der Richtung oder warum hast du soviel Ahnung von dem Zeug?
|
Nun ja... nöööö... reines Hobby! Aber so ein paar Seiten habe ich schon zusammengebastelt. Und jedes mal was dazu gelernt.
|
Wow! Dafür kennst du dich wirklich gut aus! Hast du denn schonmal Geld damit verdient?
|
Soweit ich das richtig verstanden habe, sollten bei justify-content: space-between; die einzelnen "Items" möglichst viel Abstand zu den jeweils anderen halten, oder?
|
Geld verdienen mit meinem Hobby... neee. Solange es mir Spaß macht, ist das 'Ausgleich' genug.
Mit justify-content: space-between; erreichst du, dass du am linken Rand ein Item hast und am rechten Rand ein Item... alle Anderen sortieren sich dazwischen mit jeweils gleich großen Abständen. |
Naja, finde ich auf jeden Fall nicht selbstverständlich von dir dass du dir soviel Zeit nimmst für mich <3! Ich hab jetzt übrigens auch (dank dir) den Fehler gefunden, warum der mobile Browser nicht auf die CSS Datei reagiert. Scheinbar ist er allergisch auf den Dateinamen style.css, denn wenn ich sie, wie bei dir in zB test.css umbenenne klappt alles. Wenn du nochmal kurz auf die Seite gehst, siehst du dass justify-content nichts bewirkt. Ein Blick mit Google Chrome und dem Inspektor zeigt, dass die div "navigation" breit genug ist, muss also an diesem Befehl liegen.
|
Darf ich fragen wie alt du bist?
|
Das könnte auch daran liegen, dass ich ein paar Dinge korrigiert habe in der text .css... hmmm....css ist Groß- Kleinschreib sensibel ... #overhead ist nicht gleich #Overhead ;)!
Was willst du im id #navigation erreichen? Ein links... ein rechts... einen in der Mitte? Das sollte mit justify-content: space-between; allerdings klappen - zumindest in meiner Simulation im FF tut es das. Sieht aber nicht so doll aus ... versuche es mal mit justify-content: space-evenly; Musst du aber beachten, dass das nicht von allen Browsern unterstützt wird. |
Zitat:
|
Krass, ich hätte dich auf 20 geschätzt :D... Ist ja schon unüblich dass sich die "ältere Generation" so gut mit PC's und dem ganzen Kram auskennt.
|
space-evenly klappt, nur sagt mir jetzt der CSS „Checker“ dass das kein gültiges Argument ist? Kannst ja selbst mal gucken, auf meiner Seite in den Footer gehen und da rechts das Blaue ankilcken
|
Ja.. seh ich. Vielleicht ist das genau das, was ich sagte - wird nicht von allen Browsern unterstützt. Warum das aber von w3c angemeckert wird, kann ich nicht sagen. Ist möglicherweise (noch) nicht in den Standard von CSS aufgenommen worden.
Aber wenn space-evenly bei dir funktioniert, dann müsste auch space-between funktionieren. Wenn ja, kann man den 'evenly' Effekt mit ein ein bisschen padding oder margin am 1. und 3. Element nachbauen. |
Habe mir mal gerade dein CSS etwas näher angeschaut... das geht gar nicht!!!
Du hast eine @media für min-width: 1280px und dann eine @media für max-width: 480px Das heißt, für alle Breiten zwischen 480px und 1280px hast du gar keine CSS Formatierungen. So macht man das auch nicht - man erstellt sich ein Stylesheet zunächst ohne eine @media Angabe... das gilt dann sozusagen für alles, ist der Ausgangspunkt deines Designs. Jetzt kommt es darauf an, ob dieser Ausgangspunkt 1.) die 'Ansicht Handy' oder 2.) die 'Ansicht Desktop' ist Bei 1.) würdest du dann für ein breiter werdendes Display mit @media screen and (min-width: ...px) die notwendigen Änderungen (und nur die notwendigen Änderungen - alles andere steht ja schon im Grundgerüst außerhalb der @media) schrittweise für das 'Breitere' umformatieren Bei 2.) musst du mit @media screen and (max-width: ...px) arbeiten. Und auch in die @media nur die Abweichungen für ein kleiner werdendes Display eintragen. Also immer! Das Grundformat (Handy oder Desktop) ohne eine @mediaQuery. Dann (dahinter im Stylesheet) nur die notwendigen Änderungen in einer @mediaQuery so, wie ich oben beschrieben habe. In der @media sind dann immer nur eine handvoll Regeln enthalten - eben nur das, was geändert werden muss! Alles andere steht ja schon im Grundformat drin und muss nicht wiederholt werden. |
Ich hatte gestern keine Lust mehr das noch für zwischen 480px und 1280px zu machen.
Ich lösch dann heute den überflüssigen Teil raus |
Ja... sag Bescheid, wenn du es fertig hast, dann schau ich nochmal drauf.
Wenn du dich an das 'Konzept' hältst, das ich oben beschrieben habe, wirst du sehen, dass dein stylesheet deutlich kleiner und viel einfacher zu bearbeiten ist. |
Fertig. Hast recht, um einiges übersichtlicher
|
Da stimmt was nicht in Stylesheet ... so um Zeile 190 herum.
HTML-Code:
@media screen and (min-width: 480px){ Und was hast du mit dem Logo bei kleiner 480px gemacht.. da passt was nicht! |
Stimmt, mit dem Logo muss ich nochmal ran. Die Codezeile bezweckt, dass der Overheader a nur Grau ist, wenn das Bild größer als 480px ist, weil ich bei unter 480px einen anderen Hintergrund nehme, auf dem man das Grau bei Impressum und Login schlecht sieht, deshalb habe ich jetzt jedem Objekt einzeln Farbe zugewiesen, wenn screen kleiner als 480px.
|
Das Logo reagiert irgendwie nicht auf width und height. Siehe Zeile 208. Jegliche Änderung bewirkt nichts ):
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 07:54 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023