Stylesheet, Media Queries und Handy

[LeanderAT]

Hallo!

Meine Homepage wird auf Handys nicht richtig angezeigt. Am PC passt alles...je nach Fenstergröße wird ein unterschiedliches Design geladen. Mir ist das Hintergrundbild der Homepage wichtig, weswegen ich diese Machart benötige.

http://www.seelenpuls.at/hpneu/index_de.php

Momentan nur Anfang und Neues klickbar. Je nach Fenstergröße ändert sich die Auflösung. Nur das Hintergrundbild funktioniert momentan, von groß (1) bis klein (5)...die Zahlen sind nur zum Testen.
Die Links fallen aus dem Bild raus, weil sie noch nicht gesetzt sind je nach Auflösung.

Auf dem Handy ändert sich aber nichts bzw. wird es falsch angezeigt.

Der Code ist so, mit min width, max width...

Können Handys die Befehle nicht oder was macht man da für Handys? Die niedrige Auflösung habe ich inkludiert, weil manche Handys so eine laut Datenblatt haben.


<link rel="stylesheet"
media="screen and (max-width: 550px)"
href="anf_res5.css">
<link rel="stylesheet"
media="screen and (min-width: 551px) and (max-width: 933px)"
href="anf_res4.css">
<link rel="stylesheet"
media="screen and (min-width: 934px) and (max-width: 1224px)"
href="anf_res3.css">
<link rel="stylesheet"
media="screen and (min-width: 1225px)"
href="anf_res2.css">
<link rel="stylesheet"
media="screen and (min-width: 1437px) and (min-height: 882px)"
href="anf_res1.css">

 

[xenon-seven]

Grundsätzlich hat das nichts mit Handys zu tun sondern mit den verwendeten Browsern auf den Handys. In den Meta-Tags sollte zumindest die Angabe "<meta name="viewport" content="width=device-width,initial-scale=1.0" />" nicht fehlen. Die Media-Screen-Angaben müssen so weit ich weiß eigentlich im css definiert werden.

 

[cbdw]

Ich würde dir empfehlen kein XHTML 1.0 mehr zu schreiben. Schau dir mal HTML5 und CSS 3 an. Und dann such mal nach Responsive oder Adaptive Design. Da gibt es ziemlich viele gute Tutorials zu. w3cschools liefert auch ziemlich viele Informationen. Ich persönlich hau alles in ein css file und benutze @Media-queri um alle auflösungen anzupassen.

Schau dir einfach mal n Tutorial an

 

[PERKELE]

...

+1 - Dem kann ich nur zustimmen.

 

[LeanderAT]

Danke! Naja, ich möchte keine neue Sprache lernen für eine Hobbyseite in Zeiten von Facebook.
Ich habe noch nichts für meine Lösung gefunden, wo eben je nach Auflösung eine Hintergrundgrafik geladen wird. Das geht nur via Javascript oder manuelle Auswahl oder Mediaqueries. Es ist ja kein "zentral eine Grafik anzeigen und links und rechts wird aufgefüllt". Der gesamte Text liegt ja auf der Hintergrundgrafik.

Die alte Version meiner Homepage habe ich 2005 oder so gemacht...für eine Auflösung ab 1024x768...nur sieht alles halt mit 1920x1080 oder höher zu klein aus:

http://www.seelenpuls.at/index_de.php

Da ist alles klickbar.

 

[blablub1212]

Du könntest deine Seite auch einfach mit WordPress bauen und ein Theme nehmen, dass so eine Funktion bietet, z.B.: http://ginva.com/2013/07/full-screen-background-portfolio-wordpress-themes/

 

[LeanderAT]

Danke! Nein, mag solche "modernen" Layouts nichts, wo es hauptsächlich um Fotos geht und Vollbild. Ich hab eher Text, Gedichte etc.

Bin draufgekommen, dass es am Handy EH funktioniert. Hatte nur eine Datei vergessen.

Mein Problem ist jetzt nur noch, dass ich den Code richtig einfüge. Hab sowas gefunden. Keine Ahnung, ob das dann funktioniert.

https://responsivedesign.is/develop.../media-queries-for-common-device-breakpoints/

Ich werde für die Handies einfach eine andere Version machen, da alles zu klein ist bzw. es mehr Sinn macht, ein Headerbild zu nehmen und den Text darunter statt alles darauf.

 

[sedot]

Guck mal bei w3schools, meines erachtens sind da schöne Beispiele und sinnvoller Code.
Javascript und Frameworks sind nicht notwendig um eine Seite hübsch ausschauen zu lassen, ganz unabhängig vom verwendeten Gerät.

 

[LeanderAT]

[QUOTE="cbdw, post: 21600775, member: 762351"Ich persönlich hau alles in ein css file und benutze @Media-queri um alle auflösungen anzupassen.

Schau dir einfach mal n Tutorial an[/QUOTE]

Danke!

Ich mache es nun auch so, dass ich in die PHP-Seite nur eine (1) CSS-Datei einbinde. Das Layout steht dann in dieser CSS. Allerdings habe ich ein Problem.

In der PHP habe ich Div-Container...
also Navigation, Center, Footer-Text, Leiste mit Links usw. ... und in der CSS ist nur ein Hintergrundbild eingebunden und die Positionsangaben, wo die Divs sind, wie groß, Schriftfarbe usw.

Für verschiedene Computerscreens ist alles ok, nur macht mein Design mit einem Hintergrundbild über der gesamten Homepage keinen Sinn für Handies! Also will ich es da anders machen, nämlich das Logo, darunter mittig die Links und dann der Text. Also so:

[Logo]
Menülink1 Menülink2 Menülink3
Inhaltstext.
Inhaltstext
.......

Allerdings sind die Menülinks in der PHP untereinander in der Div...
Wie bekomme ich sie nun anders hin? Kann man das Menü, die Links auch in eine CSS bekommen?

Oder muss ich von jeder PHP-Datei (index, biografie, diskografie usw.) eine extra PHP machen?

Hier das Menü der PHP-Datei:
<div id="navi"> <a href="index_de.php" title="Anfang">Anfang</a><br>
<a href="neues_de.php" title="Neues">Neues</a><br>
<a href="biografie_de.php" title="Biografie">Biografie</a><br>
<a href="diskografie_de.php" title="Diskografie">Diskografie</a><br>
<a href="downloads_de.php" title="Downloads">Downloads</a><br>
<a href="poesie_de.php" title="Poesie">Poesie</a></br>
<a href="fotografie_de.php" title="Fotografie">Fotografie</a><br>
<a href="gaestebuch_de.php" title="Gästebuch">Gästebuch</a><br>
<a href="kontakt_de.php" title="Kontakt">Kontakt</a><br>
<a href="nachwort_de.php" title="Nachwort">Nachwort</a>
</div>
<!--Ende navi-->

Nun stehen in der CSS die Angaben, wo das Menü platziert ist, wie groß es ist usw...die Links sind untereinander...

Wenn ich aber für Handies die Links nebeneinander darstellen will in zwei Zeilen oder gar ein Dropdownmenü...kann ich dann diesen PHP-Inhalt auch in einer CSS einfügen oder geht es gar nicht und ich brauche eine extra PHP-Datei, wo ich dann den eigentlichen Inhalt reinschreibe?

 

[blablub1212]

Sowas findest du bspw. hier: https://codepen.io/mutedblues/pen/MmPNPG
Das System funktioniert natürlich auch für eine Sidebar Navigation, wie du sie hast. Alles ohne JavaScript, nur reines CSS.

Es ist im Web wesentlich gebräuchlicher, dass die Navigation in ein Hamburger-Menu schrumpft, falls nicht genügend Platz vorhanden ist. Den Ort würde ich nicht verändern.

 

[sedot]

Ich schliesse mich blablu1212 an, gutes Beispiel, sollte so für dich passen.

Ergänzung (17. August 2018)

Ja, du „brauchst“ die .php Datei in deinem Szenario für die dynamischen Inhalte (Text) und die .css Datei für die Darstellung der Website. Die Verknüpfungen im Menü würde ich über .html Links zu den jeweiligen Unterseiten lösen.
Außdem könntest du bei statischen Inhalten (Footer z.B.) auch auf php verzichten und direkt deine Inhalte (Link Impressum z.B.) in die .html-Datei schreiben.
Hast du denn im Moment ein CMS oder wie bearbeitest du deine Website?

 

[LeanderAT]

Danke, werde ich mir ansehen!
Ich mach alles mit PHP und CSS...und tippe den Code

 

[LeanderAT]

Ich schliesse mich blablu1212 an, gutes Beispiel, sollte so für dich passen.

Ergänzung (17. August 2018)

Ja, du „brauchst“ die .php Datei in deinem Szenario für die dynamischen Inhalte (Text) und die .css Datei für die Darstellung der Website. Die Verknüpfungen im Menü würde ich über .html Links zu den jeweiligen Unterseiten lösen.
Außdem könntest du bei statischen Inhalten (Footer z.B.) auch auf php verzichten und direkt deine Inhalte (Link Impressum z.B.) in die .html-Datei schreiben.
Hast du denn im Moment ein CMS oder wie bearbeitest du deine Website?

Ich habe mein Menü einfach durch Links und mit BR dazwischen gemacht.

Wenn ich in der PHP das Menü mit
<ul class="menu">
<li><a href="#work">Our Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

mache....kann ich da in der CSS einstellen, dass es je nach Auflösung mal untereinander, mal nebeneinander dargestellt wird?

Oder das Umschalten von horizontalem zu vertikalem Menü ohnehin nicht mit CSS möglich, sondern die Links müssen in der PHP gesetzt werden? Und ich brauche dann von jeder Inhaltsdatei (PHP) automatisch eine Version für Desktop (Menü links) und Handy (Menü mittig und von links nach rechts)? Und als dritte Datei dann die CSS?

 

[mastaqz]

Wenn ich in der PHP das Menü mit
<ul class="menu">
<li><a href="#work">Our Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

mache....kann ich da in der CSS einstellen, dass es je nach Auflösung mal untereinander, mal nebeneinander dargestellt wird?

Auf das UL eine Flexbox mit flex-direction: column (= untereinander) und dann ein Media Query für die gewünschte Auflösung und auf flex-direction: row (= nebeneinander) ändern.

 

[LeanderAT]

Danke! Mit flex-direction funktioniert es. Allerdings bekomme ich das Menü nicht zentriert.

 

[mastaqz]

justify-content: center für die Zentrierung auf der Hauptachse und
align-items: center für die Zentrierung auf der Nebenachse, je nach flex-direction.
Wenn du beides in die Flexbox machst, ist es auf beiden Achsen zentriert.

 

[LeanderAT]

Vielen Dank! Gestern hatte ich das schon probiert und es ging nicht, aber jetzt gehts.

Die einzigen beiden Probleme sind noch, dass nun das Menü zwar zentriert ist, aber alle Menüpunkte direkt nebeneinander. Also z.B. ProjektMusikDownloadKontakt ... wie bekomme ich da Abstände dazwischen?
Oder soll ich da einfach &nbsp; einfügen? Weil das bei dem anderen Menü mit untereinander stehenden Einträgen eh nicht sichtbar ist.

Zudem wird anders als bei Version 1 bei Version 2 ein Logo angezeigt, zentriert und darunter das Menü.

Ich könnte in die PHP einen neuen DIV-Container einbauen, dann den Inhalt in der CSS entweder leer lassen oder das Logo einbinden für die beiden Versionen? Hab gesehen, dass ein "hide elements with media queries möglich ist".

EDIT Ich habe noch eine andere Frage bitte. Mit CSS kann ich je nach Screen unterschiedliche Einstellungen laden. Aber kann ich auch mit CSS "wenn screen < x, dann lade eine andere php"?
Oder wie kann ich nach unterschiedlichen Bedingungen verschiedene PHP-Dateien laden? Nur mit Javascript?

 

[mastaqz]

Vielen Dank! Gestern hatte ich das schon probiert und es ging nicht, aber jetzt gehts.

Liegt oft am Cache.
Mit F12 in die Chrome Dev Tools.
Dann mit der rechten Maus auf Reload, links neben der Adressleiste,
und "Empty Cache and Reload" auswählen.

Die einzigen beiden Probleme sind noch, dass nun das Menü zwar zentriert ist, aber alle Menüpunkte direkt nebeneinander. Also z.B. ProjektMusikDownloadKontakt ... wie bekomme ich da Abstände dazwischen?

Mit margin.

Ich könnte in die PHP einen neuen DIV-Container einbauen, dann den Inhalt in der CSS entweder leer lassen oder das Logo einbinden für die beiden Versionen? Hab gesehen, dass ein "hide elements with media queries möglich ist".

display: none lässt Elemente aus dem DOM verschwinden.
visibility: hidden lässt Elemente drin, macht sie aber unsichtbar.

EDIT Ich habe noch eine andere Frage bitte. Mit CSS kann ich je nach Screen unterschiedliche Einstellungen laden. Aber kann ich auch mit CSS "wenn screen < x, dann lade eine andere php"?
Oder wie kann ich nach unterschiedlichen Bedingungen verschiedene PHP-Dateien laden? Nur mit Javascript?

Ich habe nichts mit php am Hut,
aber Google kann ich benutzen:
https://www.google.com/search?q=load+php+depending+on+screen+size

 

[LeanderAT]

Danke!

Ja, mit Google habe ich auch einiges gefunden, aber verstehe nur Bahnhof.

Habe jetzt das gefunden und eingebaut. Scheint zu funktionieren. Dadurch leitet die Seite dann auf eine spezielle mobile Seite um.
https://stackoverflow.com/questions/39167148/mobile-detect-function-is-not-working-in-my-site

Gibts da Einwände, unter welchen Umständen das Skript nicht funktioniert?


<?php
function isMobile(){
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$_SERVER['HTTP_USER_AGENT'])||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($_SERVER['HTTP_USER_AGENT'],0,4))){
return true;
}
else{
return false;
}
} // end of function

if(isMobile()){
header("Location: m_index_de.php");

}
?>

 

[sedot]

Hey,
viel zu komplex meiner Meinung nach.
Orientiere dich doch an dem Beispiel-Code aus Post #10 - hast du mal mit .html Links, also ohne php getestet?
Kannst du ja auch offline machen, eine index.html (nur mit Menü) und beliebig viele Unterseiten-Links (im Menü) - wenn du die Browserfenstergröße änderst sollte sich das Menü anpassen.
Von php hab ich auch null Ahnung. Komplette Webseiten offline inklusive .php auf Funktion zu testen klappt mit XAMPP ganz wunderbar.